目录
一、HTML基本结构标签
1、<html></html>：HTML标签页面中最大的标签，也叫根标签。
2、<head></head>文档的头部，在head标签中必须设置title标签。
3、<title></title>文档的标题，也是网页的标题。
4、<body></body>文档的主体。
二、网页开发基础
1、<!DOCHTML html>：文档类型声明，必须放在文档顶部（此处声明html5文档）
2、lang语言种类：en——英语；zh-CN——中文（浏览器需要使用）
3、字符集：<meta charset="UTF-8" />必须写，用来识别语言（此处为万国符）
三、HTML常用标签
1、标题标签<h1>——<h6>
<html>
<head>
<title>Demo</title>
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>记忆口诀：标题一共六级选，文字加粗一行显，
由大到小依次减，从重到轻随之变。
2、段落标签<p></p>
①随浏览器大小段落内文本会自动换行
②段与段之间有明显的间隙
3、换行标签<br />
①是一个单标签
②行与行之间没有明显的间隙，只是换行
4、文本格式化标签（以下标签前者的语义更强，建议使用）
①加粗：<strong></string>或<b></b>
②倾斜：<em></em>或<i></i>
③删除线：<del></del>或<s></s>
④下划线：<ins></ins>或<u></u>
5、<div>和<span>标签
没有语义，类似于一个盒子，用来装内容
<html>
<head>
<title>Demo</title>
</head>
<body>
<!--大盒子-->
<div>我独占一行</div>
<!--小盒子-->
<span>一行可以有很多个我<span>
</body>
</html>6、图像标签<img src="" />（单标签）
①src：图片路径，必须要有，有绝对路径和相对路径两种
②alt：替换文本，当图片显示不出后会显示文本内容
③title：提示文本，鼠标放在图片上面会有文字提示
④width：设置图像宽度（像素）
⑤height：设置图像高度（像素）
（备注：只确定高或宽另一长度会等比例变化，两个都确定会长成你设定的大小）
⑥border：设置图像边框粗细
（备注：属性不分先后，属性与属性间要用空格隔开；属性采用键值对格式）
7、路径
①相对路径（常用）：图片相对于HTML页面的位置
同一级路径：在同一文件级时直接写图片名
下一级路径：图片所在文件名/图片名
上一级路径：.. /图片名
②绝对路径
不建议链接到本机，换台电脑会出错
网络地址使用较多
8、超链接标签
<html>
<head>
<title>Demo</title>
</head>
<body>
<!--超链接语法格式-->
<a href="跳转目标" target="目标窗口弹出方式">文本或图像等</a>
</body>
</html>①外部链接：直接写网址，网址必须要有http://
②内部链接：同图片路径写法
③空链接：<a href="#">空</a>
④下载链接：<a href="路径"></a>,点击之后下载链接内东东
⑤锚点链接：点击链接可以快速定位到页面中的某个位置
<html>
<head>
<title>Demo</title>
</head>
<body>
<!--在链接文本href属性中设置属性为“#名字”的形式-->
<a href="#two">第二集</a>
<!--找到目标标签位置，添加一个id属性=刚才定义的名字-->
<h3 id="two">第二集简介</h3>
<!--当在页面中点击 第二集 的文字时会直接跳转到 第二集简介 处-->
</body>
</html>9、目标窗口弹出方式
①_self：当前窗口打开页面
②_blank：新窗口打开页面
③_parent：类似于_self
④_top：清除所有被包含的框架并将文档载入整个浏览器窗口
10、注释标签和特殊字符
①注释标签：<!--注释语-->
（备注：快捷键：ctrl + /）
②特殊字符（常用）：  空格；< 小于号；> 大于号
四、表格标签
1、表格的基本语法
<html>
<head>
<title>Demo</title>
</head>
<body>
<table> //用于定义表格标签
<tr> //定义表格中的行
<td>单元格内的文字</td>
...
</tr>
...
</table>
</body>
</html>2、表头单元格标签：<th></th>
表头单元格标签会加粗居中显示标签内内容
3、表格属性
| 属性 | 描述 |
| align | 对齐形式 |
| border | 是否有用边框，默认为"",只有""和1这两种选择 |
| cellpadding | 单元格边与其内容之间的空白，默认为1像素 |
| cellspacing | 单元格之间的空白，默认为2像素 |
| width | 规定表格的宽度 |
| height | 规定表格的高度 |
4、表格结构标签
①<thead></thead>：表格的头部区域，内部必须要有tr标签
②<tbody></tbody>：表格的主体区域
5、合并单元格
①跨行合并：rowspan="要合并的单元格的个数"，写在最上面的目标单元格标签中
②跨列合并：colspan="要合并的单元格的个数"，写在最左边的目标单元格的标签中
③基本语法：
<html>
<head>
<title>Demo</title>
</head>
<body>
<table>
<tr>
<td colspan="2">目标单元格内内容</td>
...
</tr>
</table>
<!--合并完单元格后要手动删除多余的单元格-->
</body>
</html>五、列表标签
1、无序列表
无序列表的基本语法
<html>
<head>
<title>Demo</title>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
...
</ul>
<!--在ul标签中只能放li标签，li标签中可以放任何标签-->
</body>
</html>2、有序列表
有序列表基本语法
<html>
<head>
<title>Demo</title>
</head>
<body>
<ol>
<li>列表项1</li>
<li>列表项2</li>
...
</ol>
<!--在ol标签中只能放li标签，li标签中可以放任何标签-->
</body>
</html>（备注：在无序列表中列表项前是小黑点，排名不分先后；有序列表列表项前是数字，有先后排名）
3、自定义列表
自定义列表基本语法
<html>
<head>
<title>Demo</title>
</head>
<body>
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
</dl>
<!--dd是标签围绕dt标签内内容展开的解释列表-->
</body>
</html>六、表单标签
1、表单的构成：表单域、表单控件（表单元素）、提示信息
2、表单域：实现用户信息的收集和传递
表单域基本语法
<html>
<head>
<title>Demo</title>
</head>
<form action="url地址" method="提交方式(get/post)" name="表单域名称">
各种表单域元素控件
</form>
</html>3、表单控件
①<input>输入表单元素：用于收集用户信息，是一个单标签
②input标签基本语法
<html>
<head>
<title>Demo</title>
</head>
<body>
<form>
<input type="属性值" />
</form>
</body>
</html>③常用的type属性值
| 属性值 | 描述 |
| button | 定义可点击按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符将被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单中的数据发送到服务器 |
| text | 定义单行的输入字段，默认宽度为20个字符 |
④radio单选按钮/checkbox复选按钮
前者可以实现多选一，后者可以实现多选多，单选按钮和复选按钮必须有相同的名字才可以实现多选一/多选多的功能
⑤input标签中其它常用属性
| 属性 | 属性值 | 描述 |
| name | 用户自定义 | 定义input元素的名称 |
| value | 用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
⑥input常用属性拓展
name和value是每个表单元素都有的属性值，主要给后台人员使用
name表单元素的名字，要求同一组的单选按钮或复选按钮要有相同的name值
checked属性主要针对单选按钮和复选框，主要作用是一打开页面就可以默认选中某个表单元素
4、label标签
①作用：label标签用于绑定一个表单元素，当点击label标签内的内容时，浏览器就会自动将焦点（光标）转到（选择）对应的表单元素上，增加用户体验
②基本语法
<html>
<head>
<title>Demo</title>
</head>
<body>
<form>
<input type="radio" name="gender" id="nan" />
<label for="nan">男</label>
<!--当光标点击“男”时产生和点击单选框一样的选择效果-->
</form>
</body>
</html>5、select下拉表单元素
基本语法
<html>
<head>
<title>Demo</title>
</head>
<body>
<form>
<select>
<option>选项1</option>
<option>选项2</option>
<option selected="selected">选项~</option>
<!--页面一打开会默认选中此选项-->
...
</select>
</form>
</body>
</html>6、textarea文本域元素：多行文本的输入
基本语法
<html>
<head>
<title>Demo</title>
</head>
<body>
<form>
<textarea rows="显示的行数" cols="每行显示的字符数">
文本内容
</textarea>
</form>
</body>
</html>
1183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
