HTML(Hyper Text Markup Language) 标签总结（一）

最新推荐文章于 2024-09-11 10:05:56 发布

Kaly_Lee

最新推荐文章于 2024-09-11 10:05:56 发布

阅读量248

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/Kaly_Lee/article/details/119722002

版权

本文介绍了HTML5中的新标签，如<header>、<nav>等，强调了语义化对于提高网页可读性和SEO的重要性，同时涵盖了多媒体元素如<video>和<audio>的使用，展示了如何创建更现代和交互式的用户体验。

摘要由CSDN通过智能技术生成

结构

<html>//定义HTML文档
    <head>
        <title>标题</title>
    </head>
    <body>
       身体部位
    </body>
    
</html>

标签分类

单标签: 只有一个标签比如：br
双标签：有开始和结束标签比如：html,head,body

常用标签：

<div> 定义一个块级元素

<span> 定义一个内联元素

Meta

charset:设定网页字符集的方式
http-equiv
- X-UA-Compatible:用于告知浏览器以何种版本来渲染页面
```
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
```
- cache-control 指定请求和响应遵循的缓存机制
  - no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存
  - no-store: 不允许缓存，每次都要去服务器上，下载完整的响应
```
<meta http-equiv="cache-control" content="no-cache">
```
- refresh:自动刷新并指向某页面
```
<meta http-equiv="refresh" content="2;URL=http://www.www.baidu.com/"> 
```
- content-type
```
<meta http-equiv="content-type" content="text/html; charset=utf-8">
```
name
- author：用于标注网页作者
- description :用于告诉搜索引擎，网站的主要内容
- keywords:用于告诉搜索引擎，网页的关键字
- viewport:这个属性常用于设计移动端网页
- renderer：内核控制


  <meta name="参数" content="具体的描述">。
  
  <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
  
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  
  1. webkit：极速内核
  2. ie-comp:IE兼容内核
  3. ie-stand IE标准内核

head

body

文档体

属性

bgcolor='颜色'
```
<body bgcolor='#d3d6d4'> 
</body>
```

h 标题标签

包括

* h1
* h2
* h3
* h4
* h5
* h6

<h1>
    标题内容
</h1>

p 段落标签

//网络截取
        <p>
            我来自于陕西省一个偏远的农村，祖上八代都是农民，.......祖上八代都是农民，.......祖上八代都是农民，.......祖上八代都是农民，.......祖上八代都是农民，.......祖上八代都是农民，

        </p>

        <p>

            寒窗苦读了十来年，终于可以实现人生价值了.........
        </p>

        <p>
            突然觉得生活并不是我想的那么美好，人生短暂
        </p>

hr:水平线

br :换行

font:字体

属性

color

文字的颜色
size

注意：size表示尺寸，取值从 1到7的一个整数，没有单位，用来设置文字的大小

mark:高亮展示

img:图片


 <!-- 
                img 标签：可以插入一张图片到网页。其中src属性设置图片的路径
                 1. 路径分类
                    1 相对路径（相对于当前文件 所在的目录）
                        当前目录：./ 通常可以省略
                        父目录：../  不能省略
                    2 绝对路径（从磁盘跟目录寻找文件）在开发中几乎不用

                属性：
                    src: 设置图片路径
                    width:设置图片宽度
                    height:设置图片高度
                    alt:如果图片路径不对，则展示alt内容，如果路径正确，图片正常展示，不显示alt内容
                    title:鼠标放到图片上的一个提示信息

            -->
  <img src="./images/3.jpeg" alt="帅哥" width="200" height="200" title="我是一个帅哥" />

sup：上标

sub：下标

4<sup>3</sup>

H<sub>2</sub>O

a：超链接

<a href="http://www.baidu.com">百度</a>

<a href="./index.html">首页</a>

 <a href="./images/3.jpeg">
          <img src="./images/3.jpeg" alt="美女" width="200" height="200" title="我是一个美女" />
 </a>

marquee：滚动

<marquee direction='right'>
        <img src="./images/5.jpg" alt="" width="100" height="100">
        <img src="./images/5.jpg" alt="" width="100" height="100">
        <img src="./images/5.jpg" alt="" width="100" height="100">
        <img src="./images/5.jpg" alt="" width="100" height="100">
    </marquee>

del：删除线

em：斜体

table&选择器

标签选择器：标签名{样式}
类选择器： .自定义名称{}

应用

class引入类选择器

<style>
    /* 定义img的宽度和高度，注意：宽和高都必须有单位 比如：px */
    /* 标签选择器 */
    img{
        width: 100px;
        height: 100px;    
    }
    table{
        width: 200px;
        height: 130px;
        border: 1px solid red;
    }
    td{
        border: 1px solid black;
    }
    /* 类选择器 */
    .tr-1{
        height: 30px;
    }
    .font-1{
        font-size: 16px;
        font-weight: 900;
    }
    .font-2{
        /* 设置字体大小 */
        font-size: 12px; 

    }
</style>

html

 <table cellspacing='30' >
                    <!-- 
                        tr*3:生成3对tr
                        tr*2>td*2 :生成2对tr 但是tr里包含2对td
                     -->
                    <tr class="tr-1">
                        <td colspan="2">
                            <font class="font-1">企业购</font> 
                            <font class="font-2">一站式企业采购平台</font>
                            
                           
                        </td>
            
                    </tr>
                    <tr>
                        <td><img src="./images/5ce662fdNbb7850a9.jpg!cc_100x100 (1).webp" alt=""></td>
                        <td><img src="./images/b3e0dd3289bcbe74.jpg!cc_100x100.webp" alt=""></td>
                    </tr>
                </table>

表格嵌套

表格的单元格的的内容 是 一个表格


<table>
    
    <tr>
        <td>
            <table>
                <tr>
                        <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

表单form

属性

action:提交的目标地址

method：提交方式

* get
* post

form表单的元素

input
- type属性：类型
  - text
  - password
  - tel
  - url
  - date
  - time
  - datetime
- placeholder:文本框中的提示内容
- required:必填
- readonly:只读
- disabled:禁用
- name:名称
button
- type 属性的值
  - submit 会提交表单

 <form action="./京东首页2.html" method="get">
                <!-- 文本输入框 -->
                <!-- readonly:只读。输入框不能编辑。输入框的数据是传输到其他页面 -->
                <!-- disabled:禁用。不允许用户编辑输入框，数据不会传输到其他页面 -->
                <!-- value:输入框的值 
                     placeholder：输入框中的提示内容
                     name：输入框的名称。
                     type:text 。是文本框
                -->
                <input type="text" name="username" placeholder="请输入账号" required  value="admin" disabled >
                <!-- type:password 表示密码框 -->
                <input type="password" name="upass" placeholder="请输入密码" readonly>

                <input type="tel" name="tel" placeholder="请输入手机号">
                <!-- type:url 表示地址输入框，内容必须是合法地址：http://www.baidu.com -->
                <input type="url" name="url" placeholder="请输入地址">
                <!-- type:date 日期 年月日 -->
                <input type="date" name="date">
                <!-- 时分 -->
                <input type="time" name="time">
                <!-- 时间，年月日时分 -->
                <input type="datetime-local">
                <!-- 搜索框 -->
                <input type="search">
                <!-- 提交按钮 -->
                <button type="submit" >提交</button>
           </form>