1.HTML部分知识点

1 HTML简介

1.1 HTML概述

HTML：Hyper Text Markup Language，超文本标记语言
HTML是一种客户端浏览器解释的语言，不用经过编译

1. 2浏览器简介

　　常用浏览器：Chrome, Safari,Opera,firefox，不同的浏览器内核可能不同。浏览器的兼容性实际上我们需要做的就是内核的兼容。

1.3开发工具

　　Visual Studio Code、hbuilder等等

1.4 HTML入门程序


DOCTYPE html>

<html>
        
        <head>
                 
                 <meta charset="utf-8" />
                 
                 <title>我的第一个网页title>
        head>
        
        <body>
                 Hello World!
        body>
html>

2 HTML基本结构

2.1 HTML的基本结构

　　标记（标签）语言：将数据、媒体、文本内容以固定的层级格式排列起来的编码技术，html就是标记语言。

2.1.1文档声明

Html文档模式：

严格模式：按照当前浏览器的能支持的最高版本进行元素的渲染。

混杂模式：使用DTD限制当前浏览器按照当前某一个版本进行元素渲染。

模式的声明方式：

Html5中的声明方式如下，严格模式。

Html4的声明方式：依照定义的dtd文件格式进行html渲染，混杂模式。

Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.2 网页头信息（head）

2.2.1 title

　　声明网页的标题

2.2.2 style

　　用来内嵌css样式

<style>
    h1{
        color:blue;
        font-size: 50px;
        }
style>

2.2.3 meta

用来描述一个HTML网页文档的属性　

可以字符集，关键词，描述信息，作者，日期，时间，版权

keywords－关键字：
<meta name=“Keywords” Content="vacation,greece">

Description－简介：
<meta name="Description" Content="你网页的简述">

Author－作者：
<meta name="Author" Content="张三，abc@sina.com">

Copyright -版权
 <meta name=“Copyright” Content=“XX公司">

content-Language -显示字符集的设定
<meta http-equiv="Content-Language" Content="zh-CN">

content-Type-定义网络文件的类型和网页的编码
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">

2.2.4 link


<link rel="stylesheet" href="css/02.css" />


<link rel="icon" href="img/mi.PNG">

2.2.5 script

<script>
    alert("中软国际欢迎您！")
script>


<script src="js/myjs.js">script>

2.3 特殊字符

有时候网页上显示的一些内容需要用特殊符号表示。

<body>
    <he    llo>
 body>

2.4 注释

注释：当前程序文字描述，用于提高程序的可读性。
html注释的特点：
- 加载到客户端，从而影响网页打开速度。
- 不会被执行，不会影响加载后的执行。
- html、css、js的注释可以被第三方工具删除。
html注释的编写方式：

　　　　建议在程序开发中增加注释，提高代码的质量。

2.5 标签格式

闭合标签：由开始标签和结束标签组成，开始标签:<标签名>，结束标签

非闭合标签:只有一个开始标签,<标签名/>

2.6 共有属性

Html中的所有元素都具有以下几个属性：

class:为标签声明类名

id:标签的唯一标志，不可重复的

style:每一个标签都可以设置样式，改变显示

title:为标签设置标题，后面讲的时候注意，当鼠标移入标签，在鼠标的右下角显示出的文字

3 HTML标签

3.1显示级分类

块级元素（block）：独占一行，宽度缺省值为100%；大小,内、外边距可以调整。

总是在新行上开始。
高度，宽度可以使用css定义（如果当前元素的子元素小于或超出父元素，默认情况下也不会影响父元素的大小）。
行高以及外边距和内边距都可使用css控制。

块级元素举例：div p h1 h2 h3 h4 form ul ol dl标签等

内联元素（inline）：不可以独占一行，不可以调整大小。又称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示。

和其他元素都在一行上。
高度、宽度无法设定，即使使用css设定也不生效，高度宽度取决于子元素的高度和宽度。
行高以及外边距和内边距都无法由css控制。

内联元素举例：a b br i span 标签等

内联块元素(inline-block):不可以独占一行，但是可以调整大小。具备内联元素、块元素的一部分特点。

和其他元素都在一行上。
高度、宽度可以设定。
行高以及外边距和内边距都由css控制。

内联块举例：input、select、option等。

如果想改变显示级别，通过css的display属性设置

<span style="display: block;">span>

3.2 文本类型的标签


    <u>哈哈哈哈u><br>
    哈哈哈哈

    <em>哈哈哈哈em><br>
    <strong>哈哈哈哈strong><br>
    哈哈哈哈

    哈哈哈哈

用来显示一些长度不大的文本内容，可以理解问简短的文字的显示。其中，i，b,font,在html5中已经废弃了。

3.3 块类型的文本标签

h1-h6:表示标题文本，从大到小，加粗，外边距（本元素与其他元素之间的距离）

align：属性，水平对齐方式，left，center,right

3.4 超链接标签

点击内容，可以实现跳转。HTML 使用超级链接与网络上的另一个文档相连。（内联元素）

　　　　a链接

私有属性说明：
- href: 规定链接指向的页面的URL　
- target：规定在何处打开链接文档

相对路径：默认情况下是从当前html文件所在的目录开始
- ./当前路径　　　　　　../返回上一层路径　　　　　　 /根路径后面要项目名称才可以
绝对路径：
- 网路上的路径，访问网络资源一定要加上http协议
```
<a href="http://www.baidu.com">打开百度a>     
```

从某个盘符开始的路径　　target: 指定如何打开新的网页title:标题，当鼠标移入的时候显示
- _blank:在新的窗口中打开
- _self:在当前网页所在的框架内打开，默认的
- _parent:在父框架内显示
- _top:在最上层的框架显示
- framename:框架的某一部分,HTML5 不支持标签。
锚点(anchor)：又叫命名锚记，是网页内的超级链接，可以迅速定位当前网页的某一个位置。

　　　　点我看看

　　　　　　　　　　　↓

我是该区域的相应内容

3.5 排版类型的标签

3.5.1 P标签

　　段落标签，内部包裹一段文字，默认上下自带16px的外边距，块级元素。

3.5.2 div标签

　　块级元素，一般配合CSS一起对网页布局进行分块。div本身是无意义的，需要通过class等起有意义的名字。

3.5.3 span标签

　　内联元素，用来对非特殊样式显示的元素进行渲染。

3.5.4 dl自定义列表

　　类似定义的形式，可以写一个标题，然后对标题进行描述。

dl:自定义列表，上下具有16px的外边距
dt：自定义标题

dd：对标题的描述，左边具有40px的外边距

<dl>
        <dt>SEVENTEENdt>
        <dd>小十七dd>
        <dt>CARATdt>
        <dd>克拉dd>
dl>

3.5.5 有序列表

ol(ordered list):表示一组内容相似的，有先后顺序的数据。上下有16px的外边距，左边有40px的内边距
li:表示某一个项
type:前面标志的类型， A，a，i（小写罗马），I（大写罗马），1（默认）

start:顺序从几开始，默认从1开始

<ol type="a" start="4">
        <li>路飞li> 
        <li type = "1">索隆li>
        <li type="i">娜美li>
        <li type="I">山治li>
        <li type="A">甚平li>
ol>

3.5.5 无序列表

ul：描述一组相似的，但是不分先后顺序的数据信息，上下有16px的外边距，左边有40px的内边距
li:表示每一项

type:设置标识的样式，disc（默认实心圆），circle，square

 <ul> 
        <li>乌索普li>
        <li>布鲁克li>
        <li>弗兰奇li>
        <li type="circle">乔巴li>
        <li type="square">罗宾li>
    ul>

　　列表标签常常配合CSS一起使用，用来设置网页导航或者菜单。通常使用ul标签。

3.5.6 图片标签

　　img:用来在页面中引入图片资源，inline-block，不能独占一行，可以调整大小。

align:图片的对齐方式

src属性:设置图片的路径，相对路径
alt:当图片加载失败的时候，显示的文字
title:标题，当鼠标移入图片的时候，在鼠标下方出现的文字

3.5.7 图像映射

将一个图片划分成若干的区域，对每一个区域设置超链接。
设置img的usemap属性的值为一个map的name的值，#name的值
同时设置map标签：
Area：非闭合标签
属性：
- shape:区域的形状，rect/circle/polygon/default
- Coords：设置形状的坐标，包括x，y的位置，半径
- href:链接的地址
- alt:加载失败时显示的文字
- target:链接在什么地方加载

3.6 表单类型的标签

3.6.1 input标签

　　input标签：用于声明一组用于用户输入信息的标签。

输入类

text:文本框，type的默认值
password：密码框，内容会隐藏（以黑点显示）

hidden：隐藏框，元素不显示（用户看不见，如id）

<form>
        <input type="text" value="username" name="text" maxlength="10">
        <input type="password" value="password" name="password" maxlength="10">
form>

maxlength:限定输入字符的长度

选择类

radio：单选框，表单中name属性相同的radio，只能有一个被选中

checkbox：复选框（多选框）

<form>      
        性别:<input type="radio" name="sex" value="male" /> 男
        <input type="radio" name="sex" value="female" /> 女<br>

        爱好：<input type="checkbox" name="bike" />骑行
        <input type="checkbox" name="run" />跑步
        <input type="checkbox" name="sleep" />睡觉
    form>

checked:表示radio或者checkbox是否被选中

文件类

file:文件选择框

 <input type="file" name="file" multiple accept="image/png,image/jpeg">

multiple：设定是否可以多选
accept：设定选择文件的类型，多个类型用逗号隔开

按钮类　　

button:普通按钮
submit：提交按钮，默认行为是提交当前form表单

reset：重置按钮，默认行为是当前表单恢复到网页初始化状态

<form>
        <input type="button">
        <input type="submit">
        <input type="reset">
form>

其他：

size:输入框的宽度

readonly:只读，值不能修改

disabled:不可以用

readonly和disabled区别：

都是不能修改值。readonly仅仅是不能修改值，提交的时候还是可以提交。但是disabeld的，值不能提交

3.6.2 form标签

　　是表单元素的父容器

Action:指定提交的路径（通常是服务端的servlet）
Method:提交方式，常用get默认，post，delete，put
Get和post的区别：
- 目的不同：get通常用来从服务端获取数据，post向服务端提交数据
- 提交方式不同:get放在请求头，post放在请求体中
- 安全性：get会将数据显示在地址栏，不安全，post不会显示在地址栏，相对安全
- 大小不同：get提交长度限制，255个字符，post长度理论上不受限制
- 数据缓存：get缓存，post不缓存
Get在地址栏的显示：

路径?name1=value1&name2=value2&name3=value3....

关于提交方式：post提交只有在表单中，method设置为post提交才可以，其他没有指明的都是get提交。包括直接在地址栏输入地址
- Enctype:规定在将数据提交到服务端之前进行的编码
- Target: 指定提交的路径在哪打开，同a标签的target
共有属性：class,id
点击提交按钮，默认就会跳转action指定的路径，这个是表单的默认行为。

3.6.3 按钮标签

3.6.4 textarea文本域

写多行文本

Cols:列

Rows:行

Readonly:只读

3.6.5下拉列表

Select:下拉列表
- Name:用于提交
- Multiple:可以多选
- Size：大小
子标签:option:每一项
- Value:值
- Selected:表示该项是否被选中
- Optgroup:将某些option设置为一组，label为该组起个标题
- 在里面写option，最终提交的一定是option的值

3.6.6 fieldset标签

将表单内的某些元素设置成一个子集合
子标签：设置自己和的标题
在fieldset中写常规的表单标签。
Label标签：for属性的值是一个表单元素的id值，两个就关联起来了。

3.7 iframe框架

在当前网页中引入其他的网页显示
Src:引入的文件的路径
Width:宽度
Height:高度
Scrolling:是否出现滚动条，yes，no，auto
Frameborder:框架的边框0,1 0表示没有，1表示有
Align:和img的align相同,既表示垂直对齐，也表示float。

span

div

3.8 表格标签

　　表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1td>
<td>row 1, cell 2td>
tr>
<tr>
<td>row 2, cell 1td>
<td>row 2, cell 2td>
tr>
table>

属性：border,边框；Width:宽度；Height：高度

Align:表格相对它父元素的水平对齐方式，left center right

Cellspacing:单元格之间的距离

Cellpadding:单元格内容与其边框之间的距离

Bgcolor:设置背景颜色

Background:背景图片，背景图片的优先级高于背景颜色

子标签：

tr:行，放在table内
d:代表列，放在tr内
- Colspan:合并列，写在被合并的td的最左边的一个
- Rowspan：合并行，写在被合并的td的最上面的一个

Caption:为表格设置标题，直接写在table内

thead:表头，写在table内，里面tr,td
Tbody:表格的主体，写在table内，里面tr,td
Tfoot:表格的尾部，写在table内，里面tr,td
Th:列标题

3.9 HTML的语义化

3.9.1什么是语义化？

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
为什么要语义化(优点)
- 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
- 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
- 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3.9.2 HTML语义化的注意事项：

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

3.9.3 XHTML-CSS编写建议：

所有的html代码小写；
属性的值一定要用双引号(“”)括起来，且一定要有值；
每个标签都要有开始和结束，且要有正确的层次；
空元素要有结束的tag或于开始的tag后加上“/”;
表现与结构完全分离，代码中不涉及任何的表现。
给重要的区块加上注释；
给图片加上alt属性；

web前端