首页 > 其他分享> > web02.HTML超文本标记语言

web02.HTML超文本标记语言

2021-07-19 13:01:34 作者：互联网

web02.HTML超文本标记语言

1. HTML概述

1.1. HTML介绍

是Hypertext Markup Language（超文本标记语言）的缩写
是一种基于SGML（标准通用标记语言）的标记语言
是Web用于编辑网页的主要工具
由蒂姆•本尼斯李（Tim Berners-Lee）于1989年在CERN研制出来
是标准通用标记语言下的一个应用。
HTML的标准由W3C负责开发和制定，W3C即万维网联盟

1.2. HTML版本

1.2.1. HTML版本
- HTML 1.0——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）；
- HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时；
- HTML 3.2——1996年1月14日，W3C推荐标准； HTML 4.0——1997年12月18日，W3C推荐标准；
- HTML 4.01——1999年12月24日，是在HTML4.0基础上的微小改进，W3C推荐标准；
- HTML 5 的第一份正式草案已于2008年1月22日公布,仍继续完善。
1.2.2. HTML、XHTML、XML有什么区别？
- HTML(超文本标记语言): 在 html4.0 之前 HTML 先有实现再有标准，导致 HTML 非常混乱和松散。
- XML(可扩展标记语言): 主要用于存储数据和结构，JSON作用类似，但更加轻量高效。
- XHTML(可扩展超文本标记语言): 基于以上两者而来。
1.2.3. HTML的特点
- 简易性。
- 可扩展性。
- 平台无关性。

1.3. 使用HTML编写第一个网页

1.3.1.<!DOCTYPE>的作用
- DOCTYPE是document type (文档类型) 的缩写。
- 声明位于文档的最前面，处于标签之前，它不是html标签。
- 主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。
1.3.2.删除<!DOCTYPE>会发生什么
- 在W3C标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异。这种渲染方式叫做混杂模式。
- 在W3C标准出来之后，浏览器对页面的渲染有了统一的标准，这种渲染方式叫做标准模式。
- 不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给了浏览器，有多少种浏览器就有多少种展示方式。因此要提高浏览器兼容性就必须重视
1.3.3.严格模式和混杂模式
- 浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关。------DTD:告知浏览器按照什么版本去解析HTML页面。
- DTD文档模型=DOCTYPE=DOCTYPE文档声明
- 严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面。
- 混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。
1.3.4.常见的DOCTYPE声明
- HTML5
  - <!DOCTYPE html>
- HTML 4.01 Strict
  - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitional
  - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset
  - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- XHTML 1.0 Strict
  - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- XHTML 1.0 Transitional
  - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- XHTML 1.0 Frameset
  - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- 1.3.5.什么是标签?
  - 1. HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
  - 1. HTML 标签是由尖括号包围的关键词，比如<html> 。
  - 1. 封闭类型标记（也叫双标记），必须成对出现,如 <p></p> 。
  - 1. 标签对中的第一个标签是开始标签，第二个标签是结束标签。
  - 1. 非封闭类型标记，也叫作空标记，或者单标记，如 <br/>。
- 1.3.6. HTML属性
  - 属性是用来修饰元素的，属性必须位于开始标签里，一个元素的属性可能不止一个，多个属性之间用空格隔开，多个属性之间不区分先后顺序。
  - 每个属性都有值，属性和属性的值之间用等号链接，属性的值包含在引号当中，属性总是以名称/值对的形式出现。
  - 1.3.7. head标签
    - Head标签用于定义文档的头部，它是所有头部元素的容器。
    - <head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表
    - 描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等
  - 1.3.8.title标签
    - 1.可定义文档的标题。
    - 2.它显示在浏览器窗口的标题栏或状态栏上。
    - 3.当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。
    - 4.<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title，不是说其它的不加，而是title一定要加。
    - 5 title写和你网页相关的关键词有利于SEO优化。

2. HTML头部标签

2.1.HTML头部标签介绍

HTML头部标签head中可以包裹很多的标签，它更像是一个容器，可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等。

2.2. HTML头部标签包含的内容

<title>...</title> 标签：标题定义文档的标题
<base/> 标签：a链接的公用属性
<meta> 标签：元数据标签
<link>标签：CSS样式引入标签
<script> 标签：JS引入标签

2.3.HTML常用的头部标签和作用

<meta charset='utf-8'> 
<meta name="descirption" content="不超过150个字符"> 
<meta name="keywords" content="VPN"> 
<meta name="author" content="name,email@gmail.com"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Refresh" content="5;url=xxx"/> 
<meta name="renderer" content="webkit"> 
<base target="_blank"/> <!-- 设定页面中链接都在新窗口打开，默认_self（在相同框架中打开）

3. 标题和段落标签

3.1. HTML标题标签

是通过 <h1> - <h6>标签来定义的。
功能：HTML标题标签的功能就是将网页上的重点部分标出来。
标题很重要确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
思考：h7标签的效果是什么？ h0标签的效果是什么？答案：会被浏览器默认解析，不会报错。

3.2. HTML段落标签

是通过标签 <p> 来定义的。
功能: 修饰段落、自动换行
思考：HTML 段落标签有换行的功能，如何不使用段落标签也进行换行呢？答案：使用<br/> 标签自动换行。思考：为什么不能直接通过回车键Enter在网页中换行？或者通过空格进行页面排版呢？答案：我们无法确定 HTML 被显示的确切效果。

4. HTML超链接标签

4.1.超链接介绍

通过标签 <a></a> 来定义的
功能：使用超级链接与网络上的另一个文档相连。

4.2.超链接语法

在 <a href=""></a> href 属性中指定链接的地址。
- href属性：href是a标签的基本属性，定义连接的目标；
- target属性：该属性是使用来定义在何处打开连接，可能的值有：
- _blank：另起一个窗口打开新网页；
- _self：在当前窗口打开新的网页链接（默认）;
- name 属性用于指定锚的名称。
- rel 属性用于指定从源文档到目标文档的关系。
- rev 属性用于指定从目标文档到源文档的关系。

5. 绝对路径和相对路径

5.1.路径介绍

当我们需要加载文件的时候就会用到路径的知识，我们要确定文件的位置，然后通过路径加载它。

5.2.绝对路径

完整的描述文件位置的路径就是绝对路径。

5.3.相对路径

<img src="./lujing.jpg">
- /代表在文件夹下。
- ./代表的就是当前目录。
- …/代表的就是上级目录。
- …/…/代表的是上上级目录。

6. HTML图像标签

6.1.`<img>` 标签创建的是被引用图像的占位空间。

6.2.`<imgsrc="./img.jpg" alt="Logo" width="300px" height="300px" >`

src属性：规定显示图像的 URL也就是路径地址。
alt属性：规定图像的替代文本在图像不能加载的时候替代的文字。
width属性：设置图像的宽度。
height属性：设置图像的高度。

6.3.src和href的区别

src需要等待图片加载完成，在继续加载其他内容。
href可以一边加载文件，一边加载其他内容。

6.4.div标签包裹img标签多出3px问题

在我们使用div标签包裹img标签的时候，在图片的底部就会多出3px。原因：img元素会默认添加空白符
解决办法：
- 1.设置div{ font-size: 0}
- 2.设置img{ display: block}或者{ display: table}
- 3.设置img{ vertical-align:top;}
- 推荐第二种方法，让img对象成为块级元素。

7. 文本格式化标签

7.1. 常用的文本格式化标签

<b>...</b> 加粗标签
<i>...</i> 斜体标签
<u>...</u> 下划线标签
<del>...</del> 删除线标签
<sub>...</sub> 下标标签
<sup></sup> 上标标签
<br/> 换行标签
<hr/> 分割线标签

7.2. HTML “计算机输出” 标签

<code></code> 定义计算机代码
<kbd></kbd> 定义键盘码
<samp></samp> 定义计算机代码样本
<var></var> 定义变量
<pre></pre>定义预格式文本

8. HTML表格标签

8.1.HTML表格介绍

表格由 <table> 标签来定义。
表格的行由 <tr> 标签定义。
表格的列由 <td> 标签定义。

8.2. 表格标签的语法

th属性元素定义表头
tr属性元素定义表格行
td属性元素定义表格列
width属性设置表格宽度
height属性设置表格高度
bordercolor属性设置表格边框颜色
bgcolor属性设置表格的背景颜色
background属性设置表格背景图像
align/valign属性设置表格对齐方式
cellspacing属性设置单元格间距
cellpadding属性设置单元格行距
colspan属性表示该单元格向右跨越的列数
rowspan属性表示该单元格向下跨越的列数

8.3.表格标签的使用方法

在网页中定义了宽度为400像素的表格，边框粗细为1像素，颜色为蓝色，第一行第一个单元格的宽度为200像素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
    <body>
<!--表格-->
<table border="1"cellspacing="0" cellpadding="0" width="400"
height="400" bordercolor="red" align="center">
<caption>
<h4>学生信息表</h4>
</caption>
<tr bgcolor="green">
<td align="center" valign="top">姓名</td>
<td align="right" valign="bottom">性别</td>
<td align="right" valign="bottom">年龄</td>
</tr>
<tr>
<td align="left" valign="middle">张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td align="left" valign="middle">李四</td><td>25</td>
<td>女</td>
</tr>
<tr>
<td align="left" valign="middle">王五</td>
<td>36</td>
<td>男</td>
</tr>
</table>

9.HTML列表标签

9.1.HTML有序列表

1.有序列表，就是有顺序的列表，即列表前面带个123或abc。标签为 <ol>...</ol>。
2.type属性修改有序列表序号样式。
3.strat属性设置序号起始值。
type属性的具体取值及说明
- 数字列表：<ol type="1">
- 字母列表：<ol type="A">
- 小写字母列表：<ol type="a">
- 罗马字母列表：<ol type="I">
- 小写罗马字母列表：<ol type="i">

9.2.HTML无序列表

无序列表需使用无序列表标记符 <ul></ul>和列表项标记符 <li></li> 。
type属性修改无序列表序号样式。
strat属性设置序号起始值。
type属性的具体取值及说明
- Disc 项目符号列表：<ul type="disc">
- Circle 项目符号列表：<ul type="circle">
- Square 项目符号列表：<ul type="square">

9.3.自定义列表

自定义列表以 <dl>标记开始，自定义列表项目以<dt>开始，自定义列表的解释以 <dd> 开始
- <dl><dd>列表解释</dd><dt>列表项目列表项目</dt><dt>列表项目列表项目</dt><dt>列表项目列表项目</dt></dl>

10.表单标签

介绍

表单是HTML中重要组成部分，是网页提供的一种交互式操作手段，主要用于采集和提交用户输入的信息

表单语法

<form name="formName" method="post/get" action="url" ></form>
- name属性表单名称
- method属性表单发送的方式，可以是"post"或者"get"
- action属性表单处理程序提交地址
- enctype属性表单编码方式
input标记的type属性值及描述
- text 文本框
- password 密码框
- file 文件框
- checkbox 复选框
- radio 单选框
- button 普通按钮
- reset 重置按钮
- submit 提交按钮
- image 图像域
- select 下拉框
- option 列表项
- textarea 文本域
- hidden 隐藏域
- value 默认值
- size 表单大小
- readonly 只读属性
- disabled 禁用属性
- placeholder H5提示信息

11.HTML区块元素

11.1.介绍：大多数 HTML 元素被定义为块级元素或内联元素。

11.2.HTML区块元素形式

能够换行的标签都是块级元素
- <div></div>``<p></p> ;
- address - 地址* blockquote - 块引用
- center - 举中对齐块* dir - 目录列表
- div - 常用块级容易，也是css layout的主要标签
- dl - 定义列表* fieldset - form控制组
- form - 交互表单（只能用来容纳其它块元素）
- h1 - 大标题* h2 - 副标题* h3 - 3级标题
- h4 - 4级标题* h5 - 5级标题* h6 - 6级标题
- hr - 水平分隔线* isindex - input prompt
- menu - 菜单列表* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
- noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）* ol - 排序表单* p - 段落
- pre - 格式化文本* table - 表格* ul - 非排序列表
不能换行的标签都是块级元素
- <span></span> <b></b>
  b, big, i, small, tt
  abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
  a, bdo, br, img, map, object, q, script, span, sub, sup
  button, input, label, select, textarea
块元素和行内元素的区别
- 1.块级元素会独占一行，其宽度自动填满其父元素宽度
  
  行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，
- 2.一般情况下，块级元素可以设置width,height属性，
  
  行内元素设置width,height无效
  
  （注意，块级元素设置了width宽度属性后仍然是独占一行的）
- 3.块级元素可以设置margin,padding属性
  
  行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果

12.HTML CSS实体字符

12.1. HTML CSS介绍

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式，当特殊的样式需要应用到个别元素时，就可以使用内联样式。

12.2. HTML字符实体使用

HTML 中的预留字符必须被替换为字符实体。
如：在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

空格 &nbsp;
< 小于号 &lt ;
> 大于号 &gt ;
& 和号 &amp;
" 引号 &quot;
￠ 分（cent） &cent;
¥ 元（yen） &yen;
© 版权（copyright） &copy;
® 注册商标 &reg;
× 乘号 &times;
÷ 除号 &divide;

标签：标签,元素,列表,HTML,文档,web02,超文本,属性
来源： https://blog.csdn.net/qvwvq/article/details/118893382

web02.HTML超文本标记语言

web02.HTML超文本标记语言

1. HTML概述

1.1. HTML介绍

1.2. HTML版本

1.3. 使用HTML编写第一个网页

2. HTML头部标签

2.1.HTML头部标签介绍

2.2. HTML头部标签包含的内容

2.3.HTML常用的头部标签和作用

3. 标题和段落标签

3.1. HTML标题标签

3.2. HTML段落标签

4. HTML超链接标签

4.1.超链接介绍

4.2.超链接语法

5. 绝对路径和相对路径

5.1.路径介绍

5.2.绝对路径

5.3.相对路径

6. HTML图像标签

6.1.<img> 标签创建的是被引用图像的占位空间。

6.2.<imgsrc="./img.jpg" alt="Logo" width="300px" height="300px" >

6.3.src和href的区别

6.4.div标签包裹img标签多出3px问题

7. 文本格式化标签

7.1. 常用的文本格式化标签

7.2. HTML “计算机输出” 标签

8. HTML表格标签

8.1.HTML表格介绍

8.2. 表格标签的语法

8.3.表格标签的使用方法

9.HTML列表标签

9.1.HTML有序列表

9.2.HTML无序列表

9.3.自定义列表

10.表单标签

介绍

表单语法

11.HTML区块元素

11.1.介绍：大多数 HTML 元素被定义为块级元素或内联元素。

11.2.HTML区块元素形式

12.HTML CSS实体字符

12.1. HTML CSS介绍

12.2. HTML字符实体使用

6.1.`<img>` 标签创建的是被引用图像的占位空间。

6.2.`<imgsrc="./img.jpg" alt="Logo" width="300px" height="300px" >`