HTML 的历史
超文本标记语言( HyperText Markup Language
,简称为HTML)—— 在1993年6月作为互联网工程工作小组工作草案发布。现在使用的 HTML5 ——2014年10月28日,W3C 推荐标准。
总而言之,学 HTML 就是学习各种 HTML 标签
HTML 标签主要语法:
<标签符>标签包裹的内容</标签符>
<!--
注意:
一般来说,标签都是成对出现的,但是也有例外,比如单标签,那么这种标签,我们称之为 自闭和标签
-->
HTML 的大体结构
HTML的常用标签
- 标题标签
h1~h6
(文章标题) - 段落标签
p
(可以将HTML
文档分割成若干段落) - 加粗
strong/b
(文字加粗功能) - 斜体
em/i
(文字斜体功能) - 超链接和锚点
a
(网页链接) - 图片标签
img
(网页的图片) - 换行
br
(换行) - 分割
hr
(分割线) -
span
标签 (一般用来组合其它标签) -
div
标签(分割文档 形成不同的部分) - 特殊符号(见下表)
- 列表标签
HTML代码 | 显示效果 | 描述 |
---|---|---|
< |
< | 小于号 |
> |
> | 大于号 |
|
space | 空格 |
  |
space | 空白位 |
© |
© | 版权 |
& |
& | 可用于显示其它特殊字符 |
标题标签
<!-- 一个页面只能有一个h1标签 -->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
段落标签
<!-- 前后自动换行 -->
<p>祝你有酒有肉有姑娘</p>
<p>祝你有诗有歌有远方</p>
<p>祝你一入Python深似海, 从此妹纸是路人</p>
列表标签
列表分为了三种:无序列表、有序列表以及定义列表
无序列表
<ul>
<h3>ul无序列表</h3>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
有序列表
<ol>
<h3>ol有序列表</h3>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
定义列表
<dl>
<h3>dl列表</h3>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>Javascript</dt>
<dd>脚本语言</dd>
</dl>
dt
定义列表中的项目
dd
描述列表中的项目
表格标签 table
标签 | 描述 |
---|---|
<table> | 定义表格 |
<caption> | 定义表格标题 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格的单元 |
<!-- 一个完整的表格一般是包括 表头,表身和表脚 -->
<table>
<thead>
<tr>
<th> name </th>
<th> age </th>
<th> mail </th>
</tr>
</thead>
<tbody>
<tr>
<td> 付帅帅</td>
<td> 18 </td>
<td> fuhandsome0219@gmail.com </td>
</tr>
</tbody>
<!-- 一般来说表脚用的并不是很多 -->
<tfoot>
<tr>
<td> 第一列 </td>
<td> 第二列 </td>
<td> 第三列 </td>
</tr>
</tfoot>
</table>
<!--
rowspan 合并行
colspan 合并列
-->
块级标签和行内标签
一般来说,HTML的标签整体大致可分为两类,行内标签和块级标签
块级标签(block):
独占一行,排斥和其它标签位于同一行
行内标签(inline):
可以和其它行内元素位于同一行
form表单
表单是包含表单元素的区域,表单元素是允许用户在表单中(比如:输入框,文本域,下拉列表等等)的输入的元素
<form action="" method="">
<p>用户名:<input type="text" name="username"></p>
<p>密码:<input type="password" name="password"></p>
</form>
<!--
action 表示要提交的地址 默认当前页面
method 表示要提交的方法 默认使用get方法 有get和post
enctype 有三种编码
默认:application/x-www-form-urlencoded
上传文件:multipart/form-data
不建议使用:text/plain
-->
input
input
的(type
)类型有很多,以下介绍一些常用的类型
- 文本框
text
- 密码框
password
- 单选框
radio
- 复选框
checkbox
- 提交按钮
submit
- 重置按钮
reset
- 普通按钮
button
- 文件
file
- 隐藏域
hidden
<form action="" method="">
<p>用户名:<input type="text" name="username" placeholder="请输入用户名"></p>
<p>密码:<input type="password" name="password" placeholder="请输入密码"></p>
<p> 性别 :
男 <input type="radio" name="gender" value="male">
女 <input type="radio" name="gender" value="female">
</p>
<p> 爱好:
coding <input type="checkbox" name="hobby" value="coding">
阅读 <input type="checkbox" name="hobby" value="read">
游戏 <input type="checkbox" name="hobby" value="game">
睡觉 <input type="checkbox" name="hobby" value="sleep">
</p>
<!--
placeholder h5新增属性
readonly 只读
disabled 禁用
autocomplete 自动完成
autofocus 自动激活
radio(单选)
name 相同name只能选择一个
value 表示选中的值
checkbox
name 区别不同选项
value 返回选中的内容
checked 选中 (写什么都可以选中 一般写true)
-->
<fieldset>
<legend>表单组1</legend>
</fieldset>
</form>
textarea 文本域
不是已经有
<input type="text" >
了吗?为什么还需要textarea
,注意,<input type="text" >
文本框,无论给多大多宽高,都只能输入一行,不能换行输入
<textarea name="personal" style="resize: none;width: 100px;height: 100px;"></textarea>
select 下拉框
<!-- size 表示显示几个-->
<select name="size" id="size" size="1">
<option value="1">s</option>
<option value="2" selected>m</option>
<option value="3">l</option>
<option value="4">xl</option>
<option value="5" >xxl</option>
<option value="6">xxl</option>
</select>