web前端--基础篇（HTML5）2

最新推荐文章于 2022-08-03 17:48:05 发布

触不可及的Allen

最新推荐文章于 2022-08-03 17:48:05 发布

阅读量315

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/Jy123_/article/details/105486945

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

web前端–基础篇（HTML5）2

文档类型<!DOCTYPE>

<!DOCTYPE html>

这句话就是告诉我们使用哪个html版本？我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

注意：一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。

字符集

<meta charset="UTF-8">

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字

BIG5 繁体中文港澳台等用

GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

HTML标签的语义化

语义化：就是指标签的含义。
好处：

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

标题、段落、水平线

注意：h1标签因为重要，尽量少用，一般h1是给logo用的。
段落标签：paragraph 段落
<p>文本内容</p>
水平线标签：horizontal 横线
<hr /> 是单标签
换行标签：break 换行
<br /> 单标签
div 、span标签
div是块元素，span是内联元素

文本格式化标签

图像标签

img 图像单标签
属性：

属性：src，属性值：URL，描述：图像路径
属性：alt，属性值：文本，描述：图像不能显示时的替换文本
属性：title，属性值：文本，描述：鼠标悬停时显示的内容
属性：width，属性值：像素，描述：设置图像的宽度
属性：height，属性值：像素，描述：设置图像的高度
属性：border，属性值：数字，描述：设置图像边框的宽度

<img src="#" width="300"   />
<标签名 属性1=“属性值1” 属性2=“属性值2” >内容</标签名>

链接标签

anchor 锚点
注意：
1.外部链接需要添加 http:// www.baidu.com

2.内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页 </a >

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

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

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。
1.使用<a href="#id">链接文本</a>
2.使用相对应的id名称标注跳转目标位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>锚点测试</title>
</head>
<body>
    <!-- 因为a标签是内联元素，所以给div包裹起来，给div设置高度5000px -->
    <div style="height: 5000px;"><a href="#mao" >点击一下</a></div>
    <p id="mao">这是点击之后会出现在这里。</p>
</body>
</html>

小知识：base标签，只能写在<head></head>

<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>

<body>
<img src="eg_smile.gif" /><br />
<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>

<br /><br />
<p><a href="http://www.w3school.com.cn">W3School</a></p>
<p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>

</body>
</html>

特殊字符标签

在这里插入图片描述

注释标签

<!-- 注释语句-->
//单行注释
/*
多行注释
*/

路径

绝对路径：“D:…”
相对路径：

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=“logo.gif” />。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src=“img/img01/logo.gif” />。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="…/logo.gif" />。

列表标签

列表标签中只能嵌套li

无序列表ul 没有顺序级别之分，是并列的。

<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
........
</ul>

有序列表ol有顺序级别之分

<ul>
<ol>列表項1</ol>
<ol>列表項2</ol>
<ol>列表項3</ol>
........
</ul>

自定义列表dl

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义列表使用</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        dt {
            font-size: 18px;
            font-weight: bolder;
        }

        dl {
            float: left;
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
            /* text-align: center;   */
        }
       
    </style>
</head>

<body>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>
    <dl>
        <dt>服务支持</dt>
        <dd>售后政策</dd>
        <dd>自助服务</dd>
        <dd>相关下载</dd>
    </dl>
</body>

</html>

表格table

创建表格

<table>
<tr>
<td>单元格内的文字
</td>

1.table 用来定义一个表格
2.tr 用来定义表格的一行
3.td 表示用来定义表格的单元格，必须嵌套在tr标签中
注意：tr标签中只能嵌套td,td标签就像一个容器，可以容纳所有元素

表格属性

属性名：border，含义：设置表格的边框（默认border=“0” 无边框），属性值：像素值
属性名：cellspacing，含义：设置单元格与单元格边框之间的空白间距，属性值：像素值，默认2
属性名：cellpadding，含义：设置单元格内容与单元格边框之间的空白间距，属性值：像素值默认1
属性名：width，含义：设置表格的宽度，属性值：像素值
属性名：height，含义：设置表格的高度，属性值：像素值
属性名：align，含义：设置表格在网页中的水平对齐方式，属性值：left、center、right