HTML是超文本标记语言，可以链接图片、语音、视频等多种媒体形式。
学习HTML的重点在于各种标签的使用。各种标签的用法固定，不存在着复杂的逻辑关系，所见即所得。
标签根据作用的范围分为块级标签和内联标签。块级标签作用标签所在的一整行，内联标签只作用文字区域。块状标签内可内嵌内联标签。
常用标签有如下几种门类：
一、基本标签
标题：从<h1><\h1>到<h6><\h6>，字体逐渐变小，块级标签，
布局：1、<div><\div>，2、<span><\span>本身无具体效果，可用于结构布局，主要是与CSS配合使用。
跳转：<a><\a>,内联标签，<a href =“ ”><\a>
段落：<p><\p>，块级标签，所有包含其中的内容自成段落，上下留白。
换行：<br>， 内联标签，在标签处换到下一行
字体加粗：1、<b><\b>，内联标签，推荐使用，2、<strong><\strong>，内联标签，与<b>用法相同。
字体上画斜线：<strike><\strike>，内联标签
字体倾斜：<em><\em>，内联标签
上标：<sup><\sup>，内联标签
下标：<sub><\sub>，内联标签
二、特殊字符
< = < ; &qt = > ; " = " ; © = © ; ® = ®
三、特殊标签
图片：<img src=" " alt=" " height=" " title=" ">，img导入图片，src设置图片链接地址，图片链接失败时显示alt设置的内容,height设置图片的高度，省略weight时表示按原图片比例缩放，当鼠标放到图片上方时显示title。
网页：<a href=" "><\a>，链接一个href中指定的网页页面。
四、列表
无序列表：<ul><\ul>，
有序列表：<ol><\ol>，
自定义列表：<dl><\dl>，
无序列表和有序列表都内嵌使用<li><\li>定义每一行，
自定义列表使用<dt><\dt>定义标题，使用<dd><\dd>定义每个标题下面的内容。
五、表格
<table><\table>定义表格，
内嵌使用<thead><\thead>定义表头，内嵌使用<tbody><\tbody>定义表格主体，
在表头和表格主体内，又嵌套使用<tr><\tr>定义行，<td><\td>定义列。
六、表单
表单可以与服务器端进行信息交互，主要有<input><\input>和<select><\select>等多种类型，详见代码。
<!DOCTYPE html> <!--html5中的写法，表示文本类型--> <html lang="en"> <!--language：english--> <head> <meta charset="UTF-8"> <!--coding = utf-8--> <title>html基本元素</title> </head> <body> <a href="#基本标签">第一章：基本标签</a> <a href="#特殊字符">第二章：特殊字符</a> <a href="#特殊标签">第三章：特殊标签：img、href</a> <a href="#列表">第四章：列表</a> <a href="#表格">第五章：表格</a> <a href="#表单">第六章：表单</a> <div id="基本标签"> <h1 style="background-color:yellow">我是h1，h标签范围是从h1——h6，</h1> <h2 style="background-color:yellow">我是h2</h2> <h3 style="background-color:yellow">我是h3,h标签是块级标签，控制一行</h3> <h4>我是h4</h4> <h5>我是h5</h5> <h6>我是h6</h6> <a style="background-color:gray">a标签是跳转标签，内联标签</a> <p style="background-color:pink">p标签是段落标签，块级标签，自己占用一行自己占用一行自己占用一行自己占用一行自己占用一行自己占用一行自己占用一行自己占用一行</p> <p style="background-color:pink">p标签，不保留空格 前面有5个空格</p> <p style="background-color:pink"> p标签所控制的行，上下留白</p> <br><br><br>这里没有使用标签,上面有3个换行标签br <b style="background-color:pink">b标签效果：内联标签、加粗</b><br> <strong style="background-color:pink">strong标签效果与b标签相同，推荐使用b标签（内联标签）</strong> <br> <strike style="background-color:pink">strike标签，内联、字体中间画斜线</strike> <br> <em style="background-color:pink">em标签，内联、倾斜</em> <hr> <h2>上标sup:2<sup style="background-color:yellow">5</sup></h2> <h2>下标sub:2<sub style="background-color:yellow">5</sub></h2> <hr> <div style="background-color:yellow">div是什么效果？没啥效果！主要是与CSS配合，撑起一个布局，方便添加CSS效果，是块级标签</div> <span style="background-color:yellow">span是啥效果？没啥效果！与div相同，为了方便CSS使用，是内联标签</span> </div> <div id="特殊字符"> <h4>特殊字符：< > "©® </h4> </div> <div id="特殊标签"> <b>图片：</b><img src="./1.png" alt="失败了" height="122" title="无题"> <img src="2.png" height="120px" width="100px" alt="失败了"> <hr> <a href="http://dh311.com/" target="_blank" >快来点击连接</a> <a href="pic.html">一张图</a> <a href="./put.html">一页面</a> <a href="http://www.easyicon.net/api/resizeApi.php?id=1075465&size=128">图</a> </div> <div id="列表"> <ul> <li>ul</li> <li>无序</li> <li>列表</li> </ul> <ol> <li>ol</li> <li>有序</li> <li>列表</li> </ol> <dl> <dt>dl自定义列表</dt> <dd>dt标题</dd> <dd>dd内容</dd> <dt>ul无序列表</dt> <dd>li</dd> <dd>li</dd> <dt>ol有序列表</dt> <dd>li</dd> <dd>li</dd> </dl> </div> <div id="表格"> <table border="2" cellpadding="5" cellspacing="0" style="color:black;"> <thead style="color:pink;"> <tr> <td colspan="3">表格table</td> </tr> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> </tr> </thead> <tbody style="color:red;"> <tr> <th style="color:blue;">shisha</th> <td>1</td> <td>2</td> </tr> <tr> <td rowspan="2">4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </tbody> </table> </div> <div id="表单"> <form action="https://www.sogou.com/web" method="get" enctype="multipart/form-data"> <p> 查询：<input type="text" name="query" value="少儿编程"> <input type="submit" value="提交"> </p> <p>姓名：<input type="text" name="username" value="默认值"></p> <p>密码：<input type="password" name="pwd" value="默认值"></p> <p> 性别：男<input type="radio" name="sex" value="1"> 女<input type="radio" name="sex" value="2"> </p> <p> 爱好：篮球<input type="checkbox" name="hooby" value="1"> 跳舞<input type="checkbox" name="hooby" value="2"> 唱歌<input type="checkbox" name="hooby" value="3"> </p> <p>button不传送数据，只绑定事件<input type="button" value="ton"></p> <p> 上传文件,enctype="multipart/form-data"，表示分段传送<input type="file" value="put_file"> </p> <p>submit传送数据，绑定事件<input type="submit" value="提交"></p> 下拉选框，多选时加按ctrl键: <select name="language" > <option value="0"></option> <option value="1">java</option> <option value="2">c</option> <option value="3">python</option> </select> <select name="language" multiple="multiple" size="2"> <option value="1">java</option> <option value="2">c</option> <option value="3">python</option> </select> <br> 下拉选项里带选项： <select name="province" multiple="multiple"> <optgroup label="安徽"> <option value="1.1">合肥</option> <option value="1.2">芜湖</option> <option value="1.3">淮南</option> </optgroup> <optgroup label="北京"> <option value="2.0">北京</option> </optgroup> <optgroup label="上海"> <option value="3.0">上海</option> </optgroup> <optgroup label="黑龙江"> <option value="4.1">哈尔滨</option> <option value="4.2">齐齐哈尔</option> <option value="4.3">大庆</option> </optgroup> </select> <p>备注：<textarea name="note">textarea是多行输入，text是单行输入</textarea></p> <label for="name">点我直接进入书写框</label> <input id="name" type="text" name="username"> <fieldset> <legend>legend框</legend> 姓名：<input type="text" name="username"> 密码：<input type="password" name="pwd"> </fieldset> </form> </div> </body> </html>
七、注意：
0、input标签中：button和submit，都是按钮，但button不发送数据、只绑定事件，submit发送数据、绑定事件。
1、提交数据有两种方式：get和post，服务器根据提交数据的方式进行解析。
get：默认方式，键值对在URL后面显示，但长度有限制；post：键值对不在URL后面显示，但是长度没有限制。
2、上传文件时，需要在form标签属性中声明分段发送，enctpye=“mutipart/form—data”
3、定义标签中使用的name、id、value的区分：
name：给服务器server端看的，数据字典的键值，
id：给前段web看的，如定位使用，
value：表单提交项的值，根据具体的情景含义不同：
type=“button”、“reset”、“submit” 定义显示在按钮上的文本
type=“text”、“password”、“hidden” 定义输入字段的初始值
type=“checkbox”、“radio”、“image” 定义与输入相关联的值
4、多选操作时，需要ctrl配合按键使用
浙公网安备 33010602011771号