[WEB前端12期内容自学]01-HTML基本标签

最新推荐文章于 2022-12-08 19:05:41 发布

紫骷髅

最新推荐文章于 2022-12-08 19:05:41 发布

阅读量320

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/liuyanjinbaobao/article/details/104730615

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML基本标签

<!DOCTYPE html><!--声明文档类型 HTML5-->
<html lang="zh-CN"><!--html的开始标签 双标签 存放网页的所有内容--><!--网页的语言是简体中文（中国大陆）-->
    <head><!--头部：存放网页上给浏览器或是搜索引擎看的信息-->
        <title>自学第一课--HTML标签</title><!--网页的名字，网页的名字会在浏览器的标签页上显示。方便用户在所搜引擎中通过搜索网页的名字找到相应的网站-->
        <meta charset="utf-8"><!--meta元信息标签--><!--网页的语言信息-->
        <meta name="keywords" content="前端的自学笔记、HTML标签">
        <meta name="description" content="紫骷髅的自学笔记01，自学第12期的01-HTML标签">
    </head>
    <body><!--身体：存放用户在网页上能够看到的内容-->
        <div></div><!--div标签-->
        <h1></h1><!--h系列标签-->
        <h2></h2>
        <h3></h3>
        <h4></h4>
        <h5></h5>
        <h6></h6>
        <ul><!--无序列表标签 在网页内容中间划分出存放大量相似内容的区域-->
            <li>hhhh</li><!--单个相似内容的区域-->
            <li>hhhh</li><!--单个相似内容的区域-->
            <li>hhhh</li><!--单个相似内容的区域-->
        </ul>
        <ol><!--有序列表标签 在网页内容中间划分出存放大量内容相似但是有先后顺序的区域-->
            <li>hhhh</li><!--单个相似内容的区域 内容顺序第1位-->
            <li>hhhh</li><!--单个相似内容的区域 内容顺序第2位-->
            <li>hhhh</li><!--单个相似内容的区域 内容顺序第3位-->
        </ol>
        <dl><!--自定义列表标签 在网页内容中间划分出存放大量结构相似无先后顺序的区域-->
            <dt>XX的优点</dt><!--里诶博爱内容1的主题名称-->
            <dd>长得帅</dd><!--对该主题名称1的解释-->
            <dd>人品好</dd><!--对该主题名称1的解释-->
            <dt>XX的缺点</dt><!--里诶博爱内容2的主题名称-->
            <dd>没有</dd><!--对该主题名称2的解释-->
            <dd>没有</dd><!--对该主题名称2的解释-->
        </dl>
        <p><!--大段文字展示之p标签-->
            话说天下大势，<span>分久必合，合久必分。</span>周末七国分争，并入于<a href="https://baike.baidu.com/item/%E7%A7%A6%E6%9C%9D/195083?fr=aladdin" target="_black">秦</a>。
            及秦灭之后，楚、汉分争，又并入于汉。汉朝自<strong>高祖</strong>斩<em>白蛇</em>而起义，一统天下，后来<i>光武中兴</i>，传至献帝，遂分
            为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即
            位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不
            密，反为所害，中涓自此愈横。
        </p>
        <span></span><!--小行文字标注之span标签-->
        <blockquote><!--大段引用文字展示之blockquote标签-->
            滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。
            <br />——调寄《临江仙》
        </blockquote>
        <img src="./images/sunyizhen.jpg" alt="孙艺珍" width="268" height="402">
        <video src="./video/1.mp4" controls="controls"></video>
        <audio src="" controls="controls"></audio>
    </body>
</html><!--html结束标签-->

1、语言集
在头部标签内用一个元标签声明字符集
（1）GB2312(GB是国标的汉语拼音的缩写，指的是国家标准的意思)，包括6763个汉字。
（2）GBK（国家标准扩展），包含21886个汉字。
（3）GB18030，包含70244个汉字。
（4）UTF-8，包含全世界200多个国家和地区的语言文字。
2、常用的lang：
（1）en-US 英语（美国）
（2）zh-CN 中文（简体，中国大陆）
（3）zh-SG 中文（简体，新加坡）
（4）zh-HK 中文（繁体，香港）
（5）zh-MO 中文（繁体，澳门）
（6）zh-TW 中文（繁体，台湾）
3、body标签
body标签内部存放用户能够看到的所有内容，包括：文字、图片、视频、音频等。
（1）目前网页布局技术总体而言可以分成三个步骤：分区域、排位置、塞内容。
（2）div标签
div标签的作用就在网页内容中间划分出若干个矩形区域，用以存放不一样的内容。
（3）h系列标签
网页中间有部分内容重要程度明显高于其他区域，比如：网页标题、网页LOGO、新闻标题等，这些重要区域就是用h系列的标签来划分
h系列标签重要度按以下顺序：
h1>h2>h3>h4>h5>h6
h1只能有一个，其他可以有多个。
（4）ul（unordered list）无序列表标签
网页中间还有一些内容相似、结构相仿、布局接近的区域，像这一类区域我们就是用无序列表来进行区域划分。
（5）ol（ordered list）有序列表标签
网页中间还有一些内容相似、结构相仿、布局接近但是每个区域的内容是有先后关系的区域，像这一类区域我们就是用有序列表来进行区域划分，这一类区域大多用在详细法律条文、政府公告、产品说明等内容上。
（6）dl（definition list）自定义列表标签
网页中间还有一些内容不完全一样、结构相仿、布局接近、每个区域的内容没有先后关系的区域，像这一类区域我们就是用有自定义列表来进行区域划分，这一类区域大多用在专业名词条目的解释，或是网页底部信息分类等内容上。
（7）p 大段文字展示之p标签
p标签的作用就是在网页内容中间划分出一个专门存放大段文字的区域。
（8）span 小行文字标注之span标签
span标签的作用就是在网页内容的大段文字中间标注一行或是数行文字，并给这些文字设置一些不一样的展示效果，比如：下划线、颜色。
（9）blockquote 大段引用文字展示之blockquote标签
blockquote标签的作用就是：在网页内容中间划分展示大段引用自古典、古籍或是名人名言的区域。
（10）strong 重要文字标注之strong标签
strong标签的作用就是在网页内容中的某段文字中间标注出特别重要的文字。
注：标签的效果与strong类似，区域在于em标签包裹的文字重要性比strong标签低，但是em标签内的文字会产生倾斜效果。
标签的效果是包裹一段文字，是被包裹的文字产生倾斜效果，但是被包裹文字的重要性不会有什么变化。
（11）a 跳转链接之a标签
href=“网页地址”：href是Hypertext Reference的缩写，意思是超文本引用，作用就是让我们可以点击网页的某些内容可以跳转到其他的网页上去。
traget=“页面打开方式”：’_black’新页面打开；’_self’默认打开方式，当前页打开。
（12）img 网页图片展示之img标签
src=“图片地址”：src是sourse的缩写，表示我们需要显示的图片文件所在的位置。
alt=“图片名称”：每个图片都是为了展示某些内容，alt里面的文字则是为了描述图片内容的。
width=“图片文件的实际宽度”：用以标注图文文件的实际高度，此处高度数据不可修改，不可因为布局需要改成其他非实际尺寸。
height=“图片文件的实际高度”：同上。
img标签的文件地址概念详解：
图片文件的地址可分为两种概念，第一：“相对路径”，第二：“绝对路径”。
src：路径写法，不能出现中文
相对路径：从本地文件（该代码所在文件的当前位置）出发寻找到目标文件
./ （当前目录）
…/ （上级目录）
…/…/ （上上级目录，以此类推）
绝对路径：
从本地：D:/project/demo/pic.jpg （这种方法禁止使用）
从网络：https://www.baidu.com/img/blabla.jpg
（13）video 网页视频展示之video标签
video标签的作用就是在网页上展示一个视频文件，这个标签页是HTML5时代的一个代表性存在
src=“视频地址”：src是sourse的缩写，表示我们需要显示的视频文件所在的位置。
controls=“controls”：这是视频文件的控制按钮区域。
（14）网页图片展示之audio标签
audio标签的作用就是在网页上展示一个音频文件，这个标签也是HTML5时代的一个代表性存在。
src=“视频地址”：src是sourse的缩写，表示我们需要显示的视频文件所在的位置。
controls=“controls”：这是音频文件的控制按钮区域。