现在的位置: 首页 > web前端 > 正文

HTML常用基础标签

2020年02月24日 web前端 ⁄ 共 2454字 ⁄ 字号 评论关闭

  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>公式:x2+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:xxx@qq.com" >xxx@qq.com< /a>

  下载文件

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

  html基础标签介绍如上,对于每个从事网站的人员来说,都应该了解这些标签,对你了解网站或者策划网站会有很大帮助的。

抱歉!评论已关闭.