一、认识 WEB1.浏览器的内核2.Web标准2.1 网页中 web 标准三层组成二、HTML1.HTML初识1.1定义1.2HTML骨架标签1.3HTML标签分类1.4 HTML标签关系1.5 sublime1.6HTML标签的语义化2. HTML常用标签1.1 排版标签1）标题标签h (熟记)2）段落标签p ( 熟记)3）水平线标签hr(认识)4）换行标签br (熟记)5）div 和 span标签(重点)6）排版标签总结1.2 文本格式化标签(熟记)1.3 图像标签img (重点)1.4 链接标签(重点)1.5 注释标签1.6 拓展练习1.1锚点定位（难点）1.2base 标签1.3预格式化文本pre标签1.4特殊字符（理解）1.5什么是XHTML1.6. 路径(重点、难点)3.表格 table(会使用)3.1表格属性3.2表头3.3表格标题3.4合并单元格(难点)3.5表格划分结构（了解）3.6表格总结4.列表（重点）4.1有序无序自定义4.2列表总结5.表单(掌握)5.1input控件5.2label标签（理解）5.3textarea文本域5.4select下来列表5.5表单域三、查字典

一、认识 WEB

1.浏览器的内核

国产浏览器最新版都采用Blink内核，Chrome 浏览器之中使用Blink，其实是 WebKit 的分支。

移动端的浏览器内核主要说的是系统内置浏览器的内核。

Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。

iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari（blink）或者IE内核Trident的

2.Web标准

Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。

W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。

w3c就类似于现实世界中的联合国。

2.1 网页中 web 标准三层组成

构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

二、HTML

1.HTML初识

1.1定义

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。

标签有自己的语法规范，所有的html标签都是用 <> 表示的
H（很）T（甜）M（蜜）L（啦）是很快乐的一件事情

1.2HTML骨架标签

标签名	定义	说明
	HTML标签	页面中最大的标签，我们成为根标签
	文档的头部	注意在head标签中我们必须要设置的标签是title
	文档的标题	让页面拥有一个属于自己的网页标题
	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

[图片上传失败...(image-c68042-1635339135908)]

1.3HTML标签分类

常规元素（双标签）

<标签名> 内容  比如  我是文字

空元素（单标签）

<标签名 /> 比如

1.4 HTML标签关系

嵌套关系

2.并列关系

1.5 sublime

生成页面骨架结构
- html: 5 按下tab键或者
- ! 按下tab键
文档类型
```
 
```
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
页面语言
```
 指定html 语言种类
```
最常见的2个：
1. en定义语言为英语
2. zh-CN定义语言为中文
字符集
字符集(Character set)是多个字符的集合。
- gb2312 简单中文包括6763个汉字国标GUO BIAO
- BIG5 繁体中文港澳台等用
- GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312 国标扩展
- UTF-8则基本包含全世界所有国家需要用到的字符
- 一般情况下统一使用 "UTF-8" 编码（不是小写）

1.6HTML标签的语义化

所谓标签语义化，就是指标签的含义，根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。
当我们去掉CSS之后，网页结构依然组织有序
遵循的原则：先确定语义的HTML ，再选合适的CSS。

2. HTML常用标签

1.1 排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

1）标题标签h (熟记)

单词缩写： head 头部. 标题 title 文档标题

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题

 标题文本 

  标题文本 

  标题文本 

  标题文本 

  标题文本 

  标题文本

2）段落标签p ( 熟记)

单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词

作用语义：可以把 HTML 文档分割为若干段落，段落之间间隔较大

文本内容

3）水平线标签hr(认识)

单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl]


是单标签

4）换行标签br (熟记)

单词缩写： break 打断 ,换行，行与行之间间隔小

5）div 和 span标签(重点)

div span 是没有语义的是我们网页布局主要的2个盒子想必你听过 css+div

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

span 跨度，跨距；范围

 这是头部 

 今日价格

div标签用来布局的，但是现在一行只能放一个div
span标签用来布局的，一行上可以放好多个span

6）排版标签总结

标签名	定义	说明
	标题标签	作为标题使用，并且依据重要性递减
	段落标签	可以把 HTML 文档分割为若干段落
	水平线标签	没啥可说的，就是一条线
	换行标签
	div标签	用来布局的，但是现在一行只能放一个div
	span标签	用来布局的，一行上可以放好多个span

1.2 文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果

[图片上传失败...(image-f6b414-1635339135907)]

b 只是加粗，strong 除了可以加粗还有强调的意思，语义更强烈，其他同理

1.3 图像标签img (重点)

标签属性的格式：放在第一个尖括号内，用逗号隔开

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 
 <手机 颜色="红色" 大小="5寸">

单词缩写： image 图像

src:必须给
一般宽高只给一个

[图片上传失败...(image-71f4b6-1635339135907)]

1.4 链接标签(重点)

单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释锚, 铁锚的

语法格式：

文本或图像

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

例子：

外部链接
 百度
 内部链接
 本地主页
 尚未确定的链接
 未指定链接
 新窗口打开链接
 百度

不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接

1.5 注释标签

 快捷键是：ctrl + / 或者 ctrl +shift + /

注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

...

1.6 拓展练习

1.1锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步：

1. 使用相应的id名标注跳转目标的位置。 (找目标)
例如：

第2集

2. 使用第2集具体内容（拉关系）
例如：第2集具体内容

1.2base 标签

base 可以设置整体链接的打开状态
base 写到之间
把所有的连接都默认添加 target="_blank"

语法：

例如：

1.3预格式化文本pre标签

被包围在

标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。(现在用的少)

 
 此例演示如何使用 pre 标签 
 对空行和 空格 
 进行控制

1.4特殊字符（理解）

是以运算符&开头,以分号运算符;结尾。
他们不是标签，而是符号。
HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
Non-breaking space nbsp

[图片上传失败...(image-c3c647-1635339135906)]

1.5什么是XHTML

XHTML 是更严格更纯净的 HTML 代码。

XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。
XHTML 与 HTML 4.01 几乎是相同的。
XHTML 是更严格更纯净的 HTML 版本。
XHTML 是作为一种 XML 应用被重新定义的 HTML。
XHTML 是一个 W3C 标准。

XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。

1.6. 路径(重点、难点)

相对路径和绝对路径: 大部分情况用效果路径


 ./
 
 ../

3.表格 table(会使用)

表格不是用来布局，常用来后台展示数据，虽然 div 布局也可以做到，但是总没有表格来得方便。

创建表格的基本语法：




 ...

 ...
  单元格内的文字

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在标签内，中只能嵌套类的单元格。
字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。

3.1表格属性

表格有部分属性我们不常用，这里重点记住 cellspacing 、 cellpadding。

我们经常有个说法，是三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0

[图片上传失败...(image-f4dd11-1635339135906)]

3.2表头

th 也是一个单元格只不过和普通的 td单元格不一样，它会让自己里面的文字居中且加粗，th放在tr里面












  姓名  性别  电话  
  小王  女  110

姓名	性别	电话
小王	女	110

3.3表格标题



 我是表格标题

3.4合并单元格(难点)

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

合并单元格三步曲：

先确定是跨行还是跨列合并
根据先上后下先左后右的原则找到目标单元格然后写上合并方式，还有要合并的单元格数量比如：
删除多余的单元格单元格
















  个人简历   刘德华  男  18   照片  
  身高 180  汉族  已婚

个人简历
刘德华	男	18	照片
身高 180	汉族	已婚

3.5表格划分结构（了解）

对于比较复杂的表格，题头、正文和脚注。thead,tbody,tfoot来标注，前2个长用。

注意：

：用于定义表格的头部。用来放标题之类的东西。内部必须拥有标签！
：用于定义表格的主体。放数据本体。
放表格的脚注之类。
以上标签都是放到table标签中。






















   姓名  性别  年龄  
 
   刘德华  男  55  
 
   信息地址   北京市金燕龙校区举办演唱会

姓名	性别	年龄
刘德华	男	55
信息地址	北京市金燕龙校区举办演唱会

3.6表格总结

标签名

定义

说明

表格标签

就是一个四方的盒子

表格行标签

行标签要再table标签内部才有意义

单元格标签

单元格标签是个容器级元素，可以放任何东西

表头单元格标签

它还是一个单元格，但是里面的文字会居中且加粗

表格标题标签

表格的标题，跟着表格一起走，和表格居中对齐

clospan 和 rowspan

合并属性

用来合并单元格的

表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS 的作用。
表格的学习要求：能手写表格结构，并且能简单合并单元格。

4.列表（重点）

列表就是用来布局的，组合自由度更高

4.1有序无序自定义

无序


 列表项1

 列表项2

 

 1. 
中只能嵌套
，直接在
标签中输入其他标签或者文字的做法是不被允许的。
 2. 与
之间相当于一个容器，可以容纳所有元素。
 3. 无序列表会带有自己样式属性，但是，一般用CSS设置！

有序


 列表项1

 列表项2

 

 1. 用的少

自定义（理解）

dl ——> dt ——>dd


 名词1

 名词1解释1

 名词1解释2

4.2列表总结

标签名	定义	说明
	无序标签	里面只能包含li 没有顺序，我们以后布局中最常用的列表
	有序标签	里面只能包含li 有顺序，使用情况较少
	自定义列表	里面有2个兄弟， dt 和 dd

5.表单(掌握)

5.1input控件

属性：type, name, value, checked

当type=image时必须有src属性

[图片上传失败...(image-d1f904-1635339135906)]

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了

例子：

用户名:
密码：

用户名:

男
女

5.2label标签（理解）

当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面

2种用法：

第一种用法就是用label直接包括input表单，适合单个表单选择。

 用户名：

第二种用法 for 属性规定 label 与哪个表单元素绑定。

用户名：

5.3textarea文本域

通过textarea控件可以轻松地创建多行文本输入框，属性cols="每行中的字符数" rows="显示的行数" ，实际开发不用。

<br> 文本内容<br>

5.4select下来列表

用的少
在option 中定义selected =" selected "时，当前项即为默认选中项

5.5表单域


 各种表单控件

例子：


 
 
 Document
 
 
 
 用户名： 

 密码：

常用属性：

html

一、认识 WEB

1.浏览器的内核

2.Web标准

2.1 网页 中 web 标准三层组成

二、HTML

1.HTML初识

1.1定义

1.2HTML骨架标签

1.3HTML标签分类

1.4 HTML标签关系

1.5 sublime

1.6HTML标签的语义化

2. HTML常用标签

1.1 排版标签

1）标题标签h (熟记)

标题文本

标题文本

标题文本

标题文本

标题文本

标题文本

2）段落标签p ( 熟记)

3）水平线标签hr(认识)

4）换行标签br (熟记)

5）div 和 span标签(重点)

6）排版标签总结

1.2 文本格式化标签(熟记)

1.3 图像标签img (重点)

1.4 链接标签(重点)

1.5 注释标签

1.6 拓展练习

1.1锚点定位 （难点）

第2集

1.2base 标签

1.3预格式化文本pre标签

1.4特殊字符 （理解）

1.5什么是XHTML

1.6. 路径(重点、难点)

3.表格 table(会使用)

3.1表格属性

3.2表头

3.3表格标题

3.4合并单元格(难点)

3.5表格划分结构（了解）

3.6表格总结

4.列表（重点）

4.1有序无序自定义

4.2列表总结

5.表单(掌握)

5.1input控件

5.2label标签（理解）

5.3textarea文本域

5.4select下来列表

5.5表单域

你可能感兴趣的:(html)

2.1 网页中 web 标准三层组成

1.1锚点定位（难点）

1.4特殊字符（理解）