[HTML] HTML常用基础标签

程序员文章站 2022-05-25 21:45:15

...

HTTP基础语法

div标签是块级结构布局元素，因此结合css盒模型讲解。

HTTP基本结构

基本结构标签

HTTP文件包括头部信息和网页内容，body中的内容在网页中显示。

<html>
<head>
    <title>标题</title>
</head>
<body>
    网页主体内容
<body>
</html>

标签、元素、属性

标签分为双标签和单标签。

<html>...</html>
<hr/>

元素是指从开始到结束标签的全部内容，例如，html标签加上内部代码，即为一个HTML元素。
属性用来修饰标签。

<标签名 属性1="值1" 属性2="值2">内容</标签名>

注释

注释格式

<!-- 注释 -->

文档声明

声明必须放在HTML稳定第一行，但是并不是HTML标签。

<!DOCTYPE html>

网页编码

编码在head标签内部设置。

<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

文字和段落标签

标题标签h1–h6

<h1>一级标题</h1>

段落标签p

align属性:值有left、right、center、justify。p标签中空格是不起作用的，需要使用代码nbsp

<p>段落</p>
<p align="left">段落</p>

换行标签br和水平线标签hr

<br/>
<hr/>
<hr width="10"/>
<hr color="blue"/>
<hr align="center"/>
<hr noshade=""/>

预标签pre很少用。

修饰标签和特殊符号

文字修饰标签

i和em：斜体
b和strong：加粗
sub：下标
sup：上标
ins：下划线
del：删除线

特殊符号

&nbsp;  空格
&lt;    小于/左尖括号
&gt;    大于/右尖括号
&reg;   已注册R
&copy;  版权C
&trade; 商标TM

示例

<p align="center">关于我们 | 招聘信息 | 联系我们 | 意见反馈</p>
<hr/>
<p align="center">Copyright&copy;2016 awecoder.com All Rights Reserved</p>

<p>公式：x<sup>2</sup>+x=0 解：x<sub>1</sub>=0;x<sub>2</sub>=-1</p>

列表标签

无序列表ul

属性type可为disc（原点）、square（方块）、circle（空心圆）。

<ul type="circle">
	<li>列表项</li>
	<li>列表项</li>
</ul>

有序列表ol

属性type可为1、a、A、i、I。

<ol type="A">
	<li>列表项</li>
	<li>列表项</li>
</ol>

定义列表

dt和dd在dl标签内，dt和dd同级。

<dl>
    <dt>配送方式</dt>
    <dd>上门自提</dd>
    <dd>海外配送</dd>
    <dt>支付方式</dt>
    <dd>货到付款</dd>
    <dd>在线支付</dd>
</dl>

图像标签img

src属性=图片URL（相对路径是图片相对于当前html文件的路径）
alt属性=图像的代替文字，图像无法显示时展示。
height属性和width属性，可用像素数值和百分比表示。
也适用align对齐属性。

<img src="Snipaste.png" alt="截图" height="50%" width="50%"/>
<img src="Snipaste.png" alt="截图" height="50px" width="50px"/>

超链接a和定义锚点

超链接标签a

href属性为链接地址，标签内容可以是文字或图片等。

target属性–链接的目标窗口，_self当前窗口打开，_blank新窗口打开，_top/_parent

title属性–链接提示文字。

name属性–链接命名。

<a href="http://www.baidu.com" target="_blank" title="百度搜索">百度</a>

空连接--点击没有反应
<a href="#" title="百度">百度</a>
空的链接--点击刷新页面
<a href="">刷新页面</a>

id属性–书签标记

结合name属性定义锚点

<a href="#锚点名">同一个页面</a>
<a href="网页名称#锚点名">不同页面</a>
<a name="锚点名">内容</a>

示例

<a name="top">目录</a><br/>
<a href="#fruit">水果</a><br/>
<a href="#vegetable">蔬菜</a><br/>
<a href="#sport">运动</a>

<!--设置水果标题-->
<h3>水果</h3>
<a name="fruit"></a>
<ul>
    <li>香蕉</li>
    <li>苹果</li>
</ul>
<a href="#top">返回顶部</a>

<!--设置蔬菜标题-->
<h3>蔬菜</h3>
<a name="vegetable"/>
<ul>
    <li>西红柿</li>
    <li>黄瓜</li>
</ul>
<a href="#top">返回顶部</a>

链接扩展功能

邮箱

<a href="mailto:[email protected]" >[email protected]</a>

下载文件

<a href="下载地址">文件下载</a>