HTML笔记 - HTML中的常用标签

HTML

目录

1. HTML文件的基础结构

<!--约束，声明-->
<!DOCTYPE html>
<!--html标签表示html的开始 lang表示所使用的语言-->
<!--一般包含两部分，head和body-->
<html lang="en">
<!--head标签表示头部信息-->
<!--一般包含三部分，title标签,css样式,js代码-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--body标签是整个html页面显示的主体内容-->
<body>
    hello
</body>
</html>

2. HTML标签

2.1 标签基础

  1. 标签的格式: <标签名>封装的数据</标签名>

  2. 标签名大小写不敏感

  3. 标签拥有自己的属性

    • 基本属性：bgcolor="red"，基本属性可以修改简单的样式效果，有些属性有属性名，有些没有
    • 事件属性：onclick="alert('hello');"，事件属性可以直接设置事件响应后的代码

  4. 标签根据格式又分为两种

    • 单标签格式：<标签名/>
    • 双标签格式：<标签名> ...... </标签名>

  5. 块元素与行内元素

    在页面中独占一行的元素称为块元素(block element)；在网页中一般通过块元素对页面进行布局

    • 块元素会在页面中独占一行
    • 默认宽度是父元素的全部
    • 默认高度是内容的高度

    在页面中不会独占一行的称为行内元素(inline element)；行内元素主要用来包裹文字

    • 行内元素不会独占页面的一行，只占自身的大小
    • 行内元素在页面中自左向右水平排列
    • 行内元素的默认宽度和高度都是内容的宽度和高度

    注意：

    • 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
    • 块元素基本上什么都能放
    • p元素中不能放任何的块元素

2.2 常用标签

meta标签

  • meta主要用于设置网页中的一些元数据，元数据不是给用户看的

  • 属性

    • charset 指定网页的字符集
    • name 指定的数据名称
    • content 指定的数据内容
    • http-equiv 将页面重定向到另一个网站
    <head>
	<meta charset="UTF-8">
	<meta name="keywords" content="HTML5,CSS3">
    <meta name="description" content="这是一个网站">
    <!--三秒后跳转到百度-->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>

  • 常见的meta的name属性

    • keywords 表示网站的关键字，可以同时指定多个关键字，关键字之间使用逗号隔开
    • description用于指定网站的描述

实体(转义字符)

  • 就像在Java中输出\n需要使用\\n一样，HTML也有类似的需求。需要输出特殊符号的时候就要使用特殊字符

    常用的特殊字符：< : &lt，> : &gt，空格 : &nbsp

    我是&lt;br&gt;标签<br/>

标题标签

  • 标题标签是块元素

    h1到h6都是标题标签。从h1-h6重要性依次递减，h1在网页中的重要性仅次于title标签，一般情况下一个页面中只有一个h1标签。一般情况下标题标签只会使用到h1-h3

  • hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup

    <hgroup>
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
</hgroup>
<h3 align="right">标题3</h3>

<!--align属性是对齐属性，left左对齐(默认)，center居中，right右对齐-->

超链接标签

  • 超链接标签是一个行内元素。但在标签中可以嵌套除它自身外的任何元素。

  • href属性设置连接的地址，属性值可以是一个外部网站的地址，也可以是内部页面的地址

    将href属性设置为#(目标元素的id属性值)可以跳转到页面的指定位置，如果只有一个#则默认返回页面顶部

  • target属性设置哪个目标进行跳转。_self表示当前页面（默认值），_blank表示打开新页面来进行跳转

    <a href = "https://www.baidu.com/" target="_self">百度a</a><br/>
<a href = "https://www.baidu.com/" target="_blank">百度b</a>

列表标签

  • ul是无序列表，ol是有序列表，列表间可以相互嵌套

    li是列表项，type属性可以修改列表项前面的符号

    <ul type="none">
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
</ul>

img标签

  • img标签是属于替换元素(介于块元素和行内元素之间)，用来显示图片

    • src属性可以设置图片的路径
    • width属性设置图片的宽度
    • height属性设置图片的高度
    • border属性设置图片边框大小
    • alt属性设置当指定路径找不到图片时，用来替代显示的文本内容

  • web中路径的书写格式和JavaSE有所不同：

    • 相对路径：.表示当前文件所在的目录；..表示当前文件所在的上一级目录；文件名表示当前所在目录的文件
    • 绝对路径：http://ip:port/工程名/资源路径
    <img src="../imgs/1.jpg" width="200" height="260" border="1" alt="找不到图片"/>

  • 图片常见格式

    • jpeg(jpg)：支持的颜色比较丰富，不支持透明效果，不支持动图
    • gif：支持的颜色比较少，支持简单透明，支持动图
    • png：支持的颜色丰富，支持复杂透明，不支持动图
    • webp：具备其它图片格式的所有优点，文件小。但是对除Chrome外游览器兼容性较差
    • base64：将图片使用base64编码转换为字符，通过字读的形式引入图片。一般为需要和网页一起加载的图片才会使用base64

音频标签

  • audio标签用来向页面中引入一个外部的音频文件，video标签用来向页面中引入一个视频

    • controls属性设置是否允许用户控制播放
    • loop属性设置音乐是否循环播放
    • src属性可以设置音频的路径
    • source属性和src属性基本相同，但功能更多（见下）
    <audio src="..." controls autoplay loop></audio>
<video controls>
	<source src="aaa.webm">
    <source src="aaa.webm">
    <source src="aaa.webm">
    该游览器不支持播放此视频！
</video>
<!--使用多个source引入资源的时候，会从上至下尝试播放资源。若选中资源无法播放，则尝试播放下一个。若所有资源都无法播放，则显示文字字段-->

表格标签

  • table标签是表格标签（下列为针对表格操作）

    • border设置表格边框
    • width设置表格宽度
    • height设置表格高度
    • align设置表格相对于页面的对齐方式
    • cellspacing设置单元格间距

  • （下列为针对表格内文本操作）

    • tr是行标签
    • th是表头标签
    • td是单元格标签
    • align设置单元格文本对齐方式
    • b是加粗标签
    <table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <th>1.1</th>
        <th>1.2</th>
    </tr>
    <tr>
        <th>2.1</th>
        <th>2.2</th>
    </tr>
</table>

  • colspan 属性设置跨列

    rowspan 属性设置跨行

    <table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <th colspan="2">1.1</th>
        <th>1.3</th>
    </tr>
    <tr>
        <th rowspan="2">2.1</th>
        <th>2.2</th>
        <th>2.3</th>
    </tr>
    <tr>
        <th>3.2</th>
        <th>3.3</th>
    </tr>
</table>

iframe框架标签

  • iframe标签可以在页面上开辟一个小区域显示一个单独的页面；iframe一般配合超链接使用

    <iframe src="XXX" width="500" height="400" name="abc"></iframe>
<a href = "https://www.baidu.com/" target="abc">Baidu</a>
<a href = "https://cn.bing.com/" target="abc">Bing</a>

其他标签

  • div标签：块元素。没有语义，用来表示一个区块。是目前主要的布局元素

    span标签：行内元素。没有语义，一般用于在网页中选中元素

    p段落标签：默认会在段落的上方或下方各空出一行来（如果已有就不再空）

    字体标签：可以用来修改文本的字体，颜色，大小。不建议使用，所有关于字体的设定应该交由CSS负责

    <div>div标签</div>
<span>span标签</span>
<p>p段落标签</p>
<font color="red" face="宋体" size="7">我是字体标签</font>

  • 使用一个标签应该重点关注其语义，而非表现形式。应为所有的表现形式都可以通过CSS修改

posted @   Solitary-Rhyme  阅读(173)  评论(0)  编辑  收藏  举报
相关博文：
· HTML笔记 - HTML中表单标签的使用
· CSS笔记 - CSS和HTML的常见结合方式
· 02-Html中的常用标签
· HTML基础-常用HTML标签
· [编程基础] 常用html标签使用介绍
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛