关于HTML的总结

html为超文本标记语言，W3C（万维网联盟）组织制定的标准

1 B/S架构原理

HTTP协议：浏览器和web服务器传消息的协议

第一步，用户在浏览器地址栏上输入URL；第二步，回车（通过浏览器向服务器发送了一个请求）；第三步，服务器会给浏览器一个响应，最终响应一段HTML代码给浏览器，浏览器对HTML代码进行执行展示一个结果

2 基本标签

<html> </html 根标签，页面中最大的标签

<head> </head> 文档的头部

<title> </title> 文档的标题

<body> </body> 文档的主体

<br/ 单标签（少见）

快捷键：ctrl+S， ctrl+”+” ，Alt+B

3 必须写的三个代码

<!DOCTYPE> 采取HTML5版本，文档类型声明标签，不属于HTML标签

<html lang="en"> 表示英文网站，zh-CN表示中文网站，fr表示法语网站，但不影响所有语言表示

<meta charset="UTF-8"> 说明字符编码方式。字符集是多个字符的集合，以便计算机能够识别和存储各种文字。Windows操作系统浏览器默认使用GBK的简体中文的方式打开，一般工作区中文件的编码方式都是UTF-8，因为unicode更加通用

4 常用标签

4.1 标题标签

<h1> - <h6> 根据重要性递减，每个标题独占一行

h元素通常和SEO优化有关系

4.2 段落标签

<p> <p>

段落之间有空隙
根据网页大小换行

4.3 换行标签

<br>打断，换行

4.4 水平分割线

<hr>

4.5 预留格式

<pre> </pre>

4.6 文本格式化标签

<strong> </strong> <b> </b> 加粗
<em> </em> <i> </i> 斜体
<del> </del> <s> </s> 删除线
<ins> </ins> <u> </u> 下划线
<sup> </sup> 右上角
<sub> </sub 右下角
<front> </front> 字体标签（属性：color，size）
<code></code>用于显示代码

4.7 盒子标签

无语义的盒子

<div> </div>表示分割，分区，用于布局，单独占一行。大盒子
<span> </span>表示跨度跨距，一行可以放多个。小盒子

4.8 图像标签

<img src="" /> 单标签，必须将被插入的文件和html文件放到一个目录下

属性：

src用于指定图像文件的路径和文件名
alt替换文本。图像不能显示的文字；屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义
title提示文本。鼠标放到图像上显示的文字
width设置图像的宽度
height设置图像的高度，宽度高度修改一个会等比缩放
border设置图像边框粗细

img支持的图片格式：.apng, .avif, .bmp, .gif, .ico, .cur, jpg, .jpeg, jfif, .pjpeg, .pjp, .png, .svg

src下的路径

相对路径

（图片相对于html页面的位置）

同一级路径 <img src="./baidu.gif" >

下一级路径 <img src="images/baidu.gif" />

上一级路径 <img src="../baidu.gif" />

绝对路径

（E:\或者网址）

4.9 超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>;

target（ self为默认值（当前窗口）， blank为在新窗口中打开方式， parent为当前窗口的父窗口， top为当前窗口的顶级窗口，内部窗口：<iframe> </iframe>）

iframe元素

利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档

frameborder属性：用于规定是否显示边框

1：显示

0：不显示

（1）外部链接：

（2）内部链接：网页之间的跳转

（3）空链接：<a href="#">文本</a>

（4）下载链接：地址链接的是.exe或.zip压缩包

（5）网页元素链接

（6）锚点链接

<a href="#two">文本</a>

<h3 id="two">文本</h3>

对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是 \

a元素的一些其他用途：

<!--下载文件-->
<a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip">HYMiniMall</a>
<!--发邮件-->
<a href="mailto:12345@qq.com">发邮件到12345qq邮箱</a>

4.10 注释标签

 “ctrl+/“

4.11 特殊字符

空格符  

< <

> >

& &

¥ ¥

® ® （注册商标）

° ° （摄氏度）

± ± （正负号）

× ×

÷ ÷

² ²

³ ³

4.12 表格标签

表格结构

<table> </table> 定义表格的标签

<tr> </tr> 定义表格中的行

<th> </th> 表头单元格，加粗居中

<td> </td> 表格中的单元格

表格属性

align：left,center,right 对齐方式

width（height）: “50%”或”300px” （像素值或百分比）

border：1或”1px” 规定是否拥有边框和线的宽度

cellspacing：规定单元格之间的空白，默认2像素（像素值）

cellpadding：规定单元边沿与其内容之间的空白，默认1像素（像素值）

结构标签

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

<thead> </thead>：用于定义表格的头部，内部必须拥有<tr>标签

<tbody> </tbody>：用于定义表格的主体

<hfoot> </tfoot>：形式和<tbody>一样

<table>
    <!-- 居中显示 -->
    <caption>股票排行</caption>
    <thead>
        <tr class="head">
            <th>排名</th>
            <th>股票名称</th>
            <th>股票代码</th>
            <th>股票价格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

table {
    // 设置表格的边框是合并的
    border-collapse: collapse;
}

合并单元格

跨行合并：rowspan=”合并单元格的个数”，最上侧单元格为目标单元格，写合并代码

跨列合并：colspan=”合并单元格的个数”，最左侧单元格为目标单元格，写合并代码

注意合并单元格之后删除多余的单元格

<table>
    <tr>
        <!-- 列合并 -->
        <td colspan="2">1-1</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
</table>

<table>
    <tr>
        <!-- 行合并 -->
        <td rowspan="2">1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td>2-2</td>
    </tr>
</table>

4.13 列表标签

无序列表

<ul> 表示html页面中项目的无序列表，其中只能嵌套<li> </li>

<li>表示列表项，<li> </li>之间相当于容器，可以容纳所有元素

属性：type：circle，square，disc

有序列表

<ol> 表示html页面中项目的有序列表，其中只能嵌套<li> </li>

<li>与无序列表中相同

属性：type：”A”，”a”，”1”，”Ⅰ”

自定义列表

常用于对名词进行解释和描述

<dl> 表示html页面中项目的定义描述列表，其中只能嵌套<dt>和<dd>

<dt> 定义项目或名字

<dd> 描述每一个项目的名字

4.14 表单标签

表单域

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

<form> 用于定义表单域，把它范围内的表单元素信息提交给服务器

属性：

action用于指定接收并处理表单数据的服务器程序的url地址
method用于设置表单数据的提交方式，其取值为get或post
name用于指定表单的名称，以区分同一个页面中的多个表单域
target在什么地方打开URL

表单控件（表单元素）

readonly和disabled都是只读的，readonly修饰的表单项可以提交给服务器，disabled不会提交
1、<input/>输入表单元素

type=”属性值”

button 定义可点击按钮（多数情况用于通过js启动脚本)，使用value属性设置按钮文字
checkbox 定义复选框
file 定义输入字段和浏览按钮，供文件上传
hidden 定义隐藏的输入字段（不希望用户在浏览器说看到，但是要提交）
image 定义图像形式的提交按钮
password 定义密码字段。该字段的字符被掩码
radio 定义单选按钮
reset 定义重置按钮。清除表单中的所有数据
submit 定义提交按钮。提交按钮会把表单数据发送到服务器
text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

radio和checkbox使用时，同类型name要保持一致

name=”名称”（定义input元素的名称），有name才能提交成功，submit按钮不能有name属性（最终提交后的网址为name=value&name=value&name=value，即提交的数据格式）

value=”内容”（规定input元素的值——未输入元素时显示的字样，也可以由用户输入提交给服务器）

maxlength=”正整数”（规定输入字段中的字符的最大长度）

readonly：只读

disabled：禁用

checked：默认被选中（type为radio和checkbox）

autofocus：当页面加载时，自动聚焦

multiple：是否允许多个值

2、select下拉表单元素（有多个选择，节约页面空间）

<select> 包含 <option>

multiple表示下拉列表多选
size表示显示多少项

在<option>中定义selected时，当前项即为默认选中项

3、textarea文本域元素

<textarea> 用于定义多行文本输入的控件（常见于留言板，评论）

语法：<textarea rows="显示的行数" cols="每行中的字符数">文本内容（默认内容）</textarea>（实际开发一般用CSS改变大小）

缩放的css设置：

禁止缩放：resize: none;
水平缩放：resize: horizontal;
垂直缩放：resize: vertical;
水平垂直缩放：resize: both;

4、button按钮

input和button后用type均可实现

普通按钮type=button

重置按钮type=reset

提交按钮type=submit

5、label表单元素的标题

label元素一般跟input配合使用，用来表示input的标题

label可以跟某个input绑定，点击label就可以激活对应的input变成选中

1 2	<label for="username">用户：</label> <input type="text" name="username" id="username">

5 全局属性

id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。

class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素；

style：给元素添加内联样式；

title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。

6 URL

URL代表统一资源定位符

◼ URL的标准格式：[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]

和URI的区别：

URI = Uniform Resource Identifier 统一资源标志符，用于标识 Web 技术使用的逻辑或物理资源；

URL = Uniform Resource Locator 统一资源定位符，俗称网络地址，相当于网络中的门牌号；

◼ URI在某一个规则下能把一个资源独一无二的识别出来。

URL作为一个网络Web资源的地址，可以唯一将一个资源识别出来，所以URL是一个URI；即URL是URI的一个子集，但是URI并不一定是URL

7 SEO

元素语义化有利于SEO

搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。