web02.HTML超文本标记语言

最新推荐文章于 2024-07-19 18:01:01 发布

qvwvq

最新推荐文章于 2024-07-19 18:01:01 发布

阅读量236

点赞数

分类专栏： WEB前端学习笔记

本文链接：https://blog.csdn.net/qvwvq/article/details/118893382

版权

WEB前端学习笔记专栏收录该内容

18 篇文章 2 订阅

订阅专栏

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)。
  - 2.HTML 标签是由尖括号包围的关键词，比如<html> 。
  - 3.封闭类型标记（也叫双标记），必须成对出现,如 <p></p> 。
  - 4.标签对中的第一个标签是开始标签，第二个标签是结束标签。
  - 5.非封闭类型标记，也叫作空标记，或者单标记，如 <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属性修改无序列表序号样式。
start属性设置序号起始值。
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;