标题标签
<h1></h1>....<h6></h6>
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3>
我们可以添加 align属性 来改变标签的位置 (左对齐，居中，右对齐)，还可以设置颜色等。
<h1> <font color = "blue">一级标题</font><!-- 设置颜色 --> </h1> <h2 align="center">二级标题</h2> <h3 align="right">三级标题</h3>
这种修饰方式在后期开发中不建议使用，也逐渐被淘汰，我们通常使用CSS中的一些属性来对html文本的内容进行修饰，这在之后我会写一篇关于CSS的博客，给大家做详细介绍！
加粗文字
<b></b>
<b>标签的作用是加粗文字 </b>
标尺线
<hr/> 单独使用
<hr/>
换行
<br/> 单独使用
<br/>
段落标签
<p></p> 段落与段落之间有间隔
段落标签 <p align="center"> 好好学习 </p> <p> 天天向上 </p>
超链接
<a></a> ( 超链接中需要添加两个属性 )
href = " 网页的地址 " (表示超文本引用)
target = " 窗口打开方式 "
例如： target = " _blank " 在新窗口打开 target = " _self " 在当前窗口打开 (默认）
<a href="http://www.baidu.com" target="_blank">百度</a>
插入图片
<img />
将所需要插入的图片放入img文件夹中，再导入资源文件即可(src)
<!-- src 资源文件 --> <img src="img/1.png" border="5">
同样我们也可以为图片设置一些属性，例如边框 (border)等...
特殊符号转义
✎. 在html文档中有些字符是不能直接使用的，浏览器会将它们解析为html标签，例如 '' < '' 、'' > '' 就会被识别为标签，所以就需要用其他特殊符号来代替，这些代替的符号称为转义符。
📖常用转义符：
<body> <!-- 在网页中有些符号不能直接显示的 需要通过其他的符号进行代替，这些代替的符号称为转义符--> <b>标签的作用是加粗文字 <br /> 空 格 </body>
有序/无序列表
✎. 列表分为有序列表和无序列表，一个列表由外层列表区域 和列表项 两部分组成
• <ul></ul> 无序列表
• <ol></ol> 有序列表
• <li><li> 列表项
<body> <!-- 无序列表 --> <ul type="square"> <!-- 外层列表区域 --> <li>列表项1</li> <!-- 列表项 --> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ul> <!-- 有序列表 --> <ol type="1"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ol> </body>
我们可以在外层列表区域中添加 type属性，改变列表项前的图标；例如在有序列表中，如果type设置 "1" (1.2.3.4....) "A"（A.B.C.D...） "I" (I .II. III. IV.V....)
绘制表格
✎. 表格由4种基本标签构成 :
<table> 表格标签
• <tr> 表格中的行
• <th> 表格的表头
• <td> 表格的单元格
快速建表：table>tr*4>td*4 按Tab键 （生成一个4行4列的表）
th 表头单元格中的内容居中加粗，td 普通单元格就没有此效果 (区别)
• 表格中的内容只能放在单元格中.
• 绘制表格时需要添加border边框属性，否则表格不会显示出来.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- table 表格标签 --> <table border="1" width=400 cellspacing="0"> <!-- cellspacing 设置单元格与单元格之间的距离(外边距)--> <!-- tr表格中的行 --> <tr> <!-- th 表头单元格 居中加粗--> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> <tr> <td >张三</td> <td>84</td> <td>87</td> <td>94</td> </tr> <tr> <td>李四</td> <td>79</td> <td>88</td> <td>92</td> </tr> <tr> <td>小王</td> <td>79</td> <td>88</td> <td>92</td> </tr> </table> </body> </html>
绘制表格的一些常用属性:
- border 边框
- height 高度
- width 宽度
- align 内容水平方向的位置 (left,center,right)
- valign 内容垂直方向的位置 (top,middle,bottom)
- cellspacing 设置单元格与单元格之间的距离 (外边距)
- cellpadding 设置单元格内容到边框的距离 (内边距)
- bgcolor 背景颜色
- colspan 跨多列合并 (从哪个合并就在哪个单元格添加并删除多余的单元格)
- rowspan 跨多行合并 (合并完成后需要删除其他行多余的单元格)
设计表单
<form><form/> 表单区域
<input/>单行输入框
我们可以设置 type属性的值来改变输入框的类型：
type= "text" 文本输入框
type="password" 密码框
type="radio" 单选框 (多个选项的name必须相同才能互斥)
type="checkbox" 多选框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form ><!-- form标签 表示一个表单区域 --> 账号:<input type="text" placeholder="请输入账号" /> <br /> 密码:<input type="password" /> <br /> <!-- 多个选项的name必须相同才能互斥 --> 性别:<input type="radio" name="gender" />男 <input type="radio" name="gender" />女 <br /> 课程:<input type="checkbox" name="course" />政治 <input type="checkbox" name="course" />语文 <input type="checkbox" name="course" />数学 <input type="checkbox" name="course" />英语 <br /> </form> </body> </html>
<select/></select>下拉选择框
下拉框中的内容写在<option></option>标签中
籍贯<select> <!-- 选择性组件必须要给默认的value --> <option value="101">陕西</option> <option value="102">四川</option> <option value="103">浙江</option> <option value="104">湖南</option> </select>
<textarea></textarea> 文本域
我们可以通过 cols和 rows属性为我们的文本域设置列数和行数
<textarea cols="40" rows="10"></textarea>
按钮
我们的按钮也是写在<input/>标签中
📖常用按钮类型有三种：
type = " submit " 提交按钮，触发表单的提交动作
type = " reset " 重置按钮
type = " button " 普通按钮，用来绑定事件 (在JavaScript中会详细介绍)
<input type="submit" value="提交"/> <input type="reset" value="重置"/> <input type="button" value="触发"/>
