HTML简介

最新推荐文章于 2022-02-22 21:16:38 发布

风落不归处

最新推荐文章于 2022-02-22 21:16:38 发布

阅读量627

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_43893483/article/details/105521348

版权

一、快捷键
ctrl + c 复制
ctrl + v 粘贴
ctrl+x 剪切
ctrl+tab 切换
F2 重命名
F5 刷新
ctrl+z 撤销
windows+E 打开资源管理器
windows+D 显示桌面
ctrl+空格切换中英文，严禁使用shift键切换

二、互联网的原理
访问网站时，服务器上存放着的网页相关的文件：包括html文件、css文件、js文件、图片等文件，我们的计算机对这些文件发出HTTP请求，服务器收到请求后，把这些文件通过HTTP协议，传输到我们的计算机中。
index.html是默认的首页文件。也就是说，访问index.html文件可以直接访问http://www.baidu.com/，不需要访问http://www.baidu.com/index.html。

三、HTTP初步认识
1、认识什么是纯文本文件txt
windows中自带一个记事本软件，保存格式为txt格式，英语text的缩写，术语上，称这个文件叫做纯文本文件。
例如：doc和txt存储同样的内容，doc比txt大：
因为doc文件中不仅存放了文本，还存放了样式。而txt中只有文本没有样式。
纯文本文件的特征：
1）只有文本没有样式
2）用记事本等纯文本编辑器可读，不是乱码
2、HTML是负责描述文档语义的语言
HTML：HyperTextMarkup Language的缩写，超文本标记语言。
现在的业界标准，网页技术严格的三层分离：html负责描述页面的语义；css负责描述页面的样式；js负责描述页面的动态效果。

**四、Sublime
** 1、简介
任何纯文本编辑器都能够编辑html，比如记事本、editplus、notepad++。
比较有名的专门制作网页的工具有：
DreamWeaver（Adobe公司的产品，过时了）
Sublime（高效率的程序书写工具）
WebStom（更高级的项目级别编程工具）

	**2、sublime常用快捷键**
			ctrl+滚轮							放大缩小文字
			ctrl+shift+d						复制当前行
			ctrl+shift+k						删除当前行
			ctrl+shift+上箭头				上移当前行
			ctrl+shift+下箭头				下移当前行
			输入标签的时候，只需要输入标签的名字，然后按tab就可以自动生成标签对。

**五、HTML骨架
**
1、抽象的骨架：
<html>
<head>
…
<head>
<body>
…
</body>
</html>
网页的最外层标签对是<.html>标签对，里面有两部分，分别是head和body
head标签中，描述网页配置；body中的内容，才是用户可以看见的内容。

2.完整的骨架

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”>
<title>哈哈哈</title>
</head>
<body>
<h1>我是一个主标题</h1>
<p>我是一个小段落</p>
</body>
</html>

第1行是网页的声明头，术语叫做DocType Defintion，文档类型定义，简称DTD。这行语句非常复杂，里面暗含了一个网址。W3C就是出web规范的组织机构。html、css、js规范都是W3C定义发布的。world wide web coalition：国际万维网。网页声明头可以告诉浏览器，这是一个什么标准的页面。

第2行是最大的html标签，所有的网页内容都要包裹在这个标签对里面。
html标签中有两个属性：
xmlns=“http://www.w3.org.org/1999/xhtml" 命名空间，就是一个规范
xml:lang=“en” 语言是英语

第3行，就是head标签，就是配置
第4行，<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 字符集的配置
第5行，<title>哈哈哈</title>，网页的标题，可以显示在浏览器的**标签栏**中。
第6行，body标签就是网页的内容，用户能够看见。

3.文档声明头

任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE ……开头的语句。
这一行就是文档声明头，DocType Declaration。此标签可告知浏览器文档使用哪种HTML或XHTML规范。
首先我们先确定一件事儿，我们现在学习的是HTML4.01这个版本，这个版本是IE6开始兼容的。HTML5是IE9开开始兼容的。但是IE6、7、8这些浏览器还不能过早的淘汰，所以这几年网页还是应该用HTML4.01来制作。后面将知道手机、移动端的网页，就可以使用HTML5了。

一共有6种DTD：

strict表示”严格的“，在这种模式里的要求更为严格。体现在一些标签不能使用，例如u标签（文本加下划线，和HTML的本质有冲突，因为HTML只负责语义，不负责样式。），而u这个下划线是样式，所以strict种不能使用u标签。
Transitional表示”普通的“，这种模式没有一些别的规范。
Frameset表示”框架“，在框架的页面使用。
我们学习的就是XHTML1.0中的transitional版本。因为我们的页面中偶尔要使用一些类似u这种标签（当作CSS钩子）。
sublime输入html:xt x表示XHTML，t表示tarnsitional。
HTML5中极大的简化了DTD，也就是说HTML5中没有XHTML5了。

六、HTML中head中的标签及属性
1、字符集
<meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”>
字符集用meta标签定义，meta表示”元“。”元“配置就是表示基本配置项目。
charset就是charactor set”字符集“Definitely意思。
中文能够使用的字符集有两种：
UTF-8和gb2312（gbk）。
其中，UTF-8是国际通用字库，里面涵盖了所有人类的语言文字。gb2312是国标，中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。
字库规模：UTF-8 > gb2312

我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！

我们不设置的时候默认为UTF-8。一旦更改为gb2312的时候，就要记得设置一下sublime的保存类型：文件→set File Encoding to → Chinese Simplified（GBK）
UTF-8里面存储一个汉子3个字节。而gb2312中存储一个汉子2个字节。
保存大小： UTF-8（更臃肿，加载更慢） > gb2312（更小巧，加载更快）

2、关键字和页面描述
1）设置关键字：

这些关键字，告诉搜索引擎，这个网页是干嘛的，提高搜索命中率。Keywords就是关键词的意思。
2）设置页面描述
<meta name=“Description” content=“网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。” />

3、title标签

<title>网页的标题 //网页标题显示在浏览器的标签栏
title有助于SEO搜索引擎优化，

七、HTML的基本语法特性

1、HTML对换行不敏感，对tab不敏感
HTML只在乎标签的嵌套结构，嵌套关系。换不换行和tab不影响页面结构。也就是说，HTML不依靠缩进来表示嵌套，只看标签的包裹关系。但是，良好的缩进代码更易读。要求正确缩进标签。
百度为了追求极致的显示速度，所以HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了：

2、空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格（英语的空格）显示。
代码：里面有空格、缩进、换行
<p>我爱

					          陈伟</p>
显示的时候，折叠了：
我爱	陈伟

3、标签要严格封闭，标签不封闭是灾难性的。

八、HTML中body中的标签及属性
注：标签是分等级的，分为：容器级标签、文本级标签
容器级标签，里面可以放置任何东西；文本级标签，里面只能放置文字、图片、表单元素。
1、h标签（容器级标签）
<h1>到<h6>都是标签：
<h1></h1>一级标题
<h2></h2>二级标题
…
<h6></h6>六级标题
2、p标签（文本级标签）
段落，英语paragraph“段落”的缩写。
试着把h标签放到p标签里：
<p>
2 我是一个小段落
3 <h1>我是一个主标题</h1>
</p>
我们使用Chrome的F12审查，会发现，浏览器把自己的p标签封掉了，不让你去包裹h标签。

3、img标签（图片）

（1）页面能够插入的图片类型：jpg（jpeg）、gif、png、bmp。
（2）不能往网页中插入的图片类型：psd、ai。
（3）语法：<img src="绝对路径或相对路径/图片名.图片格式" alt="巴黎结婚照"/>
		img是英语image（图片）的简写
		src是英语source（资源）的简写
		src是img标签的属性，这个标签叫做自封闭标签，也称为单标签。
		alt是英语altemate（替代）的简写，表示当这个图片无法显示的时候，出现替代的文字（有的浏览器不支持）

**4、a标签（超级链接）**文本级标签

（1）语法：<a href="绝对路径或相对路径/文件名.html  title="悬停文本"	target="_blankj"/>链接名</a>
		a是英语anchor（锚）的缩写
		href是英语hypertext	reference超文本地址的缩写
		title是悬停文本的意思，表示当鼠标移到该超级链接上显示的内容
		target是是否在新窗口中打开的意思，target="_blank"表示在不同的标签页打开，如果不写，那么就是在相同的标签页打开。

5、页面内的锚点（使用a标签实现）

（1）语法：
		锚点用name或id属性来设置，一个a标签如果有name属性（或者id属性），那么就是页面的一个锚点。
		<a name="wdzp">我的作品</a>
		或
		<a id="wdzp">我的作品</a>
		如果用超级链接指向页面中的锚点：
			<a	href="#wdzp">点击我就查看我的作品</a>
			其中#可以看作指向，wdzp是锚点名的意思。
		
	注意：比如一个段落中的所有文字都能够被点击，那么应该p包裹a，而不是a包裹p。HTML5中可以写成a包裹p但是还是会写成p包裹a。a的语义要小于p，a就是可以当作文本来处理，所以p里面相当于放的就是纯文字。
	a也能够制作能被点击的图片。

6.列表

（1）无序列表（组标签，li是一个容器级标签）
ul：unordered list，无序列表的意思。
li：list item，列表项的意思。
这是一个组标签，要么不写，要么就写一组。
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>铁岭</li>
</ul>
所有的li不能单独存在，只能包裹在ul里面，反过来说，ul的儿子不能是别的东西，只能是li
ul标签的实际应用场景：
导航条：

或
注意：li是一个容器级标签，li里面什么都能放。
（2）有序列表（组标签）
ol：order list 有序列表的意思。
li：list item 列表项的意思，容器级标签。
ol与li的关系及其用法与无序列表一致。
ol这个东西用的不多，如果想表达顺序，大家一般也用ul。
（3）定义列表（组标签、dt、dd都是容器级标签）
dl：definition list 定义列表。
dt：definition title 定义标题
dd：definition description 定义表描述词。
dt、dd只能在dl里面；dl里面只能有dt、dd。

 <dl>
	<dt>北京</dt>
	<dd>国家首都，政治文化中心</dd>
	<dt>上海</dt>
	<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
	<dt>广州</dt>
	<dd>中国南大门，有珠江、小蛮腰</dd>
</dl>
	表达的语义是两层：
	1）是一个列表，列出了北京、伤害、广州三个项目。
	2）每一个词都有自己的描述项。
	dd是描述dt用的。

真实案例：
在这里插入图片描述
<dl>
<dt>购物指南
<dd>
<a href="#">购物流程</a>
<a href="#">会员介绍</a>
<a href="#">生活旅行/团购</a>
<a href="#">常见问题</a>
<a href="#">大家电</a>
<a href="#">联系客服</a>
</dd>
</dl>
<dl>
<dt>配送方式
<dd>
<a href="#">上门自提</a>
<a href="#">211限时达</a>
<a href="#">配送服务查询</a>
<a href="#">配送费收取标准</a>
<a href="#">海外配送</a>
</dd>
</dl>

在这里插入图片描述
注：dd解释的是离他最近的dt

传智播客师资介绍页面：

7、div和span（div是容器级标签，span是文本级标签）
div和span是非常重要的标签，div的语义是division（分割）；span的语义就是span（范围、跨度）。CSS课中，将知道，这两个东西是最重要的“盒子”。
div在浏览器中，默认不会增加任何的效果改变，但是语义变了，div中的所有元素是一个小区域。
div标签是最重要的布局标签，”div+css“模式。div标签负责布局，负责结构，负责分块。css负责样式。
8、表单
表单就是收集用户信息的，让用户填写的，选择的。
form就是英语表单的意思。form标签里面有action属性和method属性，在《Ajax》课程上将会讲解。action属性就是表示表单将要提交到哪里；method属性表示用什么HTTP方法提交，有get和post两种。
<div>
<h3>欢迎注册本网站</h3>
<form>
所有的表单内容，都要写在form标签里面
</form>
</div>

9、文本框（自封闭标签）

input表示”输入“，指的是这是一个输入小部件。
type表示”类型“。
text表示”文本“，指的是类型是一个文本框的小部件。
value表示”值“，value属性就是文本框中默认被填写好的值。

10、密码框
<input type=“password” />

11、单选按钮

语法：<input type="radio" name="name属性值" checked="checked" />、

<input type="radio" name="sex"/>男
<input type="radio" name = "sex"/>女

在这里插入图片描述
相同的name属性按钮只能选择一个，互斥。
书写checked="checked"默认被选择，

12、复选框

语法：<input type="checkbox" name="name属性值"/>
复选框，可以选择多个按钮，相同类型的按钮最好也用相同的name属性值（虽然他不互斥，但也要有相同的name）。
例：

<p>
请选择你的爱好：
<input type=“checkbox” name=“aihao”/> 睡觉
<input type=“checkbox” name=“aihao”/> 吃饭
<input type=“checkbox” name=“aihao”/> 足球
<input type=“checkbox” name=“aihao”/> 篮球
<input type=“checkbox” name=“aihao”/> 乒乓球
<input type=“checkbox” name=“aihao”/> 打豆豆
</p>

例：
在这里插入图片描述
HTML5中，input类型又增加了很多（比如date、color，但是都不兼容，在HTML课程中学）。

13、下拉列表（组标签）
语法：
<select>
<option></option>
…
</select>

select就是"选择"，option”选项“。
select标签和ul、ol、dl标签一样都是组标签。

例:
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山东</option>
<option>山西</option>
<option>湖北</option>
<option>安徽</option>
</select>
在这里插入图片描述
14、多行文本域（文本域）
语法：
<textarea cols=“30” rows=“10”>默认文本</textarea>

cols属性表示columns"列",rows属性表示rows"行"，值就是一个数，表示多少列、多少行。	

text就是”文本“，area就是区域的意思。这个标签对里写的东西是多行文本域标签的默认文本内容。

例：
<p>
签名：
<textarea cols=“10” rows=“2”>123</textarea>
</p>

在这里插入图片描述
15、三种按钮
按钮也是input标签，一共有三种按钮：普通按钮（button）、提交按钮（submit）、重置按钮（reset）。
（1）普通按钮：
<input type=“button” value=“我是一个普通的按钮” />

（2）提交按钮：
<input type=“submit” />
submit就是提交的意思
在这里插入图片描述
这个按钮点击，表单会被提交到form标签的action属性中的那个页面中去。（Ajax会讲PHP，涉及MySql，Ajax课就知道表单如何提交了）。
（3）重置按钮：
<input type=“reset” />
reset就是复位的意思

注意：提交按钮和重置按钮无需给value默认值，以上图片为未给value值显示，会自动显示除提交、重置字样。

16、label标签

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

以上两个单选按钮中后的字：男、女，和单选按钮并无关系。label标签用于将按钮后的字绑定到按钮上，单击字就能够单击到按钮。
语法：
	<input type="radio" name="sex" id="boy"/><label for="boy">男</label>
	<input type="radio" name="sex" id="girl"/><label for="girl">女</label>

input元素要有一个id，label标签有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。点label后面的文字就会弹到被绑定的input标签上。
复选框也有label，什么表单元素都有label。

九、HTML杂项

1、HTML注释

2、字符实体
（1）<： <的字符实体
（2）>：>的字符实体
（3）©：©版权符号
（4）：nbsp就是non-breaking spacing不打断空格的意思，就是空格。可以防止空白折叠现象。
3、废弃标签
HTML现在只负责语义，不负责样式。但是HTML一开始，连样式也包办。
这些样式的标签都已经被抛弃。
CSS钩子：
<b></b> 加粗
<u></u> 下划线
<i></i> 倾斜
<em></em> 强调
<strong></strong> 强调
</hr> 下划线
<br/> 换行

1.行内元素
行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个
标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。
行内元素特征：
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行


块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address
等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读
性强，且便于查错。
块状元素特征：
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下

3.行内块状元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
行内块状元素特征：
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右