HTML（1）

来源：互联网发布：魅蓝note6网络编辑：程序博客网时间：2024/05/16 10:23

一.标签简介（编写软件为webstorm）：

单标签：
--只有一个开始标签没有结束标签，也就是由一个<../>组成的
双标签：
--有开始标签和结束标签，也就是由一个<p>和</p>组成

标签分类：
1.并列关系(兄弟、平级)
如：<head><body>
2.嵌套标签（父子、上下级）
如：<html><head>

例子：

二.H标签

HTML标签查阅文档http://www.w3school.com.cn/tags/tag_ul.asp

H标题标签：

1.H1-H6只表示给内容赋标题，不用来修改样式；
2.开发中慎重H1标签，一个文本中只能有一个H1标签；
3.H标签单独占用一行；

快捷键

trl+alt+insert 新建HTML
home 光标移动到行首
end 光标移动到行尾
Alt+鼠标左键同时选中拖动多行
Ctrl+/ 注释()

三.P标签：

告诉浏览器哪些文字是一个段落。
注意:
1.单独占一行；

四.Hr标签:

显示一条分割线
单标签<hr/> 单独占一行
注意：<hr>按照HTML规范来编写，<hr/>按照XHTML规范来编写,因为HTML5兼容XHTML，以后按照高级开发工具来自动生成。

如何在webstorm中快速的复制光标所在的那一行 Ctrl+D
如何在webstorm中快速的删除光标所在的那一行 Ctrl+X

<br/>换行

五.img标签

img标签的作用是我们需要显示一张图片<img src="image/yang1.jpg">src是图片名称
   src   相对路径赋值（每次从html所在的文件夹开始查找）
    同级<img src="yang1.jpg">
    下级 .html文件和所存储的图片在同一个文件夹中<img src="image/yang1.jpg">
    上级   存储图片的位置和存储代码的文件夹在同一个文件夹中<img src="../yang1.jpg">
    ..代表从当前位置的上一级文件夹中找到yang1.jpg图片

    绝对路径每次从盘符开始查找 F:\html学习\代码\image\yang1.jpg

注意：
以后引发问题开发中如果需要编写路径，统一使用反斜杠/,不要使用正斜杠\
因为我们以后开发的程序是要部署到其他操作系统的服务器上的，而在其他操作系统中路径都是/，所以你写的不是/,可能会引发问题。

绝对路径的可移植性比较差，所以使用相对路径比较多一点。

六.a标签

1.特性

作用：就是用于控制页面与页面之间的跳转。
格式：<a href="指定跳转的目标页面">需要展现给用户查看的内容</a>

注意：
1. a标签不仅可以使文字跳转还可以用图片跳转
<a href="指定跳转的目标页面"><img src="image/yang1.jpg"></a>
2. 一个a标签只能有一个href属性
3.URL地址必须有http://

2.属性

target属性：用于专门控制如何跳转
-self:用于当前选项卡跳转
-blank：新增选项卡跳转

title属性：用于悬停鼠标的提示信息

注意点;
1.若想把所以链接都在新的窗口打开：在<head>标签中写<base target="_blank">
2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定了target来实现。

3.假链接

形式：点击之后不会跳转
用途：企业开发前期页面还没写出来，不知道该跳转到哪里，先用假链接，最后页面都实现完成在替换为真标签。
格式：
1.# 会自动回到页面顶部
2.JavaScript 不会自动回到顶部

4.锚点（页内跳转）

1.要想通过a标签跳转到页内指定的位置那么必须告诉a标签一个独一无二的身份证号码
，这样a标签才能在当前界面中找到需要跳转到的目标位置。

2.在每一个HTML中都有一属性id，你可以给目标位置标签添加一个独一无二的身份证号码。<h2 id="head"></h2>
<a href="#head"></a>

注意：

1.通过a标签跳转是没有过度动画的

2.a标签除了可以跳转到当前页面的指定位置，还可以跳转到其他界面的指定位置
如：<a href="3.html#head">

七.列表标签

1.什么是列表标签？

列表标签的作用：给一堆数据添加列表语义，也就是告诉搜索引擎、浏览器这一堆数据是一个整体。

2.HTML中列表分类

2.1无序列表（unordered list）使用最多

2.1.1作用：

给一堆数据添加列表语义，并且这一堆数据中所有的数据都没有先后之分

*******************************

什么是有先后之分：

例如：排行榜

什么是没有先后之分：

例如：中国有哪些城市

*********************************

2.1.2无序列表格式：

<ul>

<li> 需要显示列表内容条目</li>

</ul>

li: list iteam 的缩写

例子：

<h2>中国城市有哪些</h2>

<ul>

</ul>

注意点：

1.一定记住ul标签是给一堆数据添加列表语义的，而不是用来给他们添加小圆点的（修改样式见CSS）。

2.ul标签和li标签是一个整体，是一个组合，所以一般情况下ul标签和li标签都是一起出现的，不会单个出现也就是说不会

单独使用一个ul标签或li标签。

3.由于ul标签和li标签是一个组合，所以ul标签中不推荐使用其他标签，也就是说ul标签中只能出现li标签。

*********************************************************************************************************************************

2.1.3使用场景：

1.新闻列表

2.商品列表

3.导航条

2.1.4 ul属性

1.compact：

2.type： disc 实心正方形

square 空心圆点

circle 圆点

注意：属性不建议使用，HTML是用于添加标签而不是用于修改样式，修改样式见css基础。

2.1.5无序列表的嵌套

无序列表中的li标签除了可以添加其他的标签来丰富我们的界面外，还可以添加ul标签来丰富我们的界面。

例如：

<h1>物品清单</h1><ul>    <li>        <h2>水果</h2>        <ul>            <li>苹果</li>            <li>西瓜</li>            <li>橘子</li>        </ul>    </li>    <li>        <h2>蔬菜</h2>        <ul>            <li>土豆</li>            <li>茄子</li>            <li>黄瓜</li>        </ul>    </li></ul>

快捷键：ul>li*2>h2+ul>li*3+tab键

自动生成：

<ul>    <li>        <h2></h2>        <ul>            <li></li>            <li></li>            <li></li>        </ul>    </li>    <li>        <h2></h2>        <ul>            <li></li>            <li></li>            <li></li>        </ul>    </li></ul>

2.2有序列表（ordered list）使用最少

2.2.1有序列表的定义

给一堆数据添加列表语义，并且这一堆数据中所有的数据都有先后之分。

2.2.2有序列表的用法

<ol type="1">    <li> 广东</li>    <li> 上海</li>    <li> 山西</li></ol>

注意：其他使用同无序列表一样

2.3定义列表（definition list）其次

2.3.1定义列表的作用：

1.给一堆数据添加列表语义

2.先通过dt标签定义列表中的所有标签，在通过dd标签给列表标题添加描述信息

2.3.2定义列表的格式：

<dl>    <dt>北京</dt>    <dd>北京市我国的首都</dd>    <dt>上海</dt>    <dd>国际金融中心</dd>    <dt>西安</dt>    <dd>历史文化古都</dd></dl>

其中dt和dd都是英文的缩写

dt是英文define title的缩写，所以dt的含义就是用来定义列表中的标题define description的缩写，所以dd的含义就是用来定义标题对应的描述的。

2.3.3定义列表的用途

1.网站底部的描述信息

如图;

2.做图文混排

注意：

1.dl和ul,ol是一样的，dl和dt,dd是一个整体，所以他们不会单独出现，都是一起出现的。

2..dl和ul,ol是一样的，dl和dt,dd是一个组合标签，所以建议dl中只含有dt和dd标签。

3.一个dt可以没有对应的dd，也可以有多个对应的dd，但是推荐使用一个dt对应一个dd。

4.dl和ul,ol是一样的，可以在dt中添加其他元素来丰富其标签。

快捷键：dl>(dt+dd)*3+tab键

<dl>    <dt></dt>    <dd></dd>    <dt></dt>    <dd></dd>    <dt></dt>    <dd></dd></dl>

八.表格标签

8.1表格标签的作用

表格标签的作用：用来给一堆数据添加表格语义

其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种表现形式。

8.2表格标签格式

<table>

<tr>

</tr>

</table>

1.表格标签中的table代表整个表格，也就是一堆table标签就是一个表格

2.表格标签中的tr标签代表整个表格中的一行数据，也就是说一对tr标签就是表格标签中的一行

3.表格标签中一对td标签就是一行中的一个单元格

快捷键：table>tr*3>td*2+tab键

<table>    <tr>        <td></td>        <td></td>    </tr>    <tr>        <td></td>        <td></td>    </tr>    <tr>        <td></td>        <td></td>    </tr></table>

注意：

1.表格标签是由一个边框属性border，这个边框属性决定了边框的属性，默认情况下这个属性的值是0，所以看不到边框。

2.表格标签和列表标签一样，他是一个组合标签，要么一起出现，要么不出现。

8.3表格标签的属性

8.3.1宽度和高度属性

高度标签height，宽度标签width：可以给table标签和td标签使用

1.表格的宽度和高度会根据内容默认

2.通过高度标签height，宽度标签width给table标签来设置。

3.如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，不会影响整个表格的宽度和高度。

8.3.2水平对齐和垂直对齐属性

水平标签align：可以给table标签和tr标签和td标签使用

垂直标签valign：只能给tr标签和td标签使用

水平标签align：

1.给table标签设置align属性，可以控制表格在水平方向的对齐方式。

2.给tr标签设置align属性，可以控制表格在当前行中所有单元格在水平方向的对齐方式。

3.给td标签设置align属性，可以控制表格在当前单元格在水平方向的对齐方式。

注意：

.如果td中设置了align标签，tr中也设置了align标签，那么单元格中的内容会按照td中的来设置对齐。

垂直标签valign：（顶部top，底部bottom，中部middle）

1.给tr标签设置valign属性，可以控制表格在当前行中所有单元格垂直方向上的对齐方式。

2.给td标签设置valign属性，可以控制表格在当前单元格垂直方向上的对齐方式。

注意：

.如果td中设置了valign标签，tr中也设置了valign标签，那么单元格中的内容会按照td中的来设置对齐。

8.3.3外边距和内边距属性

外边框标签和内边框标签：只能给table标签使用

外边距标签cellspacing:外边距就是单元格和单元格之间的距离，我们称之为外边距默认情况下单元格和单元格之间的外边距的距离是2px.

内边距标签cellpadding:内部边距就是单元格边框和文字之间的距离，我们称之为内边距默认情况下的距离是1px.

注意：以上内容均为了解，在企业开发中均用css实现。

8.4细线表格

1.给table标签设置bgcolor="black"，cellspaceing=“1”。

2.给tr标签设置bgcolor属性为white

注意：table标签，tr标签，td标签都支持bgcolor属性

例如：

table bgcolor="black"cellspacing="1px" width="400" height="200" >    <tr bgcolor="white">        <td>jsfkl</td>        <td>sfsaf</td>    </tr>    <tr bgcolor="white">        <td>sffdfg</td>        <td>seaf</td>    </tr></table>

table专门提供了一个标题标签caption：

1.要写在table标签里面，否则无效。

2.caption一定要紧跟在table标签后面，使其标题相对表格居中。

例子：

<table  bgcolor="black" cellspacing="1px" width="600">    <caption><h2>今日小说排行榜</h2></caption>    <tr bgcolor="#faebd7">        <th>排名</th>        <th>关键词</th>        <th>趋势</th>        <th>今日热搜</th>        <th>最近七日</th>        <th>相关链接</th>    </tr>    <tr bgcolor="white" align="center">        <td>1</td>        <td align="left">凤囚凰</td>        <td>up</td>        <td>75422</td>        <td>83465767</td>        <td><a href="http://baidu.com">容止</a></td>    </tr>    <tr bgcolor="white" align="center">        <td>2</td>        <td align="left">微微一笑很倾城</td>        <td>up</td>        <td>62342</td>        <td>64114345</td>        <td><a href="http://baidu.com">贝微微</a></td>    </tr>    <tr bgcolor="white" align="center">        <td>3</td>        <td align="left">三生三世十里桃花</td>        <td>down</td>        <td>53221</td>        <td>43567534</td>        <td><a href="http://baidu.com">白浅</a></td>    </tr></table>

8.5表格分类

8.5.1表格分类

.由于表格中存储的数据比较复杂，为了方便管理和提升语义，我们可以对表格中的存储数据进行分类，分为四类：

1.表格的标题

2.表格的表头信息

3.表格的主体信息

4.表格的页尾信息

8.5.2表格的完整结构

<table>

<caption>表格的标题</caption>

<thead>

<tr>

<th>每一列的标题 </th>

</tr>

</thead>

<tbody>

<tr>

<td>每一列数据</td>

</tr>

</tbody>

<tfoot>

<tr>

<th>每一列的标题 </th>

</tr>

</tfoot>

</table>

caption作用：指定表格的标题

thead作用：指定表格的表头信息

tbody作用：指定表格的主体信息

tfoot作用：指定表格的附加信息

注意点：

1.如果我们没有编写tbody，系统会自动给我们添加tbody标签

2.如果指定了thead和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着表格的变化而变化。

8.6单元格合并

8.6.1水平方向上的单元格合并

colspan属性设置水平方向合并单元格的个数

例如：<td colspan="2"></td>

注意：

1.colspan属性：向后合并单元格。

2.由于把某一个单元格当做多个单元格来看待（水平方向），所以就会多出一些单元格，所以需要删掉一些单元格才能正常显示。

8.6.2垂直方向上的单元格合并

rowspan属性设置垂直方向合并单元格的个数

例如：<td rowspan="2"></td>

注意点：

1.rowspan属性：向下合并单元格。

2.由于把某一个单元格当做多个单元格来看待（垂直方向），所以就会多出一些单元格，所以需要删掉一些单元格才能正常显示。

例子：

<table bgcolor="black" width="500" height="300" align="center">    <tr bgcolor="white">        <td></td>        <td></td>        <td></td>    </tr>    <tr bgcolor="white">        <td></td>        <td colspan="2"  rowspan="2"></td>    </tr>    <tr bgcolor="white">        <td></td>    </tr>    <tr bgcolor="white">        <td></td>        <td></td>        <td></td>    </tr></table>

快捷键：ctrl+shift+方向键向上 ctrl+shift+方向键向下

快速移动选中的代码，上下移动

ctrl+加号键快速展开（鼠标在该行tr标签末尾任一行处展开一行）

ctrl+减号键快速展开

ctrl+shift+加号键展开选中的所有标签

ctrl+shift+减号键快速展开选中的所有标签

shift+enter 快速重启一行

九.表单标签

9.1表单标签基本概念

1.什么是表单？

就是专门用来收集用户信息的。

2.什么是表单元素？

在HTML中标签/标记/元素都是指HTML中的标签

例如：<a> a标签/a标记/a元素

表单元素其实还是HTML中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能。

9.2表单的格式？

<form>    <表单元素></form>

9.3.常见的表单标签

9.3.1 input标签

input标签有一个type属性，这个属性有很多类型的取值，取值的不同就决定了input标签的功能和外观。

value：设置默认值

text：文本

password：密码，不可见

radio:默认情况下不互斥，要想互斥需要设置name属性，且name属性值相同。checked为默认值

注意：要是多个checked属性，以最后一个checked为准。

button：按钮 value设置按钮名字

image：图片按钮 src:写上图片地址

reset：重置按钮 value设置按钮名字

submit：提交按钮 action属性：提交的服务器地址 name属性：给服务器一个独立ip地址

hiden:配合提交按钮将一些数据默认地悄悄地传给服务器

<form>    <!--value设置默认值-->    账号：<input type="text" value="小红"><br>    密码：<input type="password" value="123"><br>    性别: <input type="radio" name="sex" checked>男 <input type="radio" name="sex">女    <br>    爱好：    <input type="checkbox" checked>篮球    <input type="checkbox">足球    <input type="checkbox">乒乓球

    <br>    <input type="button" value="提交">    <!--图片按钮-->    <!--<input type="image" src="image/register.jpg" alt="123">-->    <input type="reset" value="清空">
    <input type="hidden" name="cc" value="111">
</form>

9.3.2 label标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

例如：

<form>    <label for="male">Male</label>    <input type="radio" name="sex" id="male" />    <br />    <label for="female">Female</label>    <input type="radio" name="sex" id="female" />

9.3.3 textarea 标签

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性；name属性是为了让浏览器知道你提交的文本名字。

注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。

提示：可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式。

例子：

<textarea rows="3" cols="20">在w3school，你可以找到你所需要的所有的网站建设教程。</textarea>

9.3.4 select 标签

select 元素可创建单选或多选菜单。

<select&> 元素中的 <option> 标签用于定义列表中的可用选项。

属性为：multiple可为多选

例子：

<form >    <select name="dizhi" >        <option value="sichuan">四川</option>        <option value="beijing">北京</option>        <option value="shanghai">上海</option>        <option value="henan">河南</option>    </select></form>

十.框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

注意：使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档
很难打印整张页面

10.1框架结构标签（<frameset>）

框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

编者注：frameset 标签也被某些文章和书籍译为框架集。

10.2框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：

<frameset cols="25%,75%">   <frame src="frame_a.htm">   <frame src="frame_b.htm"></frameset>

0 0