1.HTML标题
标题标签 -> <h1></h1>...<h6></h6>
注:
(1)从h1到h6,越来越小
(2)在一个网页中,每一个<h1></h1>标签只能出现一次
2.HTML段落
段落标签 -> <p></p>
3.HTML文本修饰标签
<strong></strong> 表示强调,对文本进行加粗
<em></em> 表示强调,使文本斜体
<sub></sub> 下标文本
<sup></sup> 上标文本
<del></del> 删除线
<ins></ins> 插入线
4.HTML图片标签
<img> 标签
属性:
(1)src 图片的路径
(2)alt 当图片加载错误时显示的一段友好文字
(3)title 提示信息
(4)width、height 图片的宽与高
注:
(1)相对路径:相对于某一个文件的路径
(2)绝对路径:真实的路径
(3)./ 表示当前目录下,../ 表示上一级目录下
5.HTML跳转链接
<a>标签
属性:
(1)href:所跳转的链接的地址
(2)target:改变链接打开的方式,默认情况下是在当前页面打开:_self, 若设置为" _blank" 则是在新的页面打开
(3)也可以在<head></head>标签中加入base标签,并设置target为"_blank",就等同于设置所有的<a>标签的target属性为_blank
注:跳转锚点
(1) # 号 + id
href = "#id1" <tag id="id1">content1</tag>
(2) # 号 + name
href = "#name1" <a name="name1"></a>
6.HTML特殊符号
概念:在编写一些文本时,经常会遇到无法输入的字符,这些无法输入的字符都是特殊字符。HTML为这些特殊字符准备了专门的代码。
例:
(1) & + lt; 左键括号
(2) & + gt; 右尖括号
(3) & + nbsp; 空格
(4) & + copy; 版权
(5) & + reg; 注册商标
(6) & + amp; 和号
(7) & + yen; 人民币
(8) & + deg; 摄氏度
7.HTML列表
(1) 无序列表
<ul>
<li>content</li>
......
<li>content</li>
</ul>
注:
(1) ul和li必须是组合出现的,且他们之间不能有其他标签
(2) type属性,改变前面标记的样式
<ul type="value">
<li>content</li>
......
<li>content</li>
</ul>
value可以取disc、circle、square
(2) 有序列表
<ol>
<li>content</li>
......
<li>content</li>
</ol>
注:
(1)有序列表用的非常少,一般用的是无序列表,无序列表可以替代有序列表
(2)type属性,改变前面标记的样式
<ol type="value">
<li>content</li>
......
<li>content</li>
</ol>
value可以取"A"、"a"、"I'、"i"
(3) 定义列表
<dl>:定义列表
<dt>:定义专业术语和名词
<dd>:对名词进行解释和描述
(4) 嵌套列表
列表之间可以相互嵌套形成多级列表
8.HTML表格
(1)表格标签
<table> 表格的最外层容器
<tr> 定义表格行
<th> 定义表格头
<td> 定义表格单元
<caption> 定义表格标题
注:
语义化标签
<tHead>、<tBody>、<tFoot>
在一个表格中<tBody>可以出现多次,<tHead>和<tFoot>只能出现一次
(2)表格属性
border 表格边框
cellpadding 单元格内的空间
cellspacing 单元格间的空间
rowspan 合并行
colspan 合并列
align 左右对齐方式 (left、center、right)
valign 上下对齐方式 (top、middle、bottom)
注:
cellpadding、cellspacing、border -> <table></table>
rowspan、colspan -> <td></td>
align、valign -> <tr></tr>
9.HTML表单
(1) 表单标签
<form> 表单的最外层标签
action="" 提交的路径
<input> 搜集信息的input框
1 <h2>输入框</h2> 2 <input type="text" placeholder="请输入用户名"> 3 <h2>密码框</h2> 4 <input type="password" placeholder="请输入密码"> 5 <h2>复选框</h2> 6 <input type="checkbox" checked>苹果 7 <input type="checkbox" disabled>香蕉 8 <input type="checkbox">梨 9 <h2>单选框</h2> 10 <input type="radio" name="gender">男 11 <input type="radio" name="gender">女 12 <h2>上传文件</h2> 13 <input type="file"> 14 <h2>提交和重置按钮</h2> 15 <input type="submit"> 16 <input type="reset">
注:
(1)对于checkbox,checked表明默认勾选,disabled则表明禁选
(2)对于radio, 一定要给元素加上name属性,并设置name属性的值相同
<textarea> 多行文本
1 <textarea name="" id="" cols="30" rows="10"></textarea>
<select> <option>下拉菜单
1 <h2>下拉菜单</h2> 2 <select> 3 <option selected disabled>请选择</option> 4 <option>北京</option> 5 <option>上海</option> 6 <option>杭州</option> 7 </select> 8 9 <select size="3"> 10 <option>请选择</option> 11 <option>北京</option> 12 <option>上海</option> 13 <option>杭州</option> 14 </select> 15 16 <select multiple> 17 <option>北京</option> 18 <option>上海</option> 19 <option>杭州</option> 20 </select>
注:其中的selected表明该选项默认勾选,disabled则表明禁选
size表明显示的项数,multiple则表明多选
<label> 标签
注:
还有一些常见属性:checked、disabled、name、for
表格表单之间可以组合形成数据展示效果
10. div 和 span
(1) div:划分区域
div全称为division,“分割、分区”的意思,<div>标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。
即HTML中大多数的标签都可以嵌套在<div>标签中,<div>中还可以嵌套多层<div>,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。