17

[HTML] HTML常用基础标签

 4 years ago
source link: https://blog.csdn.net/LIZHONGPING00/article/details/104099959
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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：删除线

特殊符号 

   空格
<    小于/左尖括号
>    大于/右尖括号
®   已注册R
©  版权C
™ 商标TM

示例

<p align="center">关于我们 | 招聘信息 | 联系我们 | 意见反馈</p>
<hr/>
<p align="center">Copyright©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>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK