HTML 标签语言

概念

　　超文本标记语言，是一种用于创建网页的标记语言。

ps：

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　不是编程语言，是利用标签来描述网页的。

　　扩展名：.html　　.htm

语法规范

  • 标签不区分大小写，推荐小写。
  • 双标签必须写完整（浏览器不会报错，而且自动补全，但是最终效果很大可能性影响整体布局）。
  • 不用标签形式的内容会以完整的原内容进行展示。
  • 合理的注释："<!--注释内容-->"和缩进增加代码的可读性

文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>

</body>
</html>

属性说明

　　<!DOCTYPE html>　　  声明为HTML5文档

　　<html></html>　　　　是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部(head)和主体(body)

　　<head></head>　　　  定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。

　　<title></title>　　　　  定义了网页标题，在浏览器标题栏显示

　　<body></body>　　　 之间的文本是可见的网页主体内容

标签的分类

分类一

　　自闭合标签：单标签。

　　闭合标签：双标签

分类二

　　块级标签：就是独占一行，可以自行设置宽高。ps：div，p，h1-h6。

　　内联标签：按内容占位，高度和广度是由自己的内容填充的。ps：a，br，img。

判断块级标签和内联标签的方法：

  1. 是否单独占一行（可以通过设置背景颜色去判断）。
  2. 是否可以单独为元素设置高度和宽度。

标签关系

　　标签嵌套会产生 祖先 和 后代，父子，兄弟关系。

父子关系

　　外层：父元素，内层：子元素。

　　在使用嵌套的时候，推荐使用父子结构来实现下拉菜单效果。

祖先和后代

　　外层所有元素统称为：祖先元素。

　　内层元素称为：后代元素。

兄弟关系

　　平级元素之间互为 兄弟元素。

head内的常用标签

meta

　　设置标签属性：设置字符编码。

<meta charset="utf-8">

title

　　设置网页标题。

<title>我的网页</title>

style

　　设置网页的样式。

<style></style>

link

　　引入外部样式表文件

<link />

script

　　引入外部 JS 代码用

<script></script>

body内常用标签

基本标签（内联标签）

　　内联标签不需要另起一行，以文本大小为定义大小。

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

<!--换行-->    <br />

<span></span>

基本标签（块级标签）

　　块级标签需要另起一行。

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--水平线-->　　<hr />
<div></div>
<p></p>

　　浏览器默认字体大小为 16px, 渲染的时候 小于12px 的会强制改成 12px。

　　h1 标签的字体大小为 32px，

　　h4 标签的字体大小为 16px ，

　　h6 标签的字体大小为 12px 。

　　浏览器会对代码文本中的 换行 和 多余的空格 解析成一个空格 ( 因此会导致格式不对应 )。

文本标签样式

　　默认都是左对齐，此内容可被CSS样式代替。

<h1 align="center/left/right">标题</h1>

div和span的区别

　　<div></div>：<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

　　<span></span>：<span>表示了内联行（块级元素），并无实际的意义。主要通过CSS样式为其赋予不同的表现。

ps：
　　p标签是个特异点，不可以嵌套其他块级标签，嵌套p标签也不行。

字符实体

$lt;        <
$gt;        > $nbsp;      空格
$yen;       ￥ 人民币符号
$copy;      © 版权符号

特殊标签

图片标签

<img src="图片的路径" alt=''图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高" />

ps：

　　宽高两个属性只用一个会自动等比缩放。

　　Windows下，如果 src 属性使用 绝对路径时，需要将所有的反斜线“\” 改成 斜线“/”。

　　路径要补全文件名且加后缀（不加后缀被认为是目录）。

超链接标签

<a href="跳转路径" target="跳转后打开方式">点我</a>

属性详细

  • href 属性指定目标网页地址。该地址可以有几种类型：
    • 绝对URL - 指向另一个站点（比如 href="http://www.jd.com"）
    • 相对URL - 指当前站点中确切的路径（href="index.html"）
    • 锚URL - 指向当前页面中的锚（href="#top"），取值为“#”表示当前页面
  • target 属性指定打开方式：
    • _blank 表示在新标签页中打开目标网页。
    • _self 表示在当前标签页中打开目标网页（默认为此方式）。

锚点实例

　　创建 a标签，href 加“#”表示跳转（不加“#”被识别为新链接）

　　创建 a空标签 来实现被跳转（指定内部属性 name 或者 href 为约定词）

<a href="#xxx">跳转到当前页面锚点 xxx位置</a>
<a href="abc.html#xxx">跳转到 abc.html 文件的锚点 xxx位置</a>

<!--添加锚点-->
<a name="xxx"></a>
<a href="xxx"></a>

 列表

无序（unordered list）

<ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
</ul>

type属性：

  • disc　　实心圆点（默认值）
  • circle　　空心圆圈
  • square　　实心方块
  • none　　无样式

有序（ordered list）

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

type属性：

  • 1　　数字列表（默认值）
  • A　　大写字母
  • a　　小写字母
  • Ⅰ　  大写罗马
  •  i   　 小写罗马

标题列表

<dl>
    <dt>标题1</dt>
        <dd>内容1</dd>
    <dt>标题2</dt>
       <dd>内容1</dd>
       <dd>内容2</dd> 
</dl>

表格

<table border="1">
    <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th>1</th>
            <th>zhang</th>
            <th>18</th>
        </tr>

        <tr>
            <th>2</th>
            <th>xue</th>
            <th>13</th>
        </tr>
    </tbody>
</table>

　　tr　　 定义表格行标签

　　th　　填入表格标题首行数据单元格标签，自带加粗和居中

　　td　　填入表格数据单元格标签

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄