【前端】HTML的常用标签

最新推荐文章于 2024-11-07 19:35:57 发布

原创最新推荐文章于 2024-11-07 19:35:57 发布 · 444 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML5中的常用标签，包括标准结构、DTD约束、文本标签、超链接、图像、表格以及事件编程的基本要素。重点讲解了标题、段落、引用、滑动、预格式化、水平线、上下角标、块级与行内元素、列表和超链接的使用，并探讨了不同协议的应用。同时，提到了JavaScript在网页功能表现中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Html的常用标签：

Html的标准结构:(html5结构)

2.dtd约束:

html>的文本标签分类:(有开始有结束)

前端三个基础点:

Html（载体）,CSS（修饰）,js（网页中的部分特效）

Html ：建筑的主体结构
CSS ：给主体结构修饰(网页的样式)
Js ：具体的功能表现(网页中的省市区/县的三级联动,定时弹出广告（刷新）)

Html的常用标签：

Html:Hyper Text Markup Language

超文本标记语言,可以字体,视频,音频等进行渲染!但是结构不严谨,标签可以不成对出现,

浏览器解析文件的时候会自动补全!

Html的标准结构:(html5结构)

<!DOCTYPE html> --->文档声明
<html>      --->html根元素
  <head>   --->网页头文件(作用1.指定编码格式   2. 指定当前的窗口标题)
    <meat charset="utf-8">
    <title>窗口标题 <title>
  </head>

<body>  --->html页面的主体部分,最终的内容是通过body展示到浏览器上
    Hello,html
 </body>
</html>

代码讲解:

1. <html></html>称为根标签，所有的⽹⻚标签都在<html></html>中。

2. <head> 标签⽤于定义⽂档的头部，它是所有头部元素的容器。头部元素有<title>、 <script>(脚本)、<style>（样式）、 <link>（空元素标签，仅包含属性)、 <meta>（提供相关页面的元信息）等标签，头部标签在下⼀⼩节中会有详细介绍。

3. 在<body>和</body>标签之间的内容是⽹⻚的主要内容，如<h1>、 <p>、 <a>、 <img>等⽹⻚内容标签，在这⾥的标签中的内容会在浏览器中显示出来

2.dtd约束:

约束当前html标签的顺序结构

dtd:dtd约束
   dtd约束 --约束当前html标签的顺序结构

html>的文本标签分类:(有开始有结束)

1.标题标签:h1 - h6

效果变化,标题大小---由大变小

快捷键:

ctrl +shift+r:复制行

ctrl+r提示代码

<h1>标题</h1>
<h1>标题</h1>

2.段落标签:p（paragraph）

编辑区回车(在一行进行复制)

<p>
第一章内容
第二章内容
</p>

3.q标签:引用文本:(强调,大引用)（quote）

效果:"引用的文本"

<q>
对第二章内容的背景说明
</q>

4.段落缩进标签:blockquote 小引用--> （前边会有缩进的一个空格）

<blockquote>
对某章内容的解释说明
</blockquote>

5.滑动标签: marquee

<marquee> 我喜欢编程<marquee>

属性:behiavor:指定当前的滑动方式

常用的属性值:alternate:来回滚动

scroll:交替滚动

属性:scrollamount:指定滚动速度:整数值

属性:direction:滚动方向:默认向左滚动

属性:bgcolor html标签的背景属性

background-color:CSS样式的背景属性

6.pre标签:原样输出标签(pre paragraph set)

将本身的文本的格式一一打印出来

<pre> </pre>

7.hr:水平线标签/分割线

标签名称/ :空标签

<hr />  空标签

8.上下标签 sup和sub

数学公式:x^2<br />

x<sup>2<sup>

化学公式：H2O<br />

H<sub>2<sub>O

<br>:换行标签

转义字符：

<!--转义字符: 

版权所有:© &copy;

注册商品® &copy;

2个空格   &nbsp;

     &lt;左尖括号 

     &lt;右尖括号 

-->

xxx公司&copy;xxx注册商品&reg;<br />
<center>&lt;h1&gt;XXX学生管理平台&lt;/h1&gt;</center>

其他常用特殊字符：

9.块标签(会自动换行占用一行空间)和行内标签

<div id="id1">div1</div><div id="id2">div2</div>

<span>span1</span>
<span>span2</span>

10.列表标签:

无序列表

li:列表项

你喜欢的运动？
<ul>
    <li>足球</li>
    <li>篮球</li>
    <li>乒乓球</li>
<ul>

有序列表

<ol type="A">
    <li>齐帅</li>
    <li>克劳泽</li>
    <li>拉姆</li>
<ol>

11.超链接标签:a标签

属性:href

链接的资源文件地址/url

<a href="02_html的文本标签.html">超链接</a>

属性:terget

打开资源文件的方式

_self:在当前窗口直接打开

_blank:新建窗口打开

超链接作用:

1.链接资源文件/地址

2.作为锚链接来使用

步骤:

同一个页面:

   1)打锚点(做一个跳转标记)
   <a name="锚点名称">跳转</a>
   2)创建一个跳转链接
    <a href="#锚点名称">跳转</a>

在不同页面:

   1)打锚点(做一个跳转标记)
   <a name="锚点名称">跳转</a>
   2)创建一个跳转链接
    <a href="链接资源文件或者地址#"锚点名称">跳转</a>

常见协议:

file://本地文件协议

http://超文本传输协议

mailto:邮件协议

thunder://迅雷协议

用户请求服务器

图像标签:img

src属性很重要

属性:src :链接当前图片的url地址
uri/url
uri:包含了各种网络协议  举例:http:// ftp://
url是uri的子集
具体的某个项目的资源文件地址:
  http://localhost8080/xxxWEB/index.jsp

属性:width/height  图片的高度和宽度(像素/百分比)
属性:alt 当前图片链接失效的时候起作用,指定的图片的替代文本,解释说明图片的文字
title属性:当前鼠标,鼠标悬浮提示文字

表格标签:title

html语言表格是没有列的概念,列是通过一个单元格td来表现

 表格标签:table
  属性:边框:border:1px
      width/height 宽度和高度
背景色:bgColor
对齐方式:align
cellspacing:单元格边沿和边框中间的空间
cellpading:单元格和单元格之间的空间
行标签:tr
单元格:td
表头:th 自动加粗,居中	
表格中的标题:caption
加粗:b/strong
斜体:i/em
表格标签:
Table常用的属性:
border:指定边框
align:对齐方式
Width/height:宽高

单元格的合并:

行合并:rowpan
列合并:colspan

制定表格：

制定表格：
<table border="1px" cellspacing="0" cellpading="5" width="400px" 
   height="300px" align="center">
   <caption>xxx学校的通讯录</caption>
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
       <td>西安</td>
    </tr>
     <tr>
        <td>李四</td>
        <td>18</td>
       <td>户县</td>
    </tr>
     <tr>
        <td>王五</td>
        <td>20</td>
       <td>咸阳</td>
    </tr>
</table>
     </head>
     <body>
     </body>
</html>

事件编程三要素:

1.事件源input标签

2.编写事件监听器写一个监听函数

function changImgclick(){
  //1)获取当前img标签对象
  var img = document.getElementById("img1");
  //修改img的src属性
  img.src="img/xxx.jpg";

3.注册事件监听器需要在input标签上绑定一个单击点击事件