HTML
超文本标记语言
html + css + js == 结构 + 表现 + 行为
特点
（1）HTML不需要编译，直接由浏览器执行
（2）HTML文件是一个文本文件
（3）HTML文件必须使用html或htm为文件名后缀
（4）HTML大小写不敏感
HTML基本结构
head头信息网页不显示
标签
双标签<head></head>
单标签<hr/>
<title>标签即使在<body>中也不会显示。元素
标签头、内容和标签尾组成元素，头元素内包含着标题元素。
属性
语法：
<标签名 属性名1=“属性值” 属性名2=“属性值”…>…….</标签名>
<body bgcolor="grey"></body>对body可以设置颜色属性color
注释
<!-- 注释 -->例
<html>
<head>
<title>hello</title>
<meta charset="utf-8"/>
</head>
<body bgcolor="grey">
<p>Hello, HTML</p>
</body>
</html>文字和段落标签
DOCTYPE文档类型声明
为浏览器提供声明，告知浏览器文档使用的HTML规范。
- 声明必须放到HTML文档第一行
- 声明不是HTML标签
<!DOCTYPE html>
<html>
<head>
<!-- 网页头部内容 -->
<title>标题</title>
</head>
<body>
<!-- 网页主体内容 -->
</body>
</html>为浏览器提供声明，告知浏览器文档使用的HTML规范
网页编码设置
在head标签内添加
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
文档属性，属性值=文件类型，编码形式。
<meta charset="utf-8"/>国内用utf-8、GB2312居多。
文字和段落标签
标题标签
<h1></h1>
…
<h6></h6>段落标签
<p></p>align对齐属性值
| 值 | 描述 |
| left | 左对齐内容 |
| right | 右对齐内容 |
| center | 居中对齐内容 |
| justify | 对行做伸展，每行有着相等长度。 |
换行标签
<br/>换行标签在HTML任意位置使用该标签，标签后内容另起一行。
空格的代码表示
预格式化标签
预格式化标签，页面展示格式与原内容格式相同。
<pre>
………
</pre>水平线标签
<hr/>
<hr width="80%" color="#666666" noshade align="left"/>属性
| 属性 | 描述 |
| width | 宽度，可以是像素或百分比 |
| color | 颜色 |
| align | 对齐 |
| noshade | 阴影 |
修饰标签
对那些内容做修饰，就使用这些标签标记。
文字斜体：<i></i> <em></em>
加粗：<b></b> <strong></strong>
下标：<sub></sub>
上标：<sup></sup>
下划线：<ins></ins>
删除线：<del></del>例
<p><i>HTML 标记</i> 通常被称为<em>HTML 标签</em></p>
<p>HTML 标签是由<b>尖括号</b>包围的关键词</p>
<p>HTML 标签通常是成对出<br/></p>
<p>标签对中的第一个标签是<ins>开始标签</ins>，第二个标签是<del>结束标签</del></p>
<p>开始和结束标签也被称为<sub>开放标签</sub>和<sup>闭合标签</sup></p>
<p>公式：x<sup>2</sup>+x=0 解：x<sub>1</sub>=0 ; x<sub>2</sub>=-1</p>特殊符号（显示标签符号）
特殊符号
| 属性 | 显示结果 | 描述 |
| < | < | 小于，显示< |
| > | > | 大于，显示> |
| ® | ? | 注册商标 |
| © | ? | 版权 |
| ™ | ? | 商标 |
| | 空格 | 空白 |
测试
<p align="center"> 关于我们 | 招聘信息 | 联系我们 | 意见反馈</p>
<hr/>
<p align="center">Copyright ©2018 lzp.com All Rights Reserved</p>列表标签
无序列表
语法：默认小圆点
<ul>
<li>列表项</li>
<li>列表项</li>
</ul>ul属性设置
| 值（type） | 描述 |
| disc | 小圆点 |
| square | 正方形 |
| circle | 空心圆 |
<ul type="disc">
<li>HTML 指的是超文本标记语言</li>
</ul>注：有序列表和无序列表的li标签下可以嵌套！
有序列表
语法
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>type 属性设置
| 值 | 描述 |
| 1 | 数字 |
| a | 小写字母 |
| A | 大写字母 |
| i | 小写罗马数字 |
| I | 大写罗马数字 |
例
<ol type="1">
<li>HTML是超文本标记语言；</li>
</ol>定义列表
语法
<dl>
<dt>定义列表项</dt>
<dd>列表项描述.</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
</dl>- 定义标签内可以有多个dt列表项
- 对于每个dt可以有多个dd
- dt和dd是同级标签
- dd和dt不能嵌套
<dd><dt></dd>
<dt><dd></dt>
两者是错误的效果是实现自动缩进，没有序号。
列表标签的使用场景
测试工具：浏览器F12调试工具，查找器(模块对应代码，代码对应模块）
场景：
- 导航条、课程列表、新闻条目、京东图书排行榜等采用的是ul标签
- 开发中有顺序的的通常采用ol标签
- dl、dt、dd标签常用在有缩略图、摘要的位置。
- 实际开发中，ul和ol标签的编号通常会去掉，使用图片进行代替。
图像和超链接
图像标签（单标签）
语法
<img src="xxx" alt="xxx" />img 属性设置
| 属性 | 值 | 描述 |
| src（必写） | url | 链接 |
| alt | 文字 | 文本替代图像 |
| height | 像素或百分比 | 图像高 |
| width | 像素或百分比 | 图像宽 |
当由于网速太慢、src属性错误、浏览器禁用图像原因用户无法查看到图像，alt属性可以代替图像显示在页面中。
HTML路径：【路径用英文】
- 相对路径（相对于HTML文件位置）
- 绝对路径（起于盘符）
超链接标签
语法
<a href="xxx">内容</a>
内容可以是文字，图片；
href可以是站内链接（常用相对地址）或站外链接（常用绝对地址）。a 属性设置
| 属性 | 描述 |
| href | 链接地址 |
| target | 链接目标窗口 _self、_blank、_top、_parent |
| title | 链接提示文字 |
| name | 该超链接命名 |
默认（_self）是当前页面打开新的页面；_blank是创建新的窗口打开新的页面；
例
<a href="http://www.baidu.com/" title="百度">百度</a>
<a href="#" alt="imooc">imooc</a>注：#是空链接，有链接的效果，无链接的目标。
定义锚【同一页面】
同一页面内容的跳转---->name属性。跳转到锚名定义位置
<a href="#html">html目录</a>
<a href="#css">css目录</a>
<a href="#js">js目录</a><br/>
<a href="test1.html" name="html">锚点html</a><br/>
<p>html模块内容</p>
<a href="test2.html" name="css">锚点css</a><br/>
<p>css模块内容</p>
<a href="test3.html" name="js">锚点js</a>
<p>js模块内容</p>也可以仅用于定位
<a href="#html1">目录</a>
<a name="html1"></a>定义锚【不同页面】
网页1：<a href="网页名称#锚名">……</a>
网页2：<a name="锚名">…..</a>例
<a href="html2.html#js2">js2</a>
<a name="js2"></a><img src="img/js2.jpg"/>电子邮件链接
<a href="mailto:邮件地址">….</a>文件下载链接
<a href="下载文件的地址">….</a>例
<a href="mailto:[email protected]">反馈意见</a>
<a href="img.rar">文件下载</a>原文地址：https://www.cnblogs.com/lizhongpingchn/p/8460247.html
时间： 2024-11-13 07:39:43