Django_HTML

一、web开发之HTML

1.1 HTML相关基础

快速生成html的模版方法：

在visual code的新建html文件中输入：！然后tab回车就会出现HTML的模版

双标签：

<p> </p>   <li> </li>

单标签：

<br /> 换行标签
<hr /> 水平线，横线标签

字符集：

<meta charset = "UTF-8">
<meta charset = "gbk">
<meta charset = "gbk2312">

1.2 常用HTML基础标签

标题标签：

单词缩写：head 头部标题

语法：

<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>

段落标签

单词缩写：paragraph 段落

使用段落标签，可以使网页中的文本文字，呈现出一一个段落的格式。

语法：

<p>段落内容</p>

水平标签

单词缩写：horozontal 横线

语法：

<hr />是但标签

练习：实现一个简单新闻页面

换行标签

单词缩写：break 打断，换行

在HTML中，默认换行是需要在浏览器窗口的最右端才会自动换行，这样在每个设备中呈现的效果不一致，如果需要进行某段文本的强制换行，就需要使用到换行标签。

语法：

<br />

div span标签

盒子模型中的两种布局形式：

div divsion的缩写，分割分区的意思，其实有很多div来组合成网页，块级元素

span 跨度，跨距；范围，行内元素

语法：

<div>这是头部</div>
<span>今日价格</span>

标签属性

在使用HTML制作网页的时候如果想让标签提供更多的信息，可以使用标签的一些属性进行设置。

语法：

<标签名  属性1="属性值1" 属性2="属性值2"....>内容</标签名>

例：

<hr width="200" align="left"/>

width 属性，值200 控制宽度

align 属性，值left 控制横向对齐方式

图片img

单词缩写：image 图像

语法:

<img src="图像 URL"/>

通过src属性，进行设置图像文件的路径和文件名，是img标签的必须属性。

属性	属性值	描述
src	url	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素(xhtml不支持%页面百分比)	设置图像的宽度
heigth	像素(xhtml不支持%页面百分比)	设置图像的高度
border	数字	设置图像边框的宽度

链接标签

单词缩写：anchor 锚

语法：

<a href="跳转目标">文本或图像</a>

href 属性指定需要链接到的目标url地址

url地址可以使用绝对路径和相对路径的方式，包括协议等。

例：

href 可以使用 "#",表示为空链接，暂时没有跳转链接地址。

特殊字符标签

html汇总一些标签，具有特殊含义，会被浏览器直接解析，如果需要输出这些标签，需要使用到转义，替代语法。

注释标签

注释标签，可以给HTML文档中添加一些便于于都和理解的文字，并且此标签中的内容不会被直接展示出来，只有通过源代码的方式才可以看的到。

语法：

<!--注释语句-->

列表标签

语法：

<ul>
    <li>列表标签1</li>
    <li>列表标签2</li>
    <li>列表标签3</li>
    <li>列表标签4</li>
</ul>

注意：

1、在<ul></ul>标签中，只能嵌套<li></li>标签，其他标签的直接嵌套语法是不被允许的

2、<li></li>标签中作为一个容器，可以容纳其他的标签元素。

3、无序列表具有默认样式，可以css进行修饰。

表格 table

通常需要是哟个表格的方式展示数据，使数据更加规则的呈现出来。

1、创建表格

语法：

<table>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
    ....
</table>

table定义一个表格

tr 定义表格中的一行，必须嵌套在table标签中，有几对tr标签，就代表有几行表格。

td 定义表格中的单元格，必须嵌套在tr标签中，一对tr标签中有几对td标签，就代表一行中有几个单元格，td中可以作为容器，包含其他标签元素。

2、表格属性

cellspacing	设置单元格与单元格边框之间的空白间距	像素值，默认是2px
cellpadding	设置单元格内与单元格边框之间的空白间距	像素值，默认是1px
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left center right

注意：

可以使用th标签设置表头

之后可以使用CSS修饰表格的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格table</title>
</head>
<body>
    <table border="1" cellspacing="1" width="800px" align="center">
    <tr>
        <th>主机名称</th>>
        <th>IP地址</th>
        <th>服务器类型</th>
        <th>服务器状态</th>
    </tr>
        <tr align="center">
        <td>server01</td>
        <td>192.168.1.112</td>
        <td>web</td>
        <td>up</td>
    </tr>
    <tr align="center">
        <td>server02</td>
        <td>192.168.1.113</td>
        <td>db</td>
        <td>up</td>
    </tr>
    <tr align="center">
        <td>server03</td>
        <td>192.168.1.114</td>
        <td>web</td>
        <td>down</td>
    </tr>
    </table>    
</body>
</html>

表单

1、表单介绍

在HTML中，form标签用来定义一个表单，用来实现用户的相关信息的收集和传递，和后端进行交互。form中的所有内容都会被提交给服务器。

语法：

<form action="url地址" method="提交方式">
    各种表单控件
</form>

常用属性：

action 值为提交到后端接收的url地址

methed 设置表单的提交方式，值为get或post

2、表单控件组成

表单中的提供了多种表单空间，单行文本输入框，密码输入框，复选框，提交按钮，重置按钮等。

3、input控件重点！！！

input控件作为表单中最常使用的，也是需要重点掌握的，基本便签属性为type属性，用来定义不同的控件类类型。

其他常见属性：

属性	属性值	描述
type	text	单行文本输入框
type	password	密码输入框
type	radio	单选按钮
type	checkbox	复选按钮
type	button	普通按钮
type	submit	提交按钮
type	reset	重置按钮
type	image	图像形式的提交按钮
type	file	文件域
name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="" method="GET">
        <!-- 表单控件-->
        <table>
            <tr>
                <td>姓名：<input type="text"></td>
            </tr>
            <tr>
                <td>
                    性别：
                    <input type="radio" name="sex">男
                    <input type="radio" name="sex">女
                    <input type="radio" name="sex">保密
                </td>
            </tr> 
            <tr>
                <td>
                    年薪：
                    <input type="password">
                </td>
            </tr> 
            <tr>
                <td>给自己打个标签</td>
                <td><input type="checkbox">社会精英</td>
                <td><input type="checkbox">一般青年</td>
                <td><input type="checkbox">年薪百万</td>
            </tr> 
             <tr>
                 <td><input type="submit"value="注册"></td>
                 <td><input type="reset"value="重置"></td>
             </tr>               
        </table>
    </form>
</body>
</html>

4、textarea控件文本域

当需要输入大量信息的时候，就可以使用textarea标签。实现多行文本的输入框。

语法：

<textarea cols="每行中的字符数" rows="显示的行数"
  文本内容
</textarea>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="" method="GET">
        <!-- 表单控件-->
        <table>
            <tr>
                <td>姓名：<input type="text"></td>
            </tr>
            <tr>
                <td>
                    性别：
                    <input type="radio" name="sex">男
                    <input type="radio" name="sex">女
                    <input type="radio" name="sex">保密
                </td>
            </tr> 
            <tr>
                <td>
                    年薪：
                    <input type="password">
                </td>
            </tr> 
            <tr>
                <td>给自己打个标签
                    <input type="checkbox">社会精英
                    <input type="checkbox">一般青年
                    <input type="checkbox">年薪百万
                </td>
            </tr> 
             <tr>
                 <td><input type="submit"value="注册"></td>
                 <td><input type="reset"value="重置"></td>
             </tr> 

             <tr>
                 <td>
                     <textarea cols="30" rows="10">
                         文本内容
                     </textarea>
                 </td>
             </tr>              
        </table>
    </form>
</body>
</html>

5、select控件下拉菜单

select控件，可以给用户提供一些常见选项。

语法：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
    .....
</select>

注意：

select标签中，必须包含一个option标签

在option标签中，可以定义selected="selected"，设置当前值为默认选项。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="" method="GET">
        <!-- 表单控件-->
        <table>
            <tr>
                <td>姓名：<input type="text"></td>
            </tr>
            <tr>
                <td>
                    <!--下拉菜单实现-->
                    学历：
                    <select name="education">
                        <!-- <option value="">==请选择==</option>-->
                        <option value="1">初中</option>
                        <option value="2">高中</option>
                        <option value="3" selected="selected">专科</option>
                        <option value="4">本科</option>
                        <option value="5">研究生</option>
                        <option value="6">博士生</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    性别：
                    <input type="radio" name="sex">男
                    <input type="radio" name="sex">女
                    <input type="radio" name="sex">保密
                </td>
            </tr> 
            <tr>
                <td>
                    年薪：
                    <input type="password">
                </td>
            </tr> 
            <tr>
                <td>给自己打个标签
                    <input type="checkbox">社会精英
                    <input type="checkbox">一般青年
                    <input type="checkbox">年薪百万
                </td>
            </tr> 
             <tr>
                 <td><input type="submit"value="注册"></td>
                 <td><input type="reset"value="重置"></td>
             </tr> 

             <tr>
                 <td>
                     <textarea cols="30" rows="10">
                         文本内容
                     </textarea>
                 </td>
             </tr>              
        </table>
    </form>
</body>
</html>

label标签

label标签为input元素的定义标注(标签)

可以用来绑定一个表单元素，当点击label标签时，被绑定的表单元素就会获得输入焦点。

语法：

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

例子：

<tr>
                <td>
                    <!-- <label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">-->
                    性别：
                    <input type="radio" name="sex" id="male"><label for="male">男</label>
                    <input type="radio" name="sex"id="male1"><label for="male1">女</label>
                    <input type="radio" name="sex"id="male2"><label for="male2">保密</label>
                </td>
</tr>

二、web 开发之CSS

2.1什么是CSS？

CSS通常成为css样式表或层叠样式表(级联样式表)

主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)、盒子的外形(宽度，边框样式，边距等)，以及版面的布局等外观显示样式。

2.2 CSS的定义位置和方式

行内样式(内联样式)

行内样式，是通过标签的style属性来设置元素的样式。

语法：

<标签名 style="属性1":"属性值1";"属性2":"属性值2";"属性3":"属性值3";>内容</标签名>

style是标签的属性，任何html标签都拥有style属性，用来设置行内样式。

内嵌样式

内嵌样式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

<head>
    <style type="text/CSS">
        选择器{属性1:属性值1;属性2:属性值2;}
    </style>
</head>

注意：

style标签一般位于head头标签中，收集可以放到html文档中的任何地方。

type="tele/CSS"属性，可以忽略，当然加上也更加规范。

外部样式表(引入文件)

外部样式表是将所有的所有的样式，存放到一个或者多个以.css结尾的文件中，通过link标签将外部样式表文件链接到html文档中。

语法：

<head>
    <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

href 定义链接引入的样式表文件的url，相对路径和绝对路径都可以。

type 定义链接文档的E类型，"text/CSS"表示链接的外部文件是CSS样式表

rel 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件

优先级：

行内>外部=内嵌

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">   
    <title>Document</title>
    <style>
        #myh1 {
            color:blue;
        }
        #my2h1{
            color:chocolate;
        }
    </style>
    <link href="./my.css" type="text/css" rel="stylesheet" >
</head>
<body>
    <h1>我是一个没有颜色的h1</h1>
    <!--行内样式-->
    <h1 style="color:red;" id="my2h1">我是一个红色的h1</h1>
    <!--内嵌样式-->
    <h1 id="myh1">我是蓝色的h1</h1>
    <!--外联样式-->
    <h1 id="my1h1">我是绿色的h1</h1>
</body>
</html>

注意：要在同一级目录创建ny.css文件

#my1h1{
    color:green;
}

#myh1{
    color:yellow;
}

2.3 CSS的选择器

在html中，想要通过CSS样式作用于标签，首先需要找到此个(类)标签，在css中，可以通过选择器(选择符)来找到

标签选择器

标签选择器是指通过HTML标签的名称作为选择器，为页面中以这类标签名定义的标签设置统一的css样式。

语法：

标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

id选择器

id选择器可以为标有id的HTML元素指定特定的样式。

语法：

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

注意：

id名称即为HTML标签中id属性的值

元素的id值时唯一的，只能在文档中作用于某一个具体的元素。

类选择器

class 选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多喝元素中使用。

语法：

类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

注意：

id选择器和类选择器的区别：

class选择器可以多次重复使用
id选择器唯一标识只能使用一次，不得重复
也就是说，在使用次数上，在同一个HTML文档中，不允许出现多个标签中id属性值一样的情况。

选择器优先级：

id>class>标签

多类名选择器

可以给标签指定多个类名，从而达到更多的选择的目的。

<div class="font14 colorred">
    安琪拉
</div>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .font19 {
        font-size: 19px;
    }
    .mvp {
        color:red;
    }
    .mvp1 {
        color:blue;
    }
    </style>
</head>
<body>
    <div class="mvp font19">安琪拉(字体:红色,字体：大一些)</div>
    <div class="mvp1 font19">荆轲</div>
</body>
</html>

2.4 CSS的基本样式属性

CSS fonts(字体)

font-zise 字体大小，单位一般常用px像素。

css Text(文本)

color 文本颜色

设置方式，以下三种：

十六进制如：#FF0000
RGB值如：RGB(255.0.0)
颜色的名称如：red

text-align 水平对齐方式

设置方式，以下三种：

left 左对齐(默认)
right 右对齐
center 居中对齐

text-decoration 文本修饰

值	描述
none	默认，定义标准的文本
underline	定义文本的一条线，下划线，也是我们链接自带的
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线

显示隐藏

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

语法：

h1{display:none;}

盒子大小

width 设置盒子的宽度，单位：px 百分比

height 设置盒子的宽度，单位：px 百分比

语法：

div{

width:400px;

height:200px;

}

boder(盒子边框)

语法：

border : border-width || border-style || border-color

border-style常设置边框的风格

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

backgroud(背景)

背景颜色

　　body {}

背景图像

　　body {background-image:url('bg.jpg');}

posted on 2020-02-10 22:05 九酒馆阅读(176) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

九酒馆

Django_HTML

一、web开发之HTML

1.1 HTML相关基础

快速生成html的模版方法：

双标签：

单标签：

字符集：

1.2 常用HTML基础标签

标题标签：

段落标签

水平标签

换行标签

div span标签

标签属性

图片img

链接标签

特殊字符标签

注释标签

列表标签

表格 table

1、创建表格

2、表格属性

表单

1、表单介绍

2、表单控件组成

3、input控件 重点！！！

4、textarea控件 文本域

5、select控件 下拉菜单

label标签

二、web 开发之CSS

2.1什么是CSS？

2.2 CSS的定义位置和方式

行内样式(内联样式)

内嵌样式

外部样式表(引入文件)

2.3 CSS的选择器

标签选择器

id选择器

类选择器

多类名选择器

2.4 CSS的基本样式属性

CSS fonts(字体)

css Text(文本)

color 文本颜色

text-align 水平对齐方式

text-decoration 文本修饰

显示隐藏

盒子大小

boder(盒子边框)

backgroud(背景)

导航

公告

3、input控件重点！！！

4、textarea控件文本域

5、select控件下拉菜单