Html书写规范，基本标签使⽤
⼀、html简介
1、html是什么
Html是⽤来描述⽹页的⼀种语⾔。
(1)HTML 指的是超⽂本标记语⾔ (Hyper Text Markup Language)
(2)HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔(markup language，标记语⾔是⼀套标记标签(markup tag));
(3)HTML 使⽤标记标签来描述⽹页
超⽂本 标记 语⾔
语⾔：
⼈与计算机交互的⼯具
超⽂本：
(1)普通⽂本不能实现的，超⽂本可以实现，能实现普通⽂本不能实现的功能
(2)包括超链接的⽂本
标记：
就是标签，不同的标签能实现不同的功能
2、html能做什么
html通过标签的形式将信息展⽰给⽤户
3、html书写规范
(1)html结构
<html>
<head>
包括资讯信息：整个页⾯的属性、指导浏览器解析的标签、引⼊外部⽂件的标签
</head>
<body>
我们需要展⽰的信息
</body>
</html>
(2)html标签是以尖括号包裹关键字成对出现的，有开始标签和结束标签，⽀持正确的嵌套
(3)⼤部分标签有属性 格式：属性=“属性值”（多个属性之间⽤空格隔开）
(4)空标签：功能⽐较单⼀ ，例如：<br></br> === <br/>
(5)html不区分⼤⼩写，建议使⽤⼩写
需求：写⼀段⽂字，将其中的部分⽂字变成红⾊，字号变⼤
<html>
<head></head>
<body>
我请⼤家吃狗不理<font color="red" size="5">包⼦</font>，
<br/>
⼤家很⾼兴
</body>
</html>
⼆、html基本标签
1、⽂件标签(结构标签)
<html><html>：根标签
<head>
<title></title>：页⾯的标题
</head>
<body></body>：内容
属性：
text:⽂本的颜⾊
bgcolor：背景⾊
background：背景图⽚
颜⾊的三种表⽰⽅式：
(1)单词：red green black
(2)rgb三原⾊：reg(0,0,0)  0-255
(3)#000000  #ffffff  #325687  #377405
2、排版标签
(1)注释标签：<!--注释-->
(2)换⾏标签：<br/>
(3)段落标签：<p>⽂本⽂字</p>
特点：段与段之间有空⾏
属性：
align：对齐⽅式（有三个属性值：left  center  right）
(4)⽔平线标签：<hr/>
属性：
width：长度
size：粗度
color：颜⾊
align：对齐⽅式
尺⼨的写法：
（1）像素：10px
（2）百分⽐：占据副标签的百分⽐，会随着副标签的⼤⼩进⾏变化
3、块标签
<div></div>:⾏级块标签
<span></span>:⾏内块标签
作⽤：
（1）<div></div>：div+css布局
（2）<span></span>：进⾏友好提⽰
4、⽂字标签
基本⽂字标签：<font></font>
属性：
color：颜⾊
size:⼤⼩（最⼤值:7，最⼩值:1，默认值:3）
face：字体类型，即字体，直接写⽂字就可以
标题标签：<h1></h1>-<h6></h6>
随着数字的增⼤逐渐变⼩，字体是加粗的，内置字号 默认占据⼀⾏
5、清单标签（也称为列表标签）
⽆序列表：<ul></ul>
<li></li>：列表项
属性：
type：有三个值，分别为disc、 square和circle
⽰例：
<ul >
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
有序列表：<ol></ol>
<li></li>：列表项
属性：
type：1、A、a、I、i（数字、字母、罗马数字）
start：数字，代表⾸项开始位置
⽰例：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
列表标签的作⽤：实现菜单项（可以实现横向或者纵向菜单）
⽆序列表标签怎么去掉⼩圆点？HTML中不能直接去掉，没有这个属性值，需要在CSS中给li标签添加样式list-style:none;
6、图形标签：<img />（⾃关闭标签）
属性：
src：图形地址
width：宽度
height:⾼度
border：边框
align：对齐⽅式，代表图⽚与相邻的⽂本的相对位置（有三个属性值：top middle bottom）
alt：图⽚的⽂字说明
7、链接标签：<a></a>
属性：
href：跳转页⾯地址
name：名称，锚点
target:_self(⾃⼰) _blank(新页⾯，之前的页⾯还有)， 默认是_self
作⽤：
（1）页⾯跳转，注意：要调到外⽹必须要加协议
（2）访问锚点；回到锚点（顶部、底部、中间），在访问锚点时的书写格式：#name的值；
8、表格标签
<table></table>:
属性：
border：表格边框
width：表格的宽度
align：表格的对齐⽅式（<tr align="center">单元格⾥⾯的内容居中对齐<tr>）
bgcolor：背景颜⾊
<tr></tr>: 代表⾏
<td></td>：代表单元格
属性：
colspan：列合并
rowspan:⾏合并
<th></th>：相等于<td>, 只是内置样式加粗居中
<caption></caption>：表格的标题，即表头
表格的作⽤：
(1)简单的实现⼀个表格样式
(2)进⾏页⾯布局
⽰例：
<table>
<tr><!--⾏-->
<th>表格标头</th>
<td>普通单元格</td>
</tr>
</table>
<thead></thead>、<tbody></tbody>、<tfoot></tfoot>
作⽤：分块加载，⽤户体验⽐较好
三、html表单标签(重点)
1、form标签：<form></form>
属性：
name：表单名称
action：提交的路径地址
method：提交⽅式（get和post）
get和post的区别（重点）：
(1)get提交将数据加在地址栏的后⾯，格式?name=value&name=value；post提交将数据封装在请求体中 username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj#
(2)get提交相对不安全；post提交相对安全
(3)get提交有⼤⼩限制，根据浏览器不同⽽不同；post不限制⼤⼩
⽰例：
<form>
<table>
<!--form⾥⾯嵌套table-->
</table>
</form>
2、input标签：<input type=" "/>  22411
type属性：根据type属性实现各种不同功能的表单项；
text：普通的⽂本输⼊框；
name：username value="张三"<!--张三是默认值-->
password：密码输⼊框；特点是显⽰的是掩码
radio：单选按钮
name：如果想让⼀组单选按钮互斥，就⽤指定同意name属性值，需要加value属性值；
checked：默认被选中；
checkbox：复选框；
name：组的概念，需要加value属性值。
checked：默认被选中；
button：普通按钮，没有任何内置的功能；
submit：内置功能，点击会按照action地址提交
reset：重置，点击会清空之前填写的内容
image：图⽚按钮，功能类似与submit
src：加载图⽚
alt：图⽚的提⽰⽂字
file：上传⽂件的控件
hidden：隐藏表单，作⽤是在提交数据的时候，服务器需要这个数据，但是不需要⽤户看到。
注意：name属性必须要写。
3、select标签(<select></select>)：下拉菜单
属性：
name；表单项的名称
option标签：可选项（下拉菜单之间的级联）
属性：
value，表单项的值
selected：默认被选中
4、textarea:⽂本域标签
属性：
cols：列数
rows：⾏数
注意：默认的⽂本值在标签体当中
四、html框架标签及其他
1、框架标签
frameset:
属性：
rows；按⾏划分
cols：按列划分
划分格式： rows="120,*"
frame:
属性：
href标签怎么用
name：名称，⽅便target根据name值进⾏定位
src：加载的页⾯地址；
2、其他标签
<meta>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link>
<link rel="stylesheet" type="text/css" href="./styles.css">
href：引⼊css⽂件的地址
<script>
<script type="text/javascript" src=""></script>
src：js的⽂件地址
3、特殊字符
  空格
>  ⼤于号
<  ⼩于号
© 版权符号
®  注册符号

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。