01-HTML基本标签

01-HTML基本标签

HTML骨架

标签是由：小于号+中间字符+大于号组成的代码。

注:代码的所有字符都由英文字符组成。

作用：是给用户展示特定内容或是告诉浏览器与搜索引擎关于网页的部分信息。

注释标签： ，我们可以将一行代码的作用，含义，意图等信息写在这四个减号中间，让自己后期能够看懂之前写的什么。

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

html：声明该文档是html5版本的类型。

HTML4.01版本的文档类型定义：

XHTML版本的文档类型定义：

ang=“en”：该文档的根元素

常用lang（language）：

​ en-US/en 英语 (美国)

​ zh-CN 中文 (简体, 中国大陆）

​ zh-SG 中文 (简体, 新加坡)

​ zh-HK 中文 (繁体, 香港)

​ zh-MO 中文 (繁体, 澳门)

​ zh-TW 中文 (繁体, 台湾)

1.属性lang是英语language的缩写，意思是语言，"en"代表英语，"zh-CN"代表中文；

​ 2.其实不写lang属性，整个HTML文档的显示是没有任何问题的；

​ 3.我们都知道，如果你在中国，本地浏览器的默认语言是中文，当我们打开一个外国网站时，浏览器会提示“是否将网页内容翻译成中文”；

​ 4.搜索引擎自己无法判断自己抓取的页面中的内容是什么语言，因为在它看来都是二进制文件，那么这时就需要我们告诉它这个页面中的内容是什么语言，进而它才能知道下一步该干嘛，也就是说，当你把lang设置为"en"时，无论你网页中是什么语言的内容，在它看来都是英语，如果本地浏览器的默认语言不是英语，就会提示“是否将网页内容翻译成中文”，问您是否需要翻译。

：头部标签

meta：标记一些头部信息，描述该文档的作者，项目说明，关键词等等的一些元信息

charset=“UTF-8”：声明该文档的字符编码集是UTF-8，如果不写，会导致中文乱码(用webstrom打开) 。

gb2312（简体中文）：包括6763个汉字

BIG5（繁体中文）：港澳台等用

GBK（全部中文字符）：是GB2312的扩展，加入对繁体字的支持，兼容GB2312和BIG5

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

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

content属性值 :

​ width:可视区域的宽度，值可为数字或关键词device-width。

​ height:可视区域的高度，值可为数字或关键词device-height。

​ intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

​ maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

​ maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

​ user-scalable:是否可对页面进行缩放，no 禁止缩放。

“width=device-width” 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边。

X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的，用于指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式以此来解决部分兼容问题，在网页中，其指定的模式的优先权高于服务器中（通过HTTP Header）所指定的模式

​ 这段代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE，即edge来渲染页面。

​

：文档的主体标签，html的所有内容都要写在里面

HTML常用标签

标题标签 ：h1~h6：

段落标签：段前段后有间隙

网页中间有部分内容重要程度明显高于其他区域：比如网页标题，网页logo，新闻标题等，这些重要区域就使用h系列的标签来划分h系列标签重要度按以下顺序：h1>h2>h3>h4>h5>h6。

p标签的作用就是在网页内容中间划分出一个专门存放大段文字的区域。

水平线标签 ：hr

---

标签的属性：color=“red” 属性名=“属性值”

设置宽度的属性：width=“600px”

水平对齐方式：居右 属性：align=“right”

​

---

换行标签：按Enter不会换行，只会产生一个空格

布局标签：div：占整行

​ span：可以同行显示，宽度由其内容撑开

div标签的作用就在网页内容中间划分出若干个矩形区域，用以存放不一样的内容。

span标签的作用就是在网页内容的大段文字中间标注一行或是数行文字，并给这些文字设置一些不一样的展示效果，比如：下划线，颜色。

引用标签：长引用blockquote；短引用q

blockquote标签的作用就是：在网页内容中间划分展示大段引用自古典，古籍或是名人名言的区域。

<blockquote cite="来源地址">
        引用段落
        <p>引用段落</p>
        <p>引用段落</p>
 </blockquote>
<p>这是<q>短引用</q>信息</p>

定义预格式化文本标签：pre

被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre>
        &lt;html&gt;

        &lt;head&gt;
            &lt;script type=&quot;text/javascript&quot; src=&quot;index.js&quot;&gt;
        &lt;/script&gt;
        &lt;/head&gt;

        &lt;body&gt;
            &lt;script type=&quot;text/javascript&quot;&gt;
                a=<a href="#">aaa</a>(&quot;aaa&quot;);
                document.write(&quot;aaaaa&quot;);
            &lt;/script&gt;
        &lt;/body&gt;
        &lt;/html&gt;
    </pre>

文本格式化标签：都可以同行显示

加粗：、

strong标签的作用就是在网页内容中的某段文字中间标注出特别重要的文字。

根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 标签作为最后的选项。HTML5 规范声明：应该使用 [

-

来表示标题，使用 标签来表示强调的文本，应该使用标签来表示重要文本，应该使用 标签来表示标注的/突出显示的文本。

提示：您也能够使用 CSS font-weight属性来设置粗体文本。

斜体：、

删除线：、

下划线：、

    <!-- 文本格式化标签：都可以同行显示 -->
    <!-- 加粗 -->
	<strong>金屋妆成娇侍夜</strong><br>
	<b>玉楼宴罢醉和春</b><br>
	<!-- 斜体 -->
	<em>姊妹弟兄皆烈士</em><br>
	<i>可怜光彩生门户</i><br>
	<!-- 删除线 -->
	<del>遂令天下父母心</del><br>
	<s>不重生男重生女</s><br>
	<!-- 下划线 -->
	<ins>骊宫高处入青云</ins><br>
    <u>仙乐风飘处处闻</u><br>

图片展示标签

​ src：图片路径

​ alt：图片不能显示时的替换文本

​ title：鼠标悬停时显示的内容

​ width: 图片原始宽度

​ height：图片原始高度

相对路径三种写法：

​ ① 同一个目录下： ./指当前目录，可省略不写

​ ② 下一级目录:<img src=“images/1.jpg” 文件夹名字/>

​ ③ 返回上一级目录： 返回几级几个…/>

绝对路径：

​ ① 网页地址

​ ② 使用磁盘的根路径

视频展示标签

controls视频文件控制按钮，视频文件最好用mp4文件

<video src="" controls="controls">
        <source src="video/1.mp4" />
        <source src="video/1.ogg" />
        <p>您的浏览器不支持HTML视频播放功能。</p>
    </video>

音频展示标签

controls音频文件控制按钮，音频文件最好用mp3文件

 <audio src="" controls="controls">
        <source src="bgsound.mp3" />
        <source src="bgsound.ogg" />
        <source src="bgsound.wav" />
        <p>您的浏览器，不支持播放声音。</p>
    </audio>

链接标签

target：用于指定链接页面的打开方式，其取值有_self和_blank两种，"_self"为默认值，"_blank"为在新窗口中打开方式。

有 4 个保留的目标名称用作特殊的文档重定向操作：

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

<!-- 打开外部链接 -->
	<a href="https://hanyu.baidu.com/shici/detail?pid=3513f5e8ceba4d46932cf9a35f002905&from=kg0" target="blank">点击跳转到“长恨歌-百度百科”</a><br>
	<!-- 打开内部链接 -->
	<a href="课堂练习1.html" target="_blank">点击跳转到“课堂练习1”</a>

base标签

标签为页面上的所有链接规定默认地址或默认目标。 标签必须位于 head 元素内部。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 、、、 标签中的 URL。

在 HTML 中， 标签没有结束标签；在 XHTML 中， 标签必须被正确地关闭。

在 HTML 文档中 每出现一次，Base 对象就会被创建。

target值：

_blank：在新窗口中打开被链接文档。

_self：默认，在相同的框架中打开被链接文档。

_parent：在父框架集中打开被链接文档。

_top：在整个窗口中打开被链接文档。

framename：在指定的框架中打开被链接文档。把frame看做内置浏览器。

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

包含target属性的标签有： 。

但是标签没有 framename。

列表标签

无序列表

注意：

​ ①

中只能嵌套

• ，直接在
  标签中输入其他标签或者文字的做法是不被允许的。

  ​ ②

• 与
• 之间相当于一个容器，可以容纳所有元素。

  ​ ③ 无序列表会带有自己样式属性，放下那个样式，一会让CSS

  有序列表

  所有特性基本与ul一致。但是实际工作中，较少用ol。

  自定义列表

  定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

  <dl>
     <dt>计算机</dt>
     <dd>用来计算的仪器 ... ...</dd>
     <dt>显示器</dt>
     <dd>以视觉方式显示信息的装置 ... ...</dd>
  </dl>
  

  特殊字符标签

  <pre>
          空格符：&nbsp;
          小于号：&lt;
          大于号：&gt;
          和号：&amp;
          人民币：&yen;
          版权：&copy;
          注册商标：&reg;
          摄氏度：&deg;
          正负号：&plusmn;
          乘号：&times;
          除号：&divide;
          平方：&sup2;
          立方：&sup3;
      </pre>