HTML 标签语言
html 是一种标签语言，标签语言就是通过一个个标签组成的语言。
html 超文本标记语言 ， 超文本就是 页面内包含图片链接，甚至音乐 、程序等等非文字元素。
一、标签
分两种：
1、一种是普通标签： 通过 <h>这里写内容</h> 一对尖角号来表示这里 h 是标签名。
每一种标签都有特殊的功能。<h> 是开头标签 </h>是结尾。
2、还有一种是自闭和标签如 <img 这里写内容 />
标签的内容部分我们叫，标签体
还有就是标签 可以嵌套但不能交叉嵌套 <h><a></a></h> 不能<h><a></h></a>
标签的属性
通常属性是以 一组键值对的形式 如 id = "abc123" name="sss"
标签属性 只能在开头标签或自闭和标签中 属性名必须小写
二、HTML 结构
写HTML 首先要写上 <!DOCTYPE html> ：
<!DOCTYPE html> 是给浏览器发的，告诉浏览器以标准模式渲染，这个类似编码之类的，记得写上就行
然后 <html></html> 里包含两部分：<head>头标签</head> 、 <body>内容</body>body（是身体的意思）
<head> 标签：
<head> 标签里面都是一些规范、属性设置，给浏览器用来渲染的。反正都不是给用户看的东西。
一、 meta标签（英文大概是"后设"的意思）
meta 定义关于HTML的元数据 比如搜索引擎和更新频度的关键词和描述
有三个重要的属性 name 、 http-equiw、 content
name属性 ：name="" content=""
keywords(搜索关键字，用于搜索引擎抓取信息。) <meta name="keywords" content="国学文化" >
description( 搜索到网站，下面显示的描述词) <meta name="description" content="什么什么网，注重什么什么，什么什么行业前多少 等等等">
author( 网站制作者信息)
generator（生成工具信息）
这里 content 是必不可少的属性 用来写信息的
http-equiw 属性：
Refresh (网页跳转） <meta http-equiw="Refresh" content="2;URL=https:xxxx">
这里是coutent属性 2 是2秒 后面的URL是要跳转的网页，没有的话就是原地刷新
Content-Type(浏览器接收到的文档类型) <meta http-equiw="Refrsh" charset="utf-8" 这个和<meta charset="utf-8"> 一样
X-UA-Compatible (针对IE 浏览器的兼容) <meta http-equiw="X-UA-Compatible" content="自己去查....我也不清楚，这个不重要" >
expires(设定网页到期时间,到期重新上传) <meta http-equiw="expires" content=" "
1、非meta标签
<title>(网页上面的“大横幅”) <title>当我即将开口是就感到空虚</title>
<link> 是用于引用外部文件的标签
有三个重要的属性 rel 、 href 、type 。
其中rel 是定义 引用的文件是干什么用的
href 是资源路径
type 是打开方式
rel="shortcut icon"或rel="icon" 在收藏和标题栏上用于显示的图标。
示例：<link rel="icon" href=''www.xxxx.xxx">
IE 浏览器只支持 ico 格式。
rel="stylesheet" 引用外部样式表。
rel="nofollow" 用于指示搜索引擎不要追踪（爬虫抓取），减少垃圾链接。
<link> 是引入CSS内容的标签
<script> 是引入JS内容的标签
在<head>里 还有<style> </style>标签比较重要 是写CSS的
2、body标签 ；所有标签分为 内联标签；块级标签
内联标签：<a> <input> <img> <sub> <sup> <textarea> <span>
块级标签：<p> <h1> <table> <ol> <ul> <form> <div>
注意嵌套规则：
- 块级元素可以包含内联元素或某些块级标签，但内联标签不能包含块级标签，他只能包含其他的内联标
- 块级标签不能放在P标签里面
- 有几个特殊的块级元素只能包含内联元素，不能包含块级元素，h1-h6 ,p,dt
- li内可以包含div
- 块级元素与块级元素并列，内联元素与内联元素并列。
块级标签：
总是在新行开始
高度、 宽度（默认是容器宽度）以及 外边距 和 内边距 都可以控制
它可以容纳其他的块级元素和内联元素
内联标签 (inline) 元素特点：
内容有有多少就占多少位置，不换行。可以和其他内联标签在一行
只能容纳其他内联标签，不能容纳块级标签
没有 高、宽、外边距、内边距 这些概念
但可以通过 line-height 来设定行高
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
基本标签：
<h1>~<h6> </h1>~<h6> 标签标签 大小不一样
<p></p> 段落标签，包裹的内容被换行，并且上下内容之间有一行空白
<b> 、<strong>: 这里个标签都是加粗标
<strike> 为文字加上一条中线。快被废除了
<del><del> 和<strike> 效果一样。
<u> 给文字加下划线
<em> <i>: 显示斜体文字
<sub> 下角标
<sup> 上角标
<br> 换行
<hr> 水平线
<div> 块级标签 。块级标签常用于布局，行级标签常用于显示内容
特殊符号
> >
< <
空格
" 引号
© 版权符号
还有很多自己 可以去查
<img> 图形标签
行级标签，用来显示图片。
浏览器加载图片是单独开一个线程。
重要的属性有：src、title、alt、width、height、align.
src 图片地址
title 鼠标悬浮在图片上，显示的字
alt 图片资源加载失败时显示的字。外网资源不会显示
width 图片的宽
height 图片的高 （宽高两个属性只用一个会自动等比缩放）
align 图片周围文字的垂直对齐情况。
常用的属性值有：top（与图片的顶部对齐）、middle（与图片的中部对齐）、bottom（默认，与图片的底部对齐）
<img src="" width="20px" height="" ....>
<a> 超链接标签(锚标签)
重要属性有三个：href、target、ID
href 是链接地址
target 文档打开时要显示的目标位置，属性值一般有：_blank（新窗口中打开）、_self（默认，在超链接所在的容器中打开）、_parent（在超链接的父容器中打开）、_top（整个容器中打开）、name（框架名称）。
id 锚记名称。作用：跳转到文档的某个地方。
<a href="http://www.baidu.com" target="">百度</a > #跳转网页 <div id="div1">第一章</div> <div id="div2">第二章</div> <a href="#div2" target="">第二章</a> #跳转锚
列表标签
列表分 无序标签 ul（unorder list） 、 有序标签 ol 、 自定义表签 dl。
<ui> 无序列表
<li> 无序列表里的每一项 ，表现形式是每一项前面是小圆点
<ol> 有序列表
<li> 列表里的每一项 ， 表现形式是前面是 1 2 3 序号
<dl> 自定义列表
<dt> 列表标题 横向 添加
<dd> 列表项 纵向 添加
自定义表格 <table> :
<thead> 表头 <tbody> 标体
<table> 属性
- border 表格的边框 数字参数
- align 水平对齐方式
- bgcolor 背景颜色
- cellpadding 内边框
- cellspacing 外边框
- width 表格宽度，可用 百分比 或者像素
<caption> 表格标题
<tr> （table row）表格的数据行
<th> 表格的表头名称，与<td> 不同在于文字采用加粗居中的形式显示
<td> 单元格， 用来显示表格内容
<thead> 表格头部，是结构更加分明
<tbody> 表格主题
rowspan 单元格竖夸多少行 作用在<th> 或<td>
colspan 单元格横跨多少列 （合并单元格），作用在 th 或 td上
<table> <caption> 表格标题<caption> <thead> <tr> <th>xxx</th> <th>xxx</th> </tr> </thead> <tbody> <tr> <th>cxz</th> <td>zxc</td> </tr> </tbody> </table>
form 表单
- 表单给服务端发送数据
- 表单能够包含 input 元素 ，比如文字段 ，复选框，单选框， 提交按钮等等
- 表单还可以包含 textarea、select、fieldset 和 label 元素
表单属性：
- action 表单发送到的地址
- method 方法 GET 或 POST
- enctype 对表单数据进行编码，默认都是要编码的。格式为：application/x-www-form-urlencoded（表单默认的编码格式，表单发送前对所有字符进行编码。编码规则：空格转换为“+”号，特殊符号转换为ASC HEX值）。提交普通的文本内容到服务器就可以采用这种默认的编码方式。当你需要提交的是一个文件时，编码就需要采用另一种格式：multipart/form-data（不对字符编码，文件上传时使用）。text/plain（是一种纯文本编码，空格转换为“+”号，但是不对特殊字符进行编码）
input type属性：
text 获取输入的文本
autocomplete(自动完成输入的内容，要求表单元素有name属性才能有自动完成的效果，off表示自动完成不可用，on表示自动完成可用)
password 密码框 （以下属性text 和 password 共有）
size(指定表单元素的初始宽度。当type为 text 或 password 时 ，表单元素的大小以字符为单位，对于其他元素，宽度以像素为单位)
maxlength(type 为 text 或 password 时，表示输入的最大字符数)，有利于防止SQL的注入攻击
readonly 只读
placeholder 框内预置内容（灰色） ,写上内容时，才会消失。
radio 单选按钮，属性：
name （将name的值设置相同，绑定为一组数据，实现单选功能）
value(必须要写，提交给服务器的KEY值，实际开发过程中value 一般是编号)
checked （是否被选中的状态）
checkbox 复选框。
name(名字一定要一样，绑定为一组数据，添加同一 Value 值列表提到服务器)
value(必须要写)
checked（是否被选中的状态）
file 文件域，上传文件。
submit 提交按钮。用于提交表单 value只是 按钮上的字
reset 重置按钮。清空表单上的输入，恢复到表单的默认输入
button 也是提交按钮 ，与JS 配合使用
image 图片按钮，，用来提交表单，与submit 是一样的效果
src（图片路径）
hidden 隐藏字段 value 隐藏的内容
color 颜色标签 value 指定颜色值（采用十六进制数表示）
date 日期。value 值 指定默认的日期 ，格式为 xxxx-xx-xx 年月日
datetime-local 像是本地时间，value 值指定默认的时间
number 数字向上或者向下滑动。可以填数字然后向上向下选择不同的值
range 滑动标签 min（指定最小值） 、max（指定最大值）、value（指定当前默认值）
week 每年的周数。value 指定那一年第几周 格式为 2018-w30 （2018年第25周）
<textarea> 文本域标签，，默认表现形式是可以输入很多行文本的文本框
name （表单提交项的key）
cols（设置文本域宽度）
rows（设置文本域高度，即行数）
<select> 下拉框标签。使用时要结合<option>子标签一起使用。
name:表单提交项的key
size：选项个数
multiple：多选
<option> 下拉选中的每一项
- value（表单提交项的值）
- selected（selected下拉选默认被选中）
<optgroup label=“天津”>为每一项加上分组
<label> 把元素与文本结合起来
友好设计：不只是选中复选框才能打钩选中，要求点击对应的文字也能选中该复选框。
这种情况下要用到<label>标签的 for 属性（设置或获取给定标签对象指定的对象，值=另一个元素的ID好即可）
<label for="#name">姓名</label> <input id="name" type="text">
<fieldset>对表单中的元素进行分组
<fieldset> <legend>温情提示</legend> <div align="middle">不要忘记点赞哦</div> <fieldset>
value：表单提交项的值
对于不同的输入类型，value 属性的用法也不同：
- type="button","reset","submit" --定义按钮上的显示文字
- type="text","password","hidden" --定义输出字段的初始值
- type="checkbox","radio","image" --定义与输出相关联的值
框架
<frameset>框架
用来划分窗体，不能发在<body>中，否则没有效果
cols （纵向分隔页面。其数值表示方法有三种：“30%、30（或30px）、* ”）；数值的个数代表分成的视窗数目且数值之间用“，”隔开。“30%”表示该框架区占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“*”表示该区域占余下页面空间。列如：cols="25%.200.*"表示将页面分成三部分，左面占页面30%，中间横向宽度为200像素，页面余下部分作为右面面部分。）
row（横向分隔页面，属性和cols以样）
frameborder(设置是否显示框架边框。设定值只有0、1 ； 0 表示不要边框，1表示不要显示边框)
border（框架之间的距离，一般设置为0）
bordercolor（边框颜色）
framespacing（设置框架与框架的保留的空白距离）
<frameborder cols="40%,*,*">第一个框架占整个浏览器窗口的40%，剩下的1空间评价分配个另两个框架 <frameset cols="*,*,*">浏览器窗口等分为四部分
<iframe>框架
元素会创建包含另一个文档的内联框架（即行内框架）
name 设置框架名称。刺猬必须设置的属性
src 设置此框架要显示的网页名称或路径。此为必须设置的属性
scrolling 设置是否要显示滚动条设定值为 auto ，yes；no
bordercolor 设置框架的边框颜色
frameborder 设置是否显示框架边框 设定值只有0 不显示，1 显示
noresize 设置框架大小是否能手动调节
marginwidth 设置框架边界和其中内容之间的宽度
marginhight 设置框架边界和其中内容之间的高度
width 设置框架宽度
height 设置框架高度
扫一扫
2337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
