HTML标签

最新推荐文章于 2024-09-14 08:09:14 发布

!flameking

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量176

点赞数 4

分类专栏：前端开发技术文章标签： html

本文链接：https://blog.csdn.net/qq_48299903/article/details/119304758

版权

前端开发技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

学习HTML，主要就是学习标签。

静态页面组成元素

文字
图片
超链接
音频和视频

HTML结构

<!DOCTYPE html> <!-- 定义文档类型 默认为html5 必须在文档第一行 -->
<html lang="en"> <!-- lang表示语言，lang="en"：英文，lang="zh-CN":中文 -->

<head>
    浏览器解析的特殊内容(定时刷新，网页标题，外部文件)
</head>

<body>
    网页的主体内容
</body>

</html>

标签大小写不敏感
标签格式
- 双标签：<标签名> 封装数据 </标签名> 常常可以插入其他标签
- 单标签：<标签名/>，如meta标签，br标签，hr标签，link标签，img标签和input标签等等。 不可以插入其他标签
标签分类
- 块标签：如标题标签，p标签，div标签，hr标签，ol标签，ul标签等等
  在浏览器的显示效果中独占一行，并排斥其他标签效果与其位于同一行。块标签内部可以容纳其他块标签和行内标签同时可以设置width和height
- 行内标签：如strong标签，em标签，a标签，span标签等等 可容纳其他行内标签，但不可以容纳块标签，同时不可以设置width和height

标签拥有自己的属性

基本属性 可以修改简单的样式

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<!-- bgcolor表示背景颜色 -->
<body bgcolor="blue">
</body>
</html>

事件属性 直接设置事件响应后的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<!-- onclick表示单击(点击)事件
     alert是JavaScript提供的一个警告框函数
     可以接受任意参数，参数就是警告框提升信息 -->
<body οnclick="alert('卧槽')">
请点击这里
</body>
</html>

head标签的子标签

title标签浏览器栏目标题

meta标签定义页面特殊信息供搜索引擎分析页面关键词，页面描述信息

- 属性
    - name
        ```html5
        <!-- 网页关键词 -->
        <meta name="keywords" content="前端开发,html+css"/><!DOCTYPE html>
        
        <!-- 网页描述 -->
        <meta name="description" content="学习前端技术"/>

        <!-- 本页作者 -->
        <meta name="author" content="flameking"/>

        <!-- 版权声明 -->
        <meta name="copyright" content="本站内容为原创,版权所有，禁止转载。否则必将追究法律责任。"/>
        ```
    - http-equiv
        - 网页使用编码
            ```html5
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
            <!-- 简写形式 -->
            <meta charset="utf-8"/>
            ```
        - 网页自动刷新跳转
            ```html5
            <!-- 当前页面在6秒后会自动跳转到http://www.*.com下 很多广告网站就是用这种方法实现页面定时跳转的 -->
            <meta http-equiv="refresh" content="6;url=http://www.*.com"/>
            ```

link标签用于引入外部样式文件(CSS文件)

style标签用于定义CSS样式

script标签用于定义页面JavaScript代码，也可用于引入外部JavaScript文件

base标签没啥实际应用的标签

body标签内的常用标签

标题标签 h系列标签：h1~h6

```html5
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

</body>
</html>
```

段落标签

- *会自动换行*
```html5
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>古诗词</title>
</head>
<body>
    <h1>爱莲说</h1>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
    <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣。</p>
</body>
</html>
```

换行标签

```html5
<br/>    
```

文本标签

- 粗体标签
    ```html5
    <strong>粗体</strong>
    ```
- 斜体标签
    ```html5
    <!-- 有三种表达 -->
    <i>斜体</i>
    <em>斜体</em> <!-- 因为语义性好，更常用-->
    <cite>斜体</cite>
    ```
- 上标标签
    ```html5
    <p>
        2<sup>2</sup>=4
    </p>
    ```
- 下标标签
    ```html5
    <p>
        H<sub>2</sub>SO<sub>4</sub>
    </p>
    ```
- 中划线标签
    ```html5
    <s>中划线</s>
    ```
- 下划线标签
    ```html5
    <u>下划线</u>
    ```
- 大字号和小字号标签
    ```html5
    <p>普通文本</p>
    <big>大文本</big><br/>
    <small>小文本</small>
    ```

水平线标签

```html5
<hr/>
```

特殊符号

- 空格      &nbsp;
- 版权符    &copy;
- 注册商标  &reg;

div标签

- 语法
    ```html5
    <div></div>
    ```
- 划分HTML结构，配合CSS来整体控制某一块的样式
- 可以放入绝大多数其他标签，如p标签，strong标签，hr标签等。

块级标签与行内标签，容器级标签和文本级标签

块级标签相对于容器级标签多了一个 p 标签，行内标签相对于文本级标签少了一个 p 标签
其中 img 为行内块级元素

图片标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>见崎鸣</title>
</head>
<body>
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.eu52Jg2XlqzucnzBGF81igHaNK?w=187&h=333&c=7&o=5&dpr=1.25&pid=1.7" alt="见崎鸣" title="见崎鸣"/>
</body>
</html>

属性解析
- title：鼠标放在图片上显示(给用户看的)
- alt：图片无法显示会出现alt的提示文字(给浏览器看的)
- src：一般使用相对路径，如果文件位置改变也不会有影响
图片格式
1. 位图 放大缩小图片会失真
  - jpg：图片体积大，不支持保存透明背景，适合颜色丰富的图片
  - png：图片体积小，支持透明背景，不适合颜色丰富的图片，可以无损压缩以保证页面打开速度
  - gif：适合制作动画
2. 矢量图 放大缩小图片不会失真
  - .ai
  - .cdr
  - .fh
  - .swf：Flash动画

超链接

外部链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<a href="http://www.baidu.com/">百度</a>  <!--文本超链接-->
<!--图片超链接   target="_blank" 表示在新页面打开窗口 -->
<a href="http://www.baidu.com/" target="_blank"><img src="https://img2.baidu.com/it/u=3997374157,3590333969&fm=26&fmt=auto&gp=0.jpg"/> </a>
</body>
</html>

内部链接
锚点链接

iframe框架

实现内嵌框架，指在一个页面中嵌入另一个页面

<!-- width：内嵌页面的宽度 height：长度 -->
<iframe src="页面地址" width="640" height="100" ></iframe>

如何应用：
在内嵌窗口中打开任意链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
    <style>
        ul{list-style-type: none;}
    </style>
</head>
<body>
    <iframe src="https://www.taobao.com/" width="1529" height="314" name="window"></iframe>
    <ul>
        <li>Top1:<a href="https://www.taobao.com" target="window">淘宝</a></li>
        <li>Top2:<a href="https://www.sina.com.cn" target="window">新浪</a></li>
        <li>Top3:<a href="https://www.163.com" target="window">网易</a></li>
    </ul>
</body>
</html>