首页 > 代码库 > HTML基本标签
HTML基本标签
1、01-HTML基本标签的head部分.html
<!DOCTYPE html>
<!--
文档类型声明：让浏览器，按照html5的标准对代码进行解释与执行。
文档类型声明必不可少，而且，必须放在文档最上方。
如果不写文档类型声明，浏览器会默认按照兼容模式运行，可能会出现不明BUG。
-->
<html>
<head>
<!--
head中，主要放一些关于网页设置的相关语句。
-->
<!--
设置网页的字符集编码格式：
GB2312：国标码。简体中文的编码格式。
GBK：扩展的国标码。比国标码多了更多的编码格式。
utf—8：万国码。可以兼容绝大多数国家的语言。
HTML4.01之前，声明字符集编码的格式：
<meta http-equiv="Conent-type" content="text/html;
charset=utf-8" />
-->
<meta charset="utf-8" />
<!--
设置网页关键字：
name=“keywords”表示当前语句用于设置网页关键字
content=“”表示网页的关键字内容。多个关键字之间用英文逗号分隔。
-->
<meta name="keywords"/ content="杰瑞教育，HTML5，Web开发">
<!--
设置网页描述：
网页的描述，在搜索引擎中搜索网站时，标题下面的一段文字，就是网页的描述内容。
-->
<meta name="description" content="。。。。。。。。。。。。。。"/>
<!--
title：网页的标题，也就是网页选项卡上的文字。
-->
<title>我最帅</title>
<!--
链接网页小图标：选项卡上的小图片。
rel属性：选择icon，表示链接的文件，将作为网页的icon图标。
href属性：选择图片所在的路径地址。
-->
<link rel="icon" href="http://www.mamicode.com/img/icon.png" />
</head>
<body>
<!--
body中的内容，会显示在浏览器的展示区域。
-->
</body>
</html>
2、02-HTML基本块级标签.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML基本标签</title>
</head>
<body>
<!--
HTML标签，分为“块级标签”和“行级标签”。
【块级标签和行级标签的区别】
①块级标签自动换行，前后隔一行；
行级标签不会自动换行，从左往右依次显示；
②块级标签的宽度默认是100%；
行级标签的宽度由文字内容撑开；
③块级标签可以设置宽度、高度、边距等属性；
行级标签不能设置上述属性
从写法上，HTML标签分为“成对标签”和“自闭合标签（空标签）”
①成对标签：成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。
例如：<h1></h1> <p></p> <title></title>
②自闭合标签/空标签：只有一个标签，用/表示标签的自动闭合（/可以省略）。
例如：<hr/> <link/> <meta/>
-->
<!--【常见的块级标签】-->
<!--
h标签：标题标签，默认加粗，h1最大，h6最小。
-->
<h1>我最帅！</h1>
<h2>我最帅！</h2>
<h3>我最帅！</h3>
<h4>我最帅！</h4>
<h5>我最帅！</h5>
<h6>我最帅！</h6>
<!--
hr标签：水平线标签。
-->
<hr />
<!--
p标签：段落标签，表示网页中的一段文字。
br标签：换行符号，在代码中敲回车，在网页中并没有作用。必须使用<br>断行
-->
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。<br />这是一个段落。这是一个段落。这是一个段落。</p>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<a name="center">123</a>
<!--
blockquote:引用标签。表示标签中的文字是引用自其他网站的内容。
浏览器默认显示效果：整段向后缩进
cite属性：表示引用内容的来源，常写引用的网址URL
-->
<blockquote cite="www.jredu100.com">我最帅！</blockquote>
<!--
pre标签：预格式标签。与p标签不同的是，pre标签会保留代码中的空格和回车，在网页直接显示。
最常用的作用，是在网页中显示代码段，保留代码段格式。
-->
<pre>
jsloader({
dasdasadaa addsadsaddd
})
</pre>
<!--【基于布局的块级标签】-->
<!--
有序列表ol order list
一个有序列表由多个li组成
-->
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<!--
无序列表ul unorder list
-->
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<!--
定义列表dl
定义列表包含两部分：
<dt></dt>：定义列表的标题，标题顶格显示，一般一个定义列表
只有一个标题
<dd></dd>：定义列表的描述项，相对于标题向后缩进显示，一个
列表可以有多个描述项。
-->
<dl>
<dt>定义列表的标题</dt>
<dd>定义列表的描述项1</dd>
<dd>定义列表的描述项2</dd>
<dd>定义列表的描述项3</dd>
</dl>
<!--
了解：组合标签figure
包含两部分：
img 一张图片
figcaption： 图片的标题，在图片正下方显示。
-->
<figure>
<img src="http://www.mamicode.com/img/icon.png"/>
<figcaption>图片的标题</figcaption>
</figure>
<!--
div 分区标签，用于配合css使用。将网页划分为区块，可以包裹各种
标签。
-->
<div style="width: 100%;height: 40px;
background-color:red ;">
这是div里面的文字
</div>
</body>
</html>
3、03-HTML基本行级标签.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="top"></a>
<!--
span标签：用于包裹行内的文字。常配合css使用修改文字样式。
-->
<span>我最帅！</span>
我最<span style="color: red;font-size: 48px;">帅</span>！！！
<!--
【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>
<u>u标签，下划线</u>
<!--【】常见引用标签
常见的引用标签有：blockquote、q、cite
区别：
①显示效果上：blockquote整段缩进、q加引号、cite倾斜
②从功能上：blockquote用于引用一整段内容，是块级标签。q用于
引用一句话，是行级标签。cite常用于引用作品名、书画名。
-->
<blockquote cite="www.jredu100.com">块引用</blockquote>
<q cite="www.jredu100.com">q标签，短引用</q>
<cite cite="www.jredu100.com">cite引用</cite>
<!--
字体大一号和字体小一号，但是已经被淘汰了，修改字体统一使用css
-->
<small>小一号字体</small>
<big>大一号字体</big>
<!--
【img图片标签】
1.src属性：表示图片所在的路径。
[路径的表示方式]
①网络图片地址。并不建议使用。
②可以使用图片的绝对路径。但是，严禁使用绝对路径。因为，绝对路径
使用file：//协议，网页使用http：//协议无法打开访问file：//文件。
file：//C：/sunyang.jpg--绝对路径写法：flie：///盘符：/文件路径
③使用相对路径。推荐使用的唯一方式。
a.图片在当前文件的下一层，“文件加名/图片名”
b.图片与当前文件在同一层，直接写“图片名”
c.图片在当前文件的上一层，“../图片名”
注意：图片必须包含在项目里，不能退出项目根目录。
2.width、height 宽度、高度属性
3.title：鼠标指上时显示的文字
4.alt：图片无法加载时，显示的文字。省略alt，将默认显示title内容
5.align：图片周围的文字，相对于图片的排列方式；top 文字居上，
center 文字居中 bottom 文字局底
-->
<img src="http://www.mamicode.com/img/icon.png"/ width="100" height="100"
title="鼠标指上时显示的文字" alt="111" align="bottom">
<!--
【a标签 超链接】
1.href属性：超链接跳转的地址。可以是网络连接，也可以是本地
HTML文件的相对路径。
2.target属性：超链接新页面打开的位置。
_slef在当前页面打开（默认） _blank在新页面打开
3.title属性：鼠标指在超链接上显示的文字。
【功能性超链接】
1.mailto：给指定邮箱发送邮件。
<a href=http://www.mamicode.com/mailto：//714143855@qq.com>点击发送邮件！
2.tencent：与指定QQ聊天。
<a href="tencent://message/?uin=1277980605">聊天
</a>
3.锚链接：点击超链接，可以跳转到页面的指定位置（锚点）
①在页面的指定位置，定义一个锚点：
<a name="center"></a>
②将超链接的href属性，改为“#锚点名称”
<a href="http://www.mamicode.com/#center">跳到div上方</a>
③跳转到其他页面指定锚点的方式：
<a href="http://www.mamicode.com/其他页面地址.html#center">123321</a>
-->
<a name="center"></a>
<div style="width: 100%; height: 800px;
background-color: red;">111111111</div>
<a href="http://www.mamicode.com/01-HTML基本标签的head部分.html" target="_blank"
title="123">这是一个超链接</a>
<a href="mailto://714143855@qq.com"target="_blank"
title="123">点击发送邮件！</a>
<a href="tencent://message/?uin=1277980605"
target="_blank"title="123">聊天</a>
<a href="http://www.mamicode.com/#top">调回顶部</a>
<a href="http://www.mamicode.com/#center">跳到div上方</a>
<a href="http://www.mamicode.com/02-HTML基本块级标签.html#center">123321</a>
<!--
【W3C倡导的Web结构】
1、内容与表现分离。Html与css分离。
2、内容与行为分离。Html与JavaScript分离。
3、Html代码，必须要实现语义化。
【W3C的规范】
1、标签名和属性名称必须小写
2、HTML标签必须关闭
3、属性值必须用引号括起来
4、标签必须正确嵌套
①嵌套的标签，不能发生交叉；
②块级标签可以包裹行级，行级标签不能包裹块级；P标签不能包裹P标签等。。
-->
<!--
其他的行级标签（了解即可）
-->
<u>u标签带下划线</u>
<span style="text-decoration: underline;">css实现下划线</span>
<s>s标签带删除线</s>
<span style="text-decoration: line-through;">css实现删除线</span>
<!--定义专业术语
dfn 定义专业术语 abbr 专业术语缩写词
-->
我们正在学习<dfn>HTML5</dfn>，简称为<abbr>H5</abbr>。
<!--
code标签：提示搜索引擎，当前为一段计算机代码。
但是code不会保留代码格式，需要配合pre标签共同使用。
-->
<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： ltr 从左往右显示 、 rtl 从右往左显示
-->
<bdo dir="rtl">姜浩真帅</bdo>
<!--
表示需要用户输入的文字
-->
请输入“<kbd>Esc</kbd>”退出系统。
<!--
sub 下标 sup 上标
-->
H<sub>2</sub>O X<sup>2</sup>
<!--
表示时间
-->
现在是<time>16:10</time>
</body>
</html>
4、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
表格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:设置单元格中的文字，水平对齐方式；left center right
valign：设置单元格中的文字，垂直对齐方式：top center bottom
【表格的跨行与跨列】
1.跨列：colspan=“n”如果某个单元格跨n列，则该单元格右侧n-1个td就不需要了；
2.跨行：rowspan=“n”如果某个单元格跨n行，则该单元格下方n-1个td就不需要了；
表格的结构化：
完整的表格结构，包括：
caption：表格的标题，无论<caption>标签放在表格第几行，表格标题远在表格
正上方居中。
thead：表格的表头部分，永远在表格最上部。
tbody：表格的身体部分，在thead之下，tfoot之上。
tfoot：表格的尾部。永远在表格最下部。
表格的直列化
表格有几列，就可以在表格的最上方写几个<col />标签，每个<col />就对应着第几列，
可以对<col />标签修改样式、添加name等属性，表示这一列的所有td同步修改：
如果，需要对多列修改共同样式，可以使用<colgroup></colgroup>标签包裹
多个<col />。
<col style="background-color:red" />
<colgroup style="background-color:blue:">
<col/>
<col/>
</colgroup>
-->
<table border="1" cellspacing="0" style="border-collapse:
collapse;" cellpadding=100 width="500" height="400"
align="left" bgcolor="yellow" bordercolor="red"
/*background="img/icon.png"*/>
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
<th>1-4</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
5、表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>用户注册</h1>
<!-- 【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 >
<optgroup label="沿海">
<option>青岛</option>
<option>烟台</option>
</optgroup>
<optgroup label="内地">
<option>济南</option>
<option>临沂</option>
</optgroup>
</select>
5、 textarea 文本域
① 文本域大小控制：
可以用文本域属性cols="20"(宽度多少字符) rows="10"(高度多少行)
可以使用CSS样式style="width:100px; height:100px;"
② 设置文本域大小不能拖动：
style="resize: none;"
③ 设置文本域为只读模式，不能修改：
<textarea readonly="readonly"></textarea>
④ 文字超出区域处理：
使用style="overflow: xx;"可以设置文字超出区域的显示的方式：
>>> overflow: hidden; 超出区域的文字隐藏不显示；
>>> overflow: scroll; 无论文字多少，都会显示水平垂直滚动条
>>> overflow: auto; 自动，默认效果。文字多显示滚动条，文字少，不显示滚动条。
>>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
overflow-y: scroll; overflow-x: hidden;
【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="autofocus" 指定输入框，自动获得焦点
⑤ autocomplete: 是否开启自动提示完成功能。 默认为开启状态，设置为off表示关闭，设置为on表示打开。
可以给form标签设置autocomplete，控制表单所有输入框的自动提示功能。
-->
<form action="" method="get" id="form1">
<table>
<tr>
<td>用户名</td>
<td>
<input type="text" name="username" value="http://www.mamicode.com/jianghao" disabled/>
<input type="text" name="username" value="http://www.mamicode.com/jianghao" hidden/>
<input type="hidden" name="username" value="http://www.mamicode.com/jianghao" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" placeholder="请输入密码"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="http://www.mamicode.com/男"/>男
<input type="radio" name="sex" value="http://www.mamicode.com/女" />女
<input type="radio" name="sex" value="http://www.mamicode.com/不明" checked="checked" />不明
</td>
</tr>
<tr>
<td>兴趣</td>
<td>
<input type="checkbox" name="hobby" value="http://www.mamicode.com/吃"/>吃
<input type="checkbox" name="hobby" value="http://www.mamicode.com/喝" />喝
<input type="checkbox" name="hobby" value="http://www.mamicode.com/玩" checked="checked" />玩
<input type="checkbox" name="hobby" value="http://www.mamicode.com/乐" checked="checked" />乐
</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="http://www.mamicode.com/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: 200px; height: 100px; resize: none; overflow-y: scroll; overflow-x: hidden;" readonly="readonly">这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。
</textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="http://www.mamicode.com/注册" />
</td>
<td>
<input type="reset" value="http://www.mamicode.com/重置" />
</td>
</tr>
<tr>
<td>
<input type="image" src="http://www.mamicode.com/img/icon.png" />
</td>
<td>
<input type="button" value="http://www.mamicode.com/一个并没有什么卵用的按钮" />
</td>
</tr>
</table>
</form>
<input type="text" name="test" form="form1" required="required" autofocus="autofocus" autocomplete="off" />
<div style="height:400px; background-color: #ff8040;"></div>
</body>
</html>
HTML基本标签