HTML 入门

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代码	显示效果	描述
&lt;	<	小于号
&gt;	>	大于号
&nbsp;	space	空格
&emsp;	space	空白位
&copy;	©	版权
&amp;	&	可用于显示其它特殊字符

标题标签

<!--  一个页面只能有一个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>