HTML复习( 完结)

HTML

1.1 web标准

定义 ：web标准是由w3c组织和其他标准化组织指定的一系列标准的集合 w3c(万维网联盟)是国际最著名的标准化

组织 web标准用于统一同一网站由不同浏览器进行解析带来的差异。

1.2 web标准的组成

主要包括 结构 表现 行为

结构用于对网页元素进行整理和分类 代表是html

表现用于设置网页元素的版式 颜色大小等外观样式 代表是Css

行为是指网页模型的定义以及交互的编写 代表是 JavasScript

1.3 标签

1.3.1标签的关系：

嵌套和并列

具体的标签以及应用见最下面的html文件

1.3.2路径和目录

目录文件夹： 网站的程序和资源所存放的文件夹被称为目录文件夹

根目录：打开目录文件夹的第一层被称作根目录

相对路径： 以引用文件所在的位置作为参考基础，建立的目录文件夹

相对路径有 同一级路径 下一级路径 上一级路径

文件的表示方式：

同一级路径：直接用文件名表示

下一级路径: a/b/c

a为被引用文件所在的与引用文件同一级的文件夹 用/把不同级的文件分割开。

b为被引用文件所在的下一级文件夹 。c为引用文件

上一级路径 ：用..表示回退到上一级路径，其余与上两个相同

绝对路径： 是指目录下的绝对路径位置，直接到达目标位置，通常是从盘符开始的路径或网络中的地址

例如："F:\gal\clover day's plus.7z\clover day's plus\cloverdays_cn.exe"

在图片标签的引用时时可以直接使用绝对路径但本机上文件只能由本机调用，但网络上的文件可以在任意电脑中用

网络地址使用

1.3.3 链接

外部链接：规则：必须是http://加域名

内部链接： 网站内部页面之间的相互转化，内部链接的调用方式和路径中文件的调用方式相同

空链接：如果没有确定链接目标时 用#代替链接

下载链接: 地址连接的是文件，例如：exe或者是.zip

网页元素链接：表格音频图片也可做超链接，把图片音频等放进<a>的内容里即可，但也是要使用<img>等标签的

锚点链接： 点击此超链接后可以快速跳转到对应的位置 用法，给要跳转到的元素给一个id，再在需要跳转的超链

接的url给成#id ,id是你给的跳转元素id.

1.3.4 注释

html中的注释为<!-- 里面写的内容将不会解析，既不会在页面中显示-->

实际开发过程，对需要注释的内容直接ctrl加/即可快速注释

1.3.5 特殊字符

空格 ：  

小于号：<

大于号：>

和号：&

人名币号：¥

版权：©

注册商标：®

摄氏度：°

正负号：±

乘号：×

除号：÷

平方号：²

立方号：³

1.3.6 表格

表格的作用：用于展示，显示数据，增加文件的可读性。

1.3.6.1表格的常用标签：

表格： <table>

表头：<th> 表头单元格用于描述表头，比如表格的姓名，年龄性别栏，使用表头单元格时会对里面的内容加粗和

居中，可以突出其重要性。

表行：<tr>

单元格：<td>

表格的头部区域：<thead>

表格的主体部分；<tbody>

<thead> <tbody>用于对表格进行划分，对实际的显示并没有什么实际的作用。这两内部必须是<tr>

1.3.6.2表格的属性（在table标签中加入）

align:属性值可给left center right用于规定表格的位置，是放在页面的左边还是右边还是最中央。

border:属性值可给1或“” 用于规定表格单元是否拥有边框，默认为“”，既没有边框。

cellpadding:属性值给的是像素的值。规定单元边沿与其内容之间的空隙，默认是一像素。

cellspacing：属性值是像素的值是用来规定单元格之间的空白，默认是2像素

width：属性的值也是像素的值或百分比，规定表格的宽度

height:属性的值也是像素的值或者百分比，用法与width相同，只不过限制的是高度

1.3.6.3 合并单元格

跨行合并单元格： rowspan=“合并单元格的个数”

跨列合并单元格：colspan="合并单元格的个数"

合并单元格属性的目标单元格：当为跨行合并单元格时，嘴上侧的单元格为目标单元格，写合并代码

当为跨列合并单元格时，最左侧的单元格为目标单元格，写合并代码

1.3.2 列表

列表的作用：

表格是用来显示数据的，列表是用来布局数据的，列表最大的特点就是整齐，整洁，有序，它作为布局

会更加自由和方便。

列表的分类： 无序列表，有序列表，自定义列表。

1.3.2.1无序列表

列表通过<ul>标签来定义，其中的列表项使用<li>标签来定义，基本语法格式为

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

无序列表的不同列表项间没有先后顺序关系，谁放在前面，谁放在后面都可以，是并列关系。

在<ul>中只能嵌套<li>

<li>中可以放任何元素；

无序列表中会带有自己的样式，在实际使用中，我们会使用Css进行设置。

1.3.2.2 有序列表

有序列表的对应标签是<ol>内部的列表元素标签仍然是<li>

但列表元素之间有了先后顺序，由上至下

注意事项和无序列表相同，<li>的内容任然可以是任何元素

<ol>元素的内容也只能是<li>标签

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

1.3.2.3 自定义列表

作用：用于对术语或者名字进行描述和解释，定义列表项的前面没有任何的项目符号

语法格式： <dl>为自定义列表标签 主要名词标签为<dt>解释标签为<dd>

<dl>
    <dt>名词1</dt>
    <dd>解释1</dd>
    <dd>解释2</dd>
</dl>

注意点： <dl>标签的内容只能是<dt>和<dd>

<dt>和<dd>没有数量限制，往往是一个<dt>对应多个<dd>.

1.3.3 表单标签

作用：使用表单的目的是为了收集用户信息`

表单的组成: 表单域、表单控件、提示信息。

表单元素用来提交数据

提示信息用于提示表单元素需要填写什么内容

1.3.3.1 表单域

表单域是一个包含表单元素的区域

用<form>标签来定义表单域

<form action ="url地址（表单中填写的数据的提交地址）" method="表单域提交方式" name="表单域名称（用于区分不同的表单于）">

</form>

1.3.3.2 input表单元素

1 input输入表单元素 type属性：

<input type="属性值" />

input是一个单标签，可取的属性值如下

text ：文本框，用户可以输入内容例如用户名，昵称等

password：密码框，用于输入密码用该框输入数据时不会直接显示，可以一定意义上保护密码

radio：定义单选按钮，想要实现多选一，还得给选项的每个<input>标签中给予相同的name属性

checkbox ：定义复选框，不同的选项间也应该有相同的name属性，以便于区分最终选项

submit 定义提交按钮，提交按钮会把表单数据发送到服务器 通过更改value可以更改提交按钮的内容

reset :用于清除表单内的所有数据，同样更改value可以改变显示内容

button:定义可点击按钮（不会提交数据，是做某件事情，例如提交数据）同样更改value来更改显示，常与js相结

合

2 name属性

用于区分不同的表单元素，但单选框和多选框需要有相同的name

3 value 属性

value :表单中没输入时显示的值，一般用于提醒应该输入什么内容，是表单元素的默认值，在单选或多选按钮

时，给与表单元素value值，用于在后台获得所选的选项所代表的值

注意事项

name 和value是每个表单元素都要有的属性值，用于给后台人员使用

要求单选按钮和复选框都要有相同的name值

4 checked属性

利用checked属性，在页面打开时可以自动勾选拥有checked属性的单选或多选框

checked="checked"

5 maxlength属性

用于限制输入内容的字符数，属性值为正整数，比如5 就代表该表单元素最多只能输入5个字符

1.3.3.3 <label>标签

作用:<label>用于绑定一个表单元素，当用户点击该标签内的文本时，浏览器就自动将光标转到对应的表单元素

中来增加用户的体验。

使用： 在使用过程中，首先要给需要关联的表单元素一个id属性，然后给label标签的for属性相同的id值，把需要

的提示信息放在label标签的内容中

1.3.3.4 下拉表单元素

作用：如果在页面中有多个选项让用户选择，并且想要节约页面控件，我们可以使用<select>标签控件定义下拉

列表

具体使用：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
</select>

注意：

select中至少一堆option

在<option>中可以设置属性selected=“selected”可让该选项默认为选中状态

1.3.3.5 文本域标签

作用： 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时使用<textarea>标签

在表单元素中，<textarea>标签是用于定于多行文本输入的控件

属性：

cosl：规定一行可以显示多少个字

rows：规定可以显示多少行，属性的值都是正整数,rows只是规定了显示的最大行数，不代表只能写这么多行

但实际开发过程中往往是通过使用css来定义大小和样式的

使用：

<textarea rows="10">
	输入默认内容
</textarea>

写到这里就已经把html的基础知识总结完了，当然还有很多其他不是非常常见的标签没有总结，这就得靠遇到后

自己学习了，后续的html5,css ,css3，javascript也都会在学习的过程中记录博客。

完结撒花

下面是一些标签的具体应用和讲解，有些标签由于比较常见，并没有在上文提出，而是在下面使用过程中给与讲解

<!doctype html> <!--声明是html5文档 是文档声明标签-->
<html lang="zh-CN"> <!--完整的html页面 lang 表明文档的语言类型，起提示作用，用于告知浏览器，便于翻译等插件的使用-->
<head> <!--头部元素-->
<meta charset="utf-8"> <!-- 告诉浏览器以utf8形式进行编码 utf-8是可以显示中文的编码方式，被称为万国码-->
    <title> test</title> <!--网页的标题-->
</head>
<body> <!--可见页面内容-->
<h1> my first title</h1><!-- 大标题 h1-h6为大小依次减少的六个标题大小-->
<p> 段落标签结束后有换行符，段落和段落之间具有较大空隙，用换行的话没有较大的空隙</p>
<p> my first par</p> <!--段落中连续的空格和换行都会被看作为一个空格，若想用连续换行可以在元素的内容中嵌套<br/>-->
<br/>><!--换行 br是一个空元素 所以不需要结束标签。不规范的话也可写成<br>也是可以的 -->
<a href= "https://baidu.com" target="_blank"> this is a href</a>
<!-- href 为该元素的一个属性，一般在开始标签处定义
_self ：默认属性。在当前窗口或者框架中加载目标文档。

_blank ：打开新的窗口或者新的标签页。在使用这个属性时，最好添加 rel=“noopener norefferrer” 属性，防止打开的新窗口对原窗口进行篡改。防止 window.opener API 的恶意行为。

_parent ：在 frame 或者 iframe 中使用较多。在父级框架中载入目标文档，当 a 标签本身在顶层时，与 _self 相同。

_top ：在 frame 或者 iframe 中使用较多。直接在顶层的框架中载入目标文档，加载整个窗口。
-->
<a id="g" href= "https://baidu.com" target="_blank"> this is a href</a>
<!--id属性是对超链接的做一个编号，利用此编号可以对某一超链接进行修改-->
<a class="g" href= "https://baidu.com" target="_blank"> this is a href</a>
<!--
在对元素标号的过程中，除了id还可以使用class，id和classd的区别在于 class是一类，id是一个 ，多个元素可设置成一个相同的
class进行整体控制，但不同元素的id不能相同。
html中的class和id不同于c++中的struct 和class，是从上至下，从左至右进行解释编译的，html中完全可以在下文给予id或者class，在上文的head中进行样式配置
-->
<img border="15" decoding="auto" title="鼠标放在图片中提示的文字" alt="图片显示错误" src="c5589758ba3dc0fe63947e24536ec1a6e3df33c0.jpg@1256w_1654h_!web-article-pic.webp" width="1258" height="1139">
<!--
使用本地图片路径时图片文件必须和html文件放在一起
 decoding属性用于告诉浏览器用何种方式解析图像的数据
该属性可以取 sync 同步解码图像，保证与其他内容一起显示
async 异步解码图像 加快其他内容的显示
auto 默认模式，由浏览器决定那种方式更适合用
border属性用于设置图片的边框
alt属性作用为于当图像无法正常显示时，将显示alt属性中给予的文字
title属性为当鼠标放在图片上时需要显示的文字
width 和hight属性定义为图片的宽度和高度，后面的数值为像素大小，当修改其中一个时，另一个会等比例改变，当两个都发生修改时，图片按修改的数值呈现高度和宽度
-->
<a href = "#two">快速跳转</a>
<b>加粗文本</b> <!---->
<br/>
<strong  > 加粗文本</strong><!--一般使用<strong>对<b>进行替换-->
<br/>
<i>斜体测试</i>
<br/>
<em> 斜体测试</em><!--一般也使用<em>来对<i>进行替换-->
<br/>

<big> 放大</big>
<br/>
<small>缩小</small>
<sub>这是一个下标</sub>
<sup>这是一个上标</sup>
<pre> pre标签不同于 p 标签，它可以保留在元素内容中多个连续的空格和换行 例如
    这种换行。
</pre>
<code id="two"> 这块一般是用来放代码的，或其他机器可以阅读的特殊样式</code>
<kbd>定义键盘代码</kbd>
<samp>定义计算机代码样本</samp>
<tt>定义打字机代码</tt>
<ins>定义插入字</ins>
<DeL>定义删除字</DeL>
</br>
<abbr title="缩写的具体内容"> 缩写</abbr>
<address>用于定义文档的作者或者具体的联系方式</address>
<bdo dir="rt1"> 该段文字将从右到左显示</bdo>
<blockquote> 在这中间添加长引用</blockquote>
<q>在这中间使用短引用</q>
</br>
<cite>这中间定义作评如书籍歌曲电影电视节目绘画雕塑等的标题</cite>
<div> div标签是在实际构建网页过程中使用较多的一个标签 他可以理解为一个盒子，将不同类的内容区分开，并不具有什么实际的具体作用，只是作为一个分类的工具，在实际应用中往往多次嵌套 一个标签独占一行，后面不能继续写内容</div>
<br>
<span> span与div标签相同，用法也相同 div 是division的缩写，表示分割 span 表示跨距,每个div标签只能放一行，但span一行可以放很多个</span>
</br>

<form>
    <label for="name">姓名</label> <input type="text"id="name" name="name">
    <!--input标签是用来输入数据的标签，具有多种属性和对应的多种控件
    type属性：1 text 控件 表示单行文本框
             2 password 表示密码框
             3 radio 表示单选按钮
             4 checkbox 表示复选框
             5 button 表示按钮
             6 submit表示提交按钮
             7 reset 表示重置按钮
             8 image表示图像提交按钮
             9 hidden 表示影藏域
             10 file 表示文件域
    -->

    <br>
    <table >
        <tr>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>男</td>
            <td>19</td>
        </tr>
    </table>
<!--align:属性值可给left center right用于规定表格的位置，是放在页面的左边还是右边还是最中央。

border:属性值可给1或“” 用于规定表格单元是否拥有边框，默认为“”，既没有边框。

cellpadding:属性值给的是像素的值。规定单元边沿与其内容之间的空隙，默认是一像素。

cellspacing：属性值是像素的值是用来规定单元格之间的空白，默认是2像素

width：属性的值也是像素的值或百分比，规定表格的宽度

height:属性的值也是像素的值或者百分比，用法与width相同，只不过限制的是高度-->

    <!--
    form是创建一个表单的标签，
    表单用于收集用户的输入星系，html表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到web服务器
    form的属性：action 属性规定当提交表单时，向何处发送表单数据
    method method属性定义提交表单的请求方式，http协议有两种发送请求的方式，post和get
    get把参数包含在url中post通过request body 传递参数 get的安全性较低
    -->
</form>
<table cellspacing="0" cellpadding="0" border="1" width="500" height="249">
    <thead>
    <tr>
        <th >名称</th>
        <th>链接</th>
        <th>测试</th>
    </tr>
    </thead>
<tbody>
<tr>
    <td >百度</td>
    <td><a href="http://baidu.com" target="_blank">网址</a></td>
    <td>测试</td>
</tr>
</tbody>
</table>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>
<dl>
    <dt>名词1</dt>
    <dd>解释1</dd>
    <dd>解释2</dd>
</dl>
<form action="demo.php" method="post" name="name1">
    <label for="username">用户名:</label>
    <input type="text" name="username" value="请输入用户名" maxlength="7" id="username"/>
    <br/>
    密码：<input type="password" name="password" />
    <br/>
    <label for="nan" >性别：男 </label><input type="radio"name="sex"value="男" checked="checked" id="nan"/>女 <input type="radio"name="sex" value="女"/>
    <br/>
    爱好：体育<input  type="checkbox"name="hobby" value="提议"/> 阅读 <input  type="checkbox"name="hobby" value="阅读"/> 打胶<input  type="checkbox"name="hobby" value="爱好" checked="checked" />
    <input type="submit" value="点击即可注册"/>
    <br/>
    <input type="reset" value="从新设置">
    <br/>
    <input type="button" value="获取验证码">
    <br/>
    <input type="file" value="上传投降">
    <br/>
    <label for="sel">选择你的选项：</label>
    <select id="sel">
        <option selected="selected">选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
    </select>
    <br/>
    <textarea rows="10" cols="100">在此处输入你的内容</textarea>
</form>
</body>
</html>