首页 > 代码库 > HTML的正确入门姿势——基本结构与基本标签
HTML的正确入门姿势——基本结构与基本标签
一、什么是HTML
HTML是超文本标签语言，即网页的源码。而浏览器就是翻译解释HTML源码的工具。
二、HTML文档的结构
HTML文档主要包括三大部分：文档声明部分、<head>头部部分、<body>主体部分。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> </body> </html>
<!--
↑文档类型声明：让浏览器按照html5的标准对代码进行解释与执行。
↑文档类型声明必不可少，而且，必须放在文档最上方。
↑如果不写文档类型声明，浏览器会默认按照兼容模式运行，但可能会出现不明bug。
-->
三、HTML的基本标签
1.<head>头部部分
<!--
↑head中主要放关于网页设置的相关语句。
-->
1.1meta标签
<meta charset="utf-8" />
<!--
↑设置网页的字符集编码格式：
GB2312：国标码。简体中文的编码格式。
GBK：扩展的国标码。比国标吗多了更多的编码格式。
utf-8；万国码。可以兼容绝大多数国家的语言。
html4.01之前，声明字符集编码的格式：<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-->
<meta name="keywords" content="杰瑞教育,html5,Web开发"/>
<!--
设置网页关键字：
name="keywords"表示当前语句用于设置网页关键字
content=""表示网页的关键字内容。多个关键字之间用英文逗号分隔。
-->
<meta name="description" content="这是我在杰瑞开发的第一个网页。我真厉害！！！！！"/>
<!--
设置网页描述：
name="description" 表示当前语句用于设置网页描述
content="" 表示网页的描述内容。
网页的描述，在搜索引擎中搜索网站时，标题下面的一段文字，就是网页的描述内容。
-->
1.2title标签
<title>杰瑞首页</title>
<!--
↓网页的标题，也就是网页选项卡上的文字。
-->
1.3link标签
链接网页与其他文件。
下面举个栗子：链接小图标
<link rel="icon" href="img/icon.PNG"/>
2.<body>主体部分
<!--
body中的内容，会显示在浏览器的展示区域中。
-->
2.1 标签的分类
HTML标签，分为“块级标签”和“行级标签”。
【块级标签和行级标签的区别】
1、块级标签自动换行，前后隔一行；
行级标签不会自动换行，从左往右依次显示
2、块级标签的宽度默认是百分之百，行级标签的宽度由文字内容撑开；
3、块级标签可以设置宽度、高度、边距等属性
行级标签不能设置上述属性
从写法上，HTML标签分为“成对标签”和“自闭合标签(空标签)”
成对标签：成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。例如：<h1></h1> <p></p> <title></title>
自闭合标签/空标签：只有一个标签，用/表示标签的自动闭合(/可以省略)。例如<hr /> <link /> <meta />
2.2 常见的块级标签
1、h标签：标题标签，默认加粗，h1最大，h6最小
2、hr标签：水平线标签
3、br标签：换行标签，在代码中敲回车，在网页中并没有作用，必须使用<br>断行。
4、p标签：段落标签，表示网页中的一段文字
5、blockquote标签：引用标签，表示标签中的文字是应用自其他网站的内容。浏览器默认显示效果：整段向后缩进
6、cite：表示引用内容的来源，常写引用的网址URL。
7、pre标签：预格式标签，与p标签不同的是，pre标签会保留代码中的空格和回车，在网页中直接显示。最常的作用，是在网页中显示代码段，保留代码段格式。
8、div分区标签，用于配合css使用。将网页划分为块，可以包裹各种标签。<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>HTML基本标签</title> </head> <body> <h1>我真帅！</h1> <h2>我真帅！</h2> <h3>我真帅！</h3> <h4>我真帅！</h4> <h5>我真帅！</h5> <h6>我真帅！</h6> <hr/> <p>这是一个段落。这是一个段落。<br />这是一个段落。这 是一个段落。</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段 落。</p> <blockquote cite="www.jredu100.com"> 我是个帅哥 ！ </blockquote> <pre> 预 格 式 标 签</pre>
<div style="width:100%;height:20px;background-color: red;"> 这是div里面的文字 </div>
2.3 基于布局的块级标签
1、有序列表ol： order list。一个有序列表由多个li组成
<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>
2、无序列表ul： unorder list
<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>
3、定义列表dl： difine list。
定义列表包含两部分：
<dt></dt>：定义列表的标题，标题顶格显示，一般一个定义列表只有一个标题
<dd></dd>：定义列表的描述项，相对于标题向后缩进显示，一个标题可以有多个描述项。
<dl> <dt>定义列表的标题</dt> <dd>定义列表的描述项1</dd> <dd>定义列表的描述项2</dd> <dd>定义列表的描述项3</dd> </dl>
2.4 了解：组合标签figure
包含两部分：
img 一张图片
figcaption： 图片的标题，在图片正下方显示。
<figure> <img src="img/icon.PNG" /> <figcaption>图片的标题</figcaption> </figure>
2.5 常用的行级标签
1、span标签：用于包裹行内的文字。常配合css使用修改文字样式。
↓栗子：“帅”字颜色变红，字体变48像素
我真<span style="color: red;font-size: 48px;">帅</span>！！！
2、em/strong/i/b 区别
1、em和i都能倾斜，strong和b都能加粗。但是，em和strong多了一层强调的含义。
(强调的作用，可以让搜索引擎快速的抓取网页的重点部分。可以实现代码的语义化。)
2、em和strong都有强调的作用，但是em是倾斜，strong是加粗，而且strong的强调程度要比em更高。
<em>em标签，倾斜+强调</em> <strong>strong标签，加粗+强调</strong> <i>i标签，倾斜</i> <b>b标签，加粗</b> <s>删除线</s> <u>u标签，下划线</u>
【常见引用标签】
常见的引用标签有：blockquoye、q、cite
区别：
1、显示效果上：blockquote整段缩进、q加引号、cite倾斜
2、从功能上：blockquote用于引用一整段内容，是块级标签。q引用一句话，是行级标签。cite常用于引用作品名、书画名。
3、img图片标签
①、src属性：表示图片所在的路径。
[路径的表示方式]
a网络上的图片地址。不建议使用。 使用http：//协议
b可以使用图片的绝对路径。仅供了解。使用file：//协议。严禁使用。因为网页使用http协议，无法打开file：//协议的文件
绝对路径写法：file：///盘符：/文件路径
c使用相对路径。推荐使用的唯一方式。
a.图片在当前文件的下一层，“文件夹名/图片名(带后缀)”
b.图片与当前文件在同一层，直接写“图片名”。
c.图片在当前文件的上一层，“../图片名”。
注意：图片必须包含在项目里面，不能退出项目根目录
②、width、height(宽度、高度)属性。
③、title：鼠标指上时显示的文字。
④、alt：图片无法加载时显示的文字，省略alt将默认显示title内容。
⑤、align：图片周围的文字，相对于图片的排列方式：
top：文字居上
center：文字居中
bottom：文字居底
<img src="img/TX.JPG" width="100" height="100" title="鼠标指上时显示的文字" alt="" align="center"/>
4、a标签：超链接
a、href属性：超链接跳转的地址。可以是网页链接，也可以是本地html文件的相对路径。
b、target属性：超链接新页面打开的位置。
_self在当前页面打开(默认) _blank在新页面打开
c、title属性：鼠标指在超链接上显示的文字。
【功能性超链接】
a、给指定邮箱发送邮件。mailto：//协议。写法：mailto：//邮箱地址
eg:<a href="mailto://983364230@qq.com">点击给帅哥发邮件！</a>
b、tencent：与指定QQ聊天。tencent：//协议。写法：tencent://message/?uin=QQ号码
eg:<a href="tencent://message/?uin=983364230">与帅哥聊天</a>
c、锚链接：点击超链接可以跳转到页面的指定位置(锚点)
①在页面的指定位置定义一个锚点：<a name="top"></a>
②将超链接的href属性，改为“#锚点名称”：<a href="http://www.mamicode.com/#top">跳转顶部</a>
③跳转到其他页面锚点的方式：<a href="http://www.mamicode.com/其他页面地址.html#锚点名称">跳转到其他页面指定位置</a>
<a href="#top" target="_blank" title="百度">这是一个超链接</a>
5、字体大一号和小一号，已淘汰。修改字体统一使用css
<small>小一号字体</small> <big>大一号字体</big>
【其他行级标签，了解即可】
s标签：带删除线
u标签：带下划线
dfn标签：定义专业术语
abbr标签：专业术语缩写词
code：提示搜索引擎当前为一段计算机代码，但是不会保留代码格式，需要配合pre标签共同使用。pre包含code
var：声明变量
bdo：定义文本显示方向，有一个重要属性：dir， ltr从左往右 rtl从右往左
kbd：表示需要用户输入的文字
sub：下标
sup：上标
time：表示时间
<u>u标签带下划线</u> <span style="text-decoration: underline;">css实现下划线</span> <s>s标签带删除线</s> <span style="text-decoration: line-through;">css实现删除线</span> 我们正在学习<dfn>HTML5</dfn>，简称为<abbr>H5</abbr>。 <pre> <code> jsLoader({ name : ‘iplookup‘, url : ‘http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js‘ }); </code> </pre> <var>x</var>+<var>y</var>=1 <bdo dir="rtl">我真帅</bdo> 请输入“<kbd>Esc</kbd>”退出系统。 H<sub>2</sub>O X<sup>2</sup> 现在是<time>16:10</time>
【w3c倡导的web结构】
1、内容与表现分离。html与css分离
2、内容与行为分离。html与javascript分离
3、html代码，必须要实现语义化
【w3c的规范】
1、标签名和属性名必须小写
2、html标签必须关闭
3、属性值必须用引号括起来
4、标签必须正确嵌套
①嵌套的标签，不能发生交叉
②块级标签可以包裹行级，行级标签不能包裹块级；p标签不能包裹p标签等...
2.6 表格
表格table标签
表格中的一行，用tr表示；
一行中的每个单元格，用td表示；
首行的表头中每个单元格用th表示，th默认文字会加粗，居中。
【表格中的各种属性】
1、border：给表格的每个td和整个table加边框。如果border的值>1，则只有最外层边框加粗，td上的边框不变。
2、cellspacing:设置单元格与单元格之间的间距。
cellspacing="0"可以设置边框之间的间距为0，但是相邻的边框不会合并，而是显示两条线的宽度。
[设置表格边框合并]
可以使用css设置：style="border-collapse: collapse;"
设置边框合并以后，cellspacing属性将会失效。
3、cellpadding:单元格内边距，单元格中文字与边框之间的距离。
4、width/height：表格的宽度 /高度
5、align：设置表格在浏览器中居左、居中、居右
6、Bgcolor：表格背景色
bordercolor：表格的边框颜色
background：表格背景图。背景色和背景图同时存在，背景图生效。
【表格的行列属性】
作用于tr或td上的属性
1、width/height：宽度/高度
2、bgcolor：背景色
当表格的属性与行列的属性发生冲突时，优先级采用“近者优先”的原则：table<tr<td
3、align：设置表格中的文字水平对齐方式（right、center、left）
Valign：设置表格中的文字垂直对齐方式（top、center、bottom）
【注意】当表格属性与行列属性相冲突时，以行列属性为准
（近者优先！！！）
table中的align控制表格在整个浏览器中的显示位置！
单元格中的align控制其中文字在单元格中的对齐方式！
表格的align属性并不影响单元格内文字的水平对齐方式！
tr的align属性可以控制一行中所有单元格的水平对齐方式！
【表格的跨行与跨列】
1、跨列：colspan="n" 如果某个单元格跨n列，择该单元格右侧n-1个td就不需要了。
2、跨行：rowspan="n" 如果某个单元格跨n行，择该单元格下方n-1个td就不需要了。
代码如下：
<table border="1"; cellspacing="0"; style="border-collapse: collapse;" cellpadding="10" width="500"; height="400"; align="center"; Bbgcolor="yellow"; bordercolor="red"; background="img/TX.JPG"; > <tr bgcolor="red"> <th width="300"; bgcolor="cyan"; align="right"; valign="top"; rowspan="3">1-1</th> <th colspan="3">1-2</th> </tr> <tr> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table>
【表格的结构化】
完整的表格结构，包括
caption：表格的标题，无论caption标签放在表格的第几行，表格标题永远在表格的正上方居中
thead：表格的表头部分。永远在表格最上部
tbody：表格的身体部分。永远在表格的thead之下，tfoot之上
tfoot：表格的尾部。永远在表格的最下部。
表格的直列化：
表格有几列，就可以在表格的最上方写几个<col />标签，每个<col />就对应着第几列，可以对<col />标签修改样式、
添加name等属性，表示这一列的所有td同步修改；
如果，需要对多列修改共同样式，可以使用<colgroup></colgroup>包裹多个<col />
代码如下：
<table> <col style="background-color: red;"/> <colgroup style="background-color: blue;"/> <col /> <col /> <caption>表格的标题</caption> <thead> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>男</td> </tr> <tr> <td>2</td> <td>李四</td> <td>女</td> </tr> <tr> <td>3</td> <td>王二</td> <td>不明</td> </tr> </tbody> <tfoot> <tr> <td>合计</td> <td></td> <td>3</td> </tr> </tfoot> </table>
2.7 表单
【form表单】
1、form表单有两个重要的属性
action：表示将表单提交给哪个服务器地址。
method：表单提交数据的方式，可选值有get、post两种。
[get和post的区别]
①get使用url传递数据，所有内容在地址栏可见，不安全。
post的数据无法在地址栏看到，较安全。
②get传递的数据量有限，而且只能传递纯文字内容；
post可以传递大量数据，并且可以传递图片、视频等文件。
③get的传输速度要比post快。
[get传递数据的URL格式]
http：//原来的地址.html？name1=value1&name2=value2
比如：http：//127.0.0.1:8020/0595.html?username=123
所以，input使用时，name属性必不可少，缺少name，将导致该输入框的数据不向后台传递。
2、input的常用属性：
①type：表示当前输入框是何种类型的输入框；
②name：给输入框起别名。向后台传递时，使用name=value的形式传递。
③value：当前input的默认值；
④placeholder：输入框的提示内容，当输入框有value时提示内容消失。
⑤hidden：隐藏当前输入框。可以写为hidden="hidden",也可以省略属性值，只写<input type="text" hidden>
隐藏的输入框依然可以向后台传递数据
⑥disabled：禁用当前输入框。可以显示，不能使用。
被禁用的输入框内容，将不能向后台传递数据。
⑦ checked="checked" 设置单选/多选按钮，默认选中。
3、input的type类型：
①text：普通的文本框；
②password：密码框输入的内容，显示为小黑点。
③radio：单选按钮，单选按钮的value不能省略，这个value需要传到后台；
单选按钮，凭借name是否相同，区分按钮是否为同一组。同一组按钮只能选中一个，name必须相同。
checked="checked" 设置单选按钮，默认被选中。
④checkbox：多选按钮，其他与单选按钮相同。
⑤file：文件上传框。
accept属性可以限制只能上传何种类型的文件。"*"表示可以接受所有文件，"image/*"表示只能接受图片。
multiple="multiple" 设置可以上传多个文件。
⑥submit：表单提交按钮
⑦reset：表单重置按钮，点击将表单恢复为初始状态。
⑧image：图形提交按钮，src属性导入图片，与submit都具有提交表单的作用。
⑨button：显示为按钮形状，但是没有任何作用。
⑩hidden：隐藏的输入框，与 普通输入框+hidden="hidden" 的作用相同。
4、select 下拉选择区块
①select里面的每一项，用<option></option>标签表示；
②name属性，需要写到select标签上；
③option标签如果有value属性，择向后台传递的将是value属性的值，
如果没有value属性，则传递的是<option></option>标签之间的文字。
④option添加属性中，selected="selected"设置选中默认项
⑤select添加属性multiple="multiple",设置当前下拉控件可以多选。
⑥option添加属性title，表示鼠标指上后的文字。
⑦select可以使用<optgroup></optgroup>标签对选项进行分组，用label属性显示分组名
<select name="city"> <optgroup label="沿海"> <option value="123">青岛</option> <option selected="selected">烟台</option> </optgroup> <optgroup label="内地"> <option title="济南">济南</option> <option>淄博</option> </optgroup> </select>
5、textarea 文本域
①文本域大小控制：
可以用文本域属性cols="20"(宽度多少字符) rows="20"（高度等于多少行）
可以使用css样式style="width: 200px; height: 300px;"
②设置文本域大小不能拖动 style="resize：none;"
③设置文本域为只读模式，不能修改
<textarea readnoly="readonly"></textarea>
④文字超出区域处理：
使用style="overflow: xx"样式，可以设置文字超出区域的显示的方式:
>>>overflow:hidden; 超出区域的文字隐藏不显示；
>>>overflow: scroll:无论文字多少，都会显示水平垂直滚动条；
>>>overflow: auto：自动，默认效果。文字多显示滚动条，文字少不显示滚动条
>>>可以使用overflow-x和overflow-y单独修改两个方向的滚动条。
overflow-x: scroll;overflow-y: hidden;
form表单 代码如下：
<form action="" method="get" id="form1"> <table> <tr> <td>用户名</td> <td> <input type="text" name="username" value="sdg" disabled/> <input type="text" name="username" value="sdg" hidden="hidden"/> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="password" value="" placeholder="请输入密码"/> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 <input type="radio" name="sex" value="不明" checked="checked" />不明 </td> </tr> <tr> <td>兴趣</td> <td> <input type="checkbox" name="hobby" value="吃" />吃 <input type="checkbox" name="hobby" value="喝" />喝 <input type="checkbox" name="hobby" value="玩" />玩 <input type="checkbox" name="hobby" value="乐" />乐 </td> </tr> <tr> <td>身份证</td> <td> <input type="file" name="card" accept="image/*" multiple="multiple"/> </td> </tr> <tr> <td>城市</td> <td> <select name="city"> <optgroup label="沿海"> <option value="123">青岛</option> <option selected="selected">烟台</option> </optgroup> <optgroup label="内地"> <option title="济南">济南</option> <option>淄博</option> </optgroup> </select> </td> </tr> <tr> <td>阅读服务协议：</td> </tr> <tr> <td colspan="2"> <textarea style="width: 300px; height: 200px; resize: none; overflow: scroll;" readonly="readonly">这是一份你必须同意的协议</textarea> </td> </tr> <tr> <td> <input type="submit" value="注册"/> </td> <td> <input type="reset" name="重置"/> </td> </tr> <tr> <td> <input type="image" src="img/icon.PNG"/> </td> <td> <input type="button" value="一个并没有什么卵用的按钮"/> </td> </tr> </table> </form>
【html5智能表单】
1、H5给我们提供了将form外的input与表单关联的方式。只需要给form表单起一个id，
然后给表单外面的input添加form属性，指向这个id，就可以实现表单与input的绑定
<form id="ff"></form>
<input form="ff"/>
2\H5给我们新增了许多input的新的type类型
range color date email url等
3、H5新增的input属性：
①form属性：关联指定表单的id
②placeholder：输入框的提示内容
③required="required" 表示必填
④autofocus： 指定输入框自动获得焦点
⑤autocomplete：可以设置是否开启自动提示完成功能，默认 为开启状态，
设置为off表示关闭，设置为on表示打开
可以为form标签设置autocomplete，控制表单所有输入框的自动提示功能。
HTML的正确入门姿势——基本结构与基本标签