Html总结：

基础认知：

认识网页组成和五大浏览器，明确web标准的构成，使用HTML骨架搭建出一个网页

网页基本组成元素：图片、文字、音频、超链接、视频等组成。
网页的本质：一坨坨代码
前端的代码是由浏览器转换成网页的
五大浏览器：IE，火狐，谷歌，Safari，Opera

不同浏览器戴安显示效果可能不一样，因为渲染引擎不一样
web标准中分成三个构成：

（HTML）页面元素和内容、表现。

（css）网页元素的外观和位置等样式、行为。

（JavaScript）网页模型的定义与交互。
HTML概念：超文本标记语言
构建网页步骤：新建文本 ---> 修改后缀 txt. ---> HTML

HTML页面固定结构：

<html>
	<head>
		<title>网页的标题</title>
	</head>
    
	<body>
		网页的主体内容
    </body>
</html>

HTML骨架结构组成：网页的整体；网页的头部；网页的身体；网页的标题。

快速生成标签快捷键：

英文+tab

快速保存：ctrl+s

快速查看网页效果：alt+b

快速生成结构标签：!+tab

注释快捷键：ctrl+/

HTML标签与标签之间的关系:

		父子关系（嵌套关系）
		<head>
			<title></title>
		</head>

		兄弟关系（并列关系）
		<head></head>
		<body></body>

**标题标签：代码一般以h开头：【h1~h6】**标题独占一行

段落标签：标签名是p 特点：段落之间存在间隙；独占一行

换行标签：标签名是br（单标签）

水平线标签：标签名是hr 语义：主题的分割转换 特点：在网页中显示一条水平线

1.特殊字符**

&nbsp ; 表示一个空格 < 小于号 >大于号

&lt ; 表示小于号

&gt ; 表示大于号

2.文本格式化标签

b:加粗 strong：加粗

u：下划线 ins：下划线

i：倾斜 em：倾斜

s：删除线 del：删除线

3.盒子标签

<div>独占一行的大盒子</div>     <span>独占一格的小盒子</span>

4.图像标签

<img src=”位置/位置”/>   
src：目标图片的路径，将图片和网页放在同一个文件夹，输入名字和后缀就行

alt=”替换文本，图片加载失败才会显示的文本”

title=”鼠标放在图片上显示文字”    width(设置图像宽度)=”100px”

height(设置图像高度)=”100px”      border(设置图像边框)=”10px”

px:像素单位

以上5个标签都写在img标签后面。

5.图片相对路径的写法：

图片位于同一级路径：<img src=”图片名称” />

图片位于下一级路径：<img src=”目录/图片名”/>

图片位于上一级路径：<img src=”../图片名”。/>

网络上引进图片：<img src=”图片地址”/>

快捷键：直接敲./后会自动提示

	下级目录：文件夹名字/文件名

	上级目录：先出当前文件夹

快捷键：直接敲../后会自动提示上级目录下有文件并选择

音频标签 / 视频标签

音频标签:	<audio src = "./music.mp3"></audio>
	src: 音频的路径
	controls：显示播放的控件
	autoplay:自动播放
	loop：循环播放

视频标签：<video src="./video.mp4" controls></video>
	src：视频路径
	controls：饰品控件
	autoplay：自动播放（谷歌浏览器需要配合muted属性实现自动静音播放）
	loop：循环播放

6.超链接标签：

外部链接：<a href=”http://跳转目标,一定要写http://为开头”  target=”目标窗口的弹出方式_blank为新窗口打开，_self为默认值，直接当前窗口打开”>文本或图像</a>

内部链接：直接输入文件名就好了<a href=”网页位置”></a>

空链接：<a href=”#”>用在需要加链接但是暂时没有链接的地方</a>

下载链接：<a href=”.zip”>链接里面的是一个压缩包就会自己下载</a>

超链接：点击设置的锚点链接，可以快速跳到那个地方：

1：在链接文本的href属性值中，设置属性为#名字的形式如：<a href=”#名字1”>点击跳转</a>

1.1：找到目标位置标签，里面添加一个id=”名字1”就可以跳转了，如：<h3 id=”名字1”>跳转的地方</h3>

2：还可以实现从底部跳转至顶部的功能

7.表格标签

th表头加粗 tr：表格行 td：表格单元格

1.<table>用于定义表格的标签</table>

1-1．<tr>定义表格中的行，必须嵌套在<table>标签中</tr>
    
1-2．<td>定义表格中的单元格，必须嵌套在<tr>标签中</td>
     备注：td里面是写表格数据内容的。
    
2.<th>一般用于表头一行的加粗，嵌套在tr中</th>
    
3.<thead>用于定义表格的头部。<thead>内部一点要有<tr>标签一般位于第一行</thead>
    
3.1<tbody>用于定义表格的主体，主要用于放数据本体</tbody>
    
3.3.以上第3点系列都得放在<table>表格标签中才能生效</table>

Css属性：  cellspacing=”0”;//意思是表格单元格之间的间隙为0
    
3.5    border-collapse:collapse;//这样是表格边框合并

8.合并单元格方式

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

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

9.表格属性

属性名：a l i g n (设置字体位置)

属性值：left (左) 、 center (居中) 、right(右)

属性名：b o r d e r (设置单元内容与边框的间隙)

属性值：1 或 “”，""表示没有边框

属性名：**cell padding ( 设置单元内容与边框的间隙 ) **

属性值：像素值px

属性名： width ( 设置表格的宽度 )

属性值：像素值或百分比

10.列表标签

1. 无序列表（重点）

<ul>标签表示HTML项目页中的无序列表，该列表项目使用<li>定义标签，基本语法如下：
<ul>
<li>列表选项1</li>
<li>列表选项2</li>
…….
</ul>

1.1	无序列表的各个列表项目之间没有顺序之分，是并列的。
    
1.2	<ul>中只能嵌套<li>,直接在<ul>中输入其他标签是不允许的。
    
1.3	<li>相当于一个容器，可以容纳所有的元素。
要消除点要用link-style:none

2.自定义列表（重点）

<dl></dl>标签用于定义列表，该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用，其基本语法如下：
<dl>
  <dt>名词1</dt>
  <dd>名称1介绍 1</dd>
  <dd>名称2介绍2</dd>
</dl>
    
2.2<dl>里面只能包含<dt><dd>
    
2.3<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

3.有序列表（了解）

<ol>标签表示HTML项目页中的无序列表，该列表项目使用<li>定义标签，基本语法如下：
<ol>
<li>列表选项1</li>
<li>列表选项2</li>
…….
</ol>
2.1<ul>中只能嵌套<li>,直接在<ul>中输入其他标签是不允许的。
    
2.2<li>相当于一个容器，可以容纳所有的元素。
    
2.3.有序列表会带有自己的样式属性，但实际使用时，我们会使用CSS来设置

11.表单标签

完整的表单由：表单域、表单控件、和提示信息3个组成的

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

1.表单域 : form 用于定义表单域，来实现用户的信息和传递。具体用法如下：

<form  action=”url地址” method=”提交方式” name=”表单域名称”>

form的常用属性：

属性	属性值	作用
action	url地址	用于指定接受并表格数据的服务器程序的 url 地址
method	get/post	用于设置表单数据的提交方式，其取值为 get 或 post
name	名称	用于指定表单的名称，以区分同一页面中的表单域。

2. 表单控件（表单元素）:input

注意：表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

（注释：单标签）是输入的意思，而在表单元素中用于收集用户信息。

在中包含一个 t y p e 属性，根据不同的 t y p e 属性值，可以使输入的字段拥有很多形式。

t y p e 属性内的属性值及其描述如下：

属性值	描述
t e x t	定义单行的输入字段，用户可以输入文本，默认宽度为 20 字符。
p a s s w o r d	定义密码字段，该字段中的字符被掩码。
r a d i o	单选框按钮，实现多选 1 , （实现圆框效果）
c h e c k b o x	多选框，可以实现多选（实现方框效果）
s u b m i t	定义提交按钮，用 v a l u e 可以改提交名字
r e s e t	定义重置按钮，用 v a l u e 可以改重装名字
b u t t o n	定义点击按钮（需要配合 j s 使用）
f i le	定义输入字段和浏览按钮，供文件上传（比如上传头像）

除 t y p e 属性之外，标签还有其他属性，常用属性如下：

属性	属性值	描述
n a m e	由用户自定义	定义 i n p u t 元素的名称
v a l u e	由用户自定义	规定 i n p u t 元素的值（表单的提示）
c h e c k e d	c h e c k e d	规定此 i n p u t 元素首次加载时应当被选中
m a x l e n g t h	正整数	规定输入字段中的字符最大长度

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

1.	name表单元素的名字，要求单选按钮和复选按钮要有相同的name值。

2.	checked属性主要针对于单选按钮和多选按钮，主要作用是一打页面就要可以默认选中某个表单元素。 

3.	maxlength是用户在表单元素里输入的最大字符数，一般比较少用。

4.<label>标签为input元素定义标注（标签）</label>
label标签用于绑定一个表单元素，当点击label标签内文本时浏览器就会自动将光标转到对应的表单元素上，用来增加用户体验的一个标签。
比如:<input id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>

s e l e c t ( 下拉表单元素 )

在页面中用户有多项选择，节约空间时可以使用select标签控件定义下拉列表。

语法为：

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

注意：1.<select>中至少包含一对<option>
    
     2.在<option>z中定义selected=”selected”时，当前默认选项。

t e x t a r e a ( 文本域元素 )

使用场景：当用户输入较多内容的情况下，就可以使用标签

在表单元素中，标签用于定义多行文本的输入控件。

语法： <textarea rows=”3” cols=””20> 文本内容 </textarea> 注意：1.通过<textarea>标签可以轻松创建多行文本框 2.cols=”每行中的字符数”，rows“显示的行数”（实际开发都是用CSS来改变的，很少使用这个）

全网最全最详细HTML总结：