首页 > 代码库 > 小K的H5之旅-HTML的基本结构与基本标签
小K的H5之旅-HTML的基本结构与基本标签
一、什么是HTML
HTML是超文本标签语言，即网页的源码。而浏览器就是翻译解释HTML源码的工具。
二、HTML文档的结构
HTML文档主要包括三大部分：文档声明部分、<head>头部部分、<body>主体部分。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> </body> </html>
<!DOCTYPE html> →这是HTML文档的声明部分，在html5中，已经被简化成了此样式。
需要注意的是：文档声明必须有！而且必须在文档页面的第一行！
三、HTML的基本标签
1.<head>头部部分
head标签内信息用于描述网页，即元数据（描述网页的基本信息）。
1.1meta标签
meta标签描述文档类型和编码、可以描述网页的关键字keywords和描述description。
meta标签常用属性：
1.1.2 charset：设置文档的字符集编码格式
比如说Html5中设置字符集编码 <meta charset="UTF-8">
>>>常见的几种字符集编码格式：
a.UTF-8 ：万国码，又称 Unicode8（此外还有Unicode16）。常用！
b.GB-2312 ：国标码。
c.GBK ：扩展的国标码。
1.1.2 http-equiv:将信息写给浏览器看，让浏览器按照这里面的要求执行，需要配合content属性使用。
（http-equiv属性只是表明需要设置那一部分，具体的设置内容，放到content属性中）。
可选属性值： Content-Type（文档类型） refresh（自动刷新）set-Cookie(设置浏览器cookie缓存) 。
1.1.3 name：使用方法同"http-equiv"将我们的信息写给搜索引擎看的。
常用且需要掌握的属性值：author（作者）keywords（关键字）description（网页描述）。
1.2title标签
网页的标题，即网页的选项卡上的文字
1.3link标签
链接网页与其他文件。
↓下面举个栗子↓
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="author" content="http://www.xxxxx.com"/> 6 <meta name="keywords" content="HTML5,网页,web前端开发"/> 7 <meta name="description" content="这是我的第一个网页"/> 8 <title>我的第一个网页</title> 9 <link rel="icon" href="ivicon.png"> 10 </head> 11 <body> 12 </body> 13 </html>
2.<body>主体部分
2.1 标签的分类
a.块级标签，显示为块，前后隔一行（自动换行）。
b.行级标签 ，按行从左往右逐一显示。
2.2 常见的块级标签
a.标题标签：<h1></h1>......<h6></h6> 特点:h1最大，h6最小，自动加粗。
b.水平线标签：<hr/>
c.段落标签：<p></p>
d.换行标签：<br/>
e.引用标签：<blockquote></blockquote>
重要的cite属性表明引用的来源，一般为网址，且网址不会在网页中展示
浏览器一般显示为首行缩进
f.预格式标签：<pre></pre>
浏览器默认显示样式：①显示为等宽字体
②代码中的换行，空格等元素可在浏览器中直接显示。
↓下面举个栗子↓
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常见的块级标签</title> </head> <body> <h1>h1标题标签</h1> <h2>h2标题标签</h2> <h3>h3标题标签</h3> <h4>h4标题标签</h4> <h5>h5标题标签</h5> <h6>h6标题标签</h6> <hr/> <p>这是段落标签，=w= <br />这里是一段文字哟</p> <p>只是第二段 <br />=w= look at me!!! </p> <blockquote cite="此处一般为网址"> 横眉冷对千夫指，俯首甘为孺子牛 </blockquote> <pre>一二三四五 一二三四五</pre> </body> </html>
2.3 基于布局的块级标签
列表:无序列表、有序列表、定义列表（图文结合）。
a.有序列表
<ol> （order list缩写）
<li>...</li> 列表项可以有n多个
<li>...</li>
<li>...</li>
</ol>
b.无序列表
<ul> (unorder list)
<li>...</li> n多个
<li>...</li>
<li>...</li>
</ul>
c.定义描述列表
<dl>
<dt>一般只有一项</dt> （列表标题）（标题顶格显示）
<dd>可以有很多项</dd> （列表描述项）（描述项相对标题缩进显示）
<dd>。。。。。</dd>
<dd>。。。。。</dd>
</dl>
d.组合标签 显示效果：上面是图片，下面是图片的标题，同时图片和标题前代缩进。
<figure>
<img/> 图片
<figcaption></figcaption> 图片的标题。
</figure>
e.分区标签
<div></div> 可以包裹任何标签，也可以被包裹进任何标签。
↓下面举个栗子↓
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于布局的块级标签</title> </head> <body> <ol> <li>这是第一项</li> <li>这是第二项</li> <li>这是第三项</li> </ol> <ul> <li>无序1</li> <li>无序2</li> <li>无序3</li> </ul> <dl> <dt>这是定义列表的标题</dt> <dd>这是描述项1</dd> <dd>这是描述项2</dd> <dd>这是描述项3</dd> </dl> <!--嵌套时，HTML标签一定不能交叉！！--> <figure> <img src="../img/ivicon.png"/> <figcaption>这是图片标题</figcaption> </figure> <div style="width:100px ;height: 20px;background-color: blue;">这是一个div </div> </body> </html>
2.4 行级标签
行级标签主要有：<span>
<em><i>
<strong><b>
<q>
<small><big>
<img>
<a>
↓行级标签的写法及注意事项如下↓
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常见的行级标签</title> </head> <body> <a name="top"></a> <!--span（文本）--> <span style="color: red;font-size: 36px;background-color: yellow;">这是span中的文字（作用：无实际意义，对于某些<span style="color: blueviolet;">特别的文字</span>进行样式修改时用此标签包裹）</span> <br /> <!--em（强调）--> 这是一句话，<em>重点</em>在这里 <!--两者都是斜体，但前者拥有更着重的语气，而后者不具备这一点--> <br /> <!--i（倾斜）--> 这是一句话，<i>重点</i>在这里 <br /> <!--strong（强调）--> 这是一句话，<strong>重点</strong>在这里 <!--两者的区别同上--> <br /> <!--b（加粗）--> 这是一句话，<b>重点</b>在这里 <!--[注意] 1.强调程度来说： strong>em； 2.HTML5语言，要求标签尽可能的 实现语义化。（strong与em所包含的b与i不具备的强调含义） --> <br /> <!--q（短引用）显示为文字用引号包括--> <q cite="">知识短引用中的文字</q> <br/> <!--small（缩小字体）big（放大字体） 【两者可以多重嵌套,但不常用】--> <small>这个<small>比上面的<small>小</small></small></small> <br/> <big>这个<big>比上面的<big>大</big></big></big> <br /> <!--img（图片） 1.src: 表示引用图片的地址 路径地址的写法：a.★相对路径：以当前文件为准去寻找图片地址。 与当前文件处于同一层的图片直接写图片及其后缀名； 图片在当前文件下一层：文件夹名/图片名 图片在当前文件上一层：../图片名 b.绝对路径：严禁使用！！例如file:///D:/111.gif c.网络地址：网络上的图片链接。但是，一般不使用。 2.height width ： 图片的高度和宽度，可以用css样式(style="height: ;width: ;")所代替 3.title ：图片的标题，当鼠标之上后显示的文字。 4.alt:当图片无法加载的时候显示的文字。 *5.Align：图片两边文字所对应图片的位置。（top center bottom） --> <img src="此处为网络地址"/> <!--以上为网络地址写法--> <img src="此处为路径"/> <!--以上为绝对路径写法--> <img src="../img/ivicon.png"/> <img src="ivicon.png" /> <img src="练习用图/ivicon.png" /> <!--以上为相对路径写法--> <a name="weixin"><img src="练习用图/ivicon.png" style="height:100px ;width:100px ;"title="哈啊哈" alt="这里没显示"/></a> <br /> <img src="QQ图片20170223092045.jpg"/ align="center">12333333333 <br /> <!--a（超链接） 1.href:超链接的路径(网络连接或者本地文件)，路径确定同img。 2.target:blank 新页面打开 self 自身跳转 3.title:同上 4.rel（了解）：指定当前文档与被连接文档的关系 prev（前一片） next（后一篇） ★icon (被链接图片是当前文档的图标) ★stylesheet（被链接文档是当前文档的样式表） prefetch（预加载，当你在当前文档加载完成，利用空余时间，预加载即将链接文档） 5.锚链接： a.本页面锚链接 s1.设置锚点<a name="name"></a> s2.在超链接上使用 #name 跳转到对应锚点 b.页面间锚链接 在即将跳转的页面某位置设定锚点<a name="name"></a> 在超链接的href属性中使用"页面地址.html#name" 6.功能性链接： mailto：邮箱地址 用于给指定邮箱发送文件 tencen://message/?uin=qq号码 给指定qq发送消息 --> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <a href="#weixin" target="_self">这是一个超链接，去看微信的</a> <a href="练习1.html#qq" target="_self" title="aaaaa">这个是练习一，自身跳转的</a> <a href="mailto:xxxxxxx@qq.com">这里发邮件</a> <a href="tencen://message/?uin=xxxxxxx">这里发信息</a> <a href="ivicon.png" target="_blank">picture</a> </body> </html>
2.5 表格
2.5.1 表格的结构
表格元素：行 列 格
表格 <table></table>
表格的行 <tr></tr>
每行中的列 <td></td>
表格的表头 <th></th>（ 默认加粗，单元格居中。）
2.5.2 table的常见属性
1.border 边框，其增大时，只增加外围框线，单元格边框始终为1像素
2.cellspacing 单元格之间的间隙距离,当=0的时候，只会是单元格的
间隙等于0，但不会合并边框线，此时表格中线为两个像
素，若想使其合并，则★使用 style="border-collapse:collapse"★
3.cellpadding 单元格里边的文字与边框线的距离(不常用)
4.width height 宽度和高度
5.align 表格的对齐方式
【left right center】
【注意事项：相当于让表格浮动，会影响其后的元素的原有排列方式】
6.bgcolor 单元格的背景色，等同于style="background-color:;"
7.background 单元格的背景图片,等同于style="background-image:;"
且背景图会覆盖背景色
8.bordercolor 边框的颜色
2.5.3 tr td（th）相关属性
1.width height 单元格的宽度和高度
2.bgcolor 单元格的背景颜色
3.align (left right center)单元格中的文字水平对齐方式(text-align 文本居中)
4.valign (top center bottom)单元格中的文字垂直对齐方式
5.nowrap 单元格中文字不换行
【注意】当表格属性与行列属性相冲突时，以行列属性为准
（近者优先！！！）
table中的align控制表格在整个浏览器中的显示位置！
单元格中的align控制其中文字在单元格中的对齐方式！
表格的align属性并不影响单元格内文字的水平对齐方式！
tr的align属性可以控制一行中所有单元格的水平对齐方式！
2.5.4 表格的跨行和跨列
跨行：colspan="n列" N行对应删除右边N-1行。
跨列：rowspan="n行" N列对应删除右边N-1列。
↓下面举个栗子↓
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table width="500" height="200" border="5" style="border-collapse:collapse" cellpadding="20" align="center" bgcolor="aqua" bordercolor="red"> <caption>我是表格的标题</caption> <tr> <th width="150" bgcolor="bisque"align="left"valign="top"nowrap="nowrap">表头1</th> <th colspan="3">表头2</th> </tr> <tr> <td rowspan="2">1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> </table> </body> </html>
2.6 文本级语义
↓写法及注意事项如下↓
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本级语义</title> </head> <body> <s>this is wrong</s> <br /> <cite>this is cite</cite> <br /> <pre><code>这里面是计算机代码，但不会保留代码格式，需配合pre标签使用</code></pre> <br /> <bdo dir="rtl">千万不要倒过来念</bdo> <!--rtl从右往左 ；ltr从左往右--> <br /> 请输入<kbd><span style="color: red;">红色文字部分</span></kbd>退出系统 <!--表示需要用户输入的内容，浏览器显示为等宽字体--> <br /> 文本<sup>这是上标文本</sup> <br /> 文本<sub>这是上标文本</sub> <br /> ©这是版权符号 <br /> <u>下划线</u> <br /> <time datetime="0214">这是time标签 12:12</time> <br /> <mark>这是mark标签，高亮或标记文本，浏览器显示为黄色背景</mark> <br /> <date>这是Date标签</date> </body> </html>
2.7 表单
2.7.1 表单 form
一般情况下与table一起使用，但两者互不影响
2.7.2 重要属性（缺一不可）：
action="表单提交地址"（各种后台语言）<空白则提交本页面>
method="提交方法"（两个属性值：post[比较安全] get）
get post的区别：
get： http://127.0.0.1:8020/HTML5%3d1701wk/HTML基本标签/D4-练习9.html?username=wk&password=12345
post：http://127.0.0.1:8020/HTML5%3d1701wk/HTML基本标签/D4-练习9.html
1.get： 使用url传参：http://服务器地址？name1=value1&name2=value2
（？表示传递参数，？后面采用name=value的形式传递，多个参数之间用&链接）
① url传参不安全，所有信息都可以在地址栏看到，并且可以通过地址栏随意传递其他数据，很容易被攻击数据库。
② url传参数据量有限，只能传递少量数据。
2.post: 使用http请求传递数据。url地址栏不可见，比较安全，且传递数据量没有限制。
All in all：一般用post！
2.7.3 input常用属性：
1.type ：表示input输入框的类型.
2.name ：input输入框的别名，一般情况下，必填。因为传递数据时使用name=value的形式传递。
3.value：input输入框的默认值。
4.placeholder：input的提示内容，当输入框有value的时候提示内容消失。
5.tabindex="n"（了解）：控制点击tab键时的跳转顺序，从最小的开始，逐步往大的数值跳转，获得焦点。
2.7.4 input特殊属性：
1.checked="checked"默认选中。
2.disabled="disabled"设置控制不能使用，用在按钮上不能点击，用在输入框上不能修改。
而且如果输入框disabled，则输入框信息不能往后台传递。
3.hidden="hidden"隐藏域传值。常用于配合disabled或根据其他需要使用隐藏域传值。
2.7.5 input-type属性详解：
1.text：文本输入框。
2.password：密码输入框，输入内容是显示小黑点。
3.radio：单选按钮。
① name和value属性必须同时存在，提交时，提交的是value的属性值。
② radio凭借name属性区分是否为同一组，name相同为同组，同组中只能选择一个。
③ checked="checked"（或者只写checked）表示默认选择的选项。
checkbox：复选按钮。（radio只能选一个，checkbox能选多个）
4.reset：重置表单数据。将表单数据重置为初始状态。
5.file：文件上传按钮。现在不常用，常用JS来做。
6.submit：提交按钮，提交表单数据。
7.image:图形提交按钮。功能同submit，可以提交数据。
8.button：普通按钮，没有任何功能。
2.7.6 下拉框控件select（单选/多选）:
1.写法 ：
<select>
<option>可以有n多个</option>
</select>
2.name属性应该写在<select></select>上,所有选项只有一个name。
3.option常用属性：
① value：当没有value时，传输的是<option></option>内的文字，当value存在时，传输的是value的值。
② title：鼠标之上后显示的文字。
③ selecked=selected:默认选中。
4.multiple设置select为多选。（一般不用，体验太差。ctrl+鼠标进行多选。）
5.optgroup：用于将option标签进行分组，用lable表示分组名。（不常用）
2.7.7 textarea文本域：
1.写法
<textarea></textarea>
2.常见属性：
①cols="" rows=""行列（不常用）
style="width:;height:;"(常用)
②readonly="readonly"不允许编辑。
③style="resize：none;"固定宽高，设置为其不允许修改：
④style="overflow：;"设置当文字超出区域是如何处理，并不是textarea的专属，div亦可。
常用属性值：hidden超出区域的文字隐藏无法显示；
scroll无论文字多少均会出现纵横滚动条；
auto自动，根据文字多少自动决定是否出现滚动条；
也可以通过overflow-x -y分别设置水平垂直方向的显示方式。
2.7.8 其他属性(不常用)：
<fieldset> [给form表单加上外框]
<legend>此处是标题</legend>
</fieldset> [注意：如果想让标题嵌入到边框中，需将标题标签写入到边框标签里面。]
[一个表单可以有多个边框组合。]
2.7.9 HTML5智能表单
1.H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，
即可通过表单进行提交。
2.type新增属性，详见表格。
3.input元素新增属性：
Autocomplete：自动完成功能——记录用户之前输入的内容，并在下次输入时自动提示完成输入。
【注意】属性值只有两个：on off
可以在form表单上使用，对整张表单的所有空间进行自动完成的开关。
也可以在input上使用，对特定输入框进行修改。
绝大部分浏览器，默认开启。
Autofocus：自动获得焦点
【注意】只能设置一个input元素，自动获得焦点。
Form：所属表单：通过form表单的id，确定此input输入哪张表单。
Required：必填 设置input必填，否则阻止提交。
Pattern：使用正则表达式验证input的模式（详见后续）
Placeholder：提示内容，当有value时，取消提示。
↓下面举个栗子↓
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <input type="color" name="1" form="1"> <form action="" method="get" id="1"> <table > <tr> <td>用户名</td> <td><input type="text" name="username" placeholder="请输入用户名" hidden="hidden"disabled="disabled"value="11111"/></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" placeholder="请输入密码"/></td> </tr> <tr> <td><input type="submit" value="注册"/></td> </tr> <tr> <td><input type="reset" value="清空"/></td> <td><input type="file" name="value"/></td> </tr> <tr> <td><input type="button" value="这个按钮没啥用！"/></td> </tr> <tr> <td>头像</td> <td><input type="image" src="练习用图/ivicon.png"/></td> </tr> <tr> <td>性别</td> <td><input type="radio" name="sex" value="man" checked="checked"/>男 <input type="radio" name="sex" value="women" />女</td> </tr> <tr> <td>爱好</td> <td><input type="checkbox" name="hobby" value="sleep" />睡觉 <input type="checkbox" name="hobby" value="eat" />吃饭 <input type="checkbox" name="hobby" value="play" />打豆豆</td> </tr> <tr> <td>城市</td> <td> <select name="city"> <option value="1" title="11111111111">青岛</option> <option value="2" title="11111111111">烟台</option> <option value="3" title="11111111111">济南</option> <option value="4" title="11111111111">潍坊</option> </select> </td> </tr> <tr> <td>城市</td> <td> <select name="city"> <optgroup label="山东省"> <option value="1" title="11111111111">青岛</option> <option value="2" title="11111111111">烟台</option> <option value="3" title="11111111111">济南</option> <option value="4" title="11111111111">潍坊</option> </optgroup> <optgroup label="还是山东省"> <option value="1" title="11111111111">青岛</option> <option value="2" title="11111111111">烟台</option> <option value="3" title="11111111111">济南</option> <option value="4" title="11111111111">潍坊</option> </optgroup> </select> </td> </tr> <tr> <td colspan="2"> <textarea style="width: 100px;height: 150px;resize: none;" readonly="readonly"> 这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！ </textarea> </td> </tr> </table> </form> </body> </html>
四、写在后面的话
这篇文章是小K第一次发博文，文章里可能还有许多不恰当的地方，希望各位大神能够帮忙指正，小K现在这里谢谢各位大手啦~
顺便提一下，小K都是用HBuild写的，安利给大家这个软件，感觉对于初次接触的萌新们来说，这是很好上手的一款软件~
最后提一下，浩哥好帅~
小K的H5之旅-HTML的基本结构与基本标签