HTML 入门
2018-01-24 本文已影响0人
handsomeFu
HTML 的历史
超文本标记语言（ HyperText Markup Language，简称为HTML）—— 在1993年6月作为互联网工程工作小组工作草案发布。现在使用的 HTML5 ——2014年10月28日，W3C 推荐标准。
总而言之，学 HTML 就是学习各种 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>
