HTML常用标签

学习html标签只需要关注语意,不需要关注样式,样式交给css

Web 标准构成

结构标准:结构用于对网页元素进行整理和分类,用HTML实现
表现标准:表现用于设置网页元素的版式、颜色、大小等外观样式,用CSS实现
行为标准:行为是指网页模型的定义及交互的编写,用Javascript实现

基本介绍

html概念

html是超文本标签语言,可以编写静态网页,该静态网页包括文字,图形,动画,声音,表格,链接

元素的概念

  • 元素指的是从开始标签到结束标签的所有代码
  • 元素的内容是开始标签与结束标签之间的内容
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素拥有属性

语意化标签

结构化语意标签

  • header: 表示网页的头部
  • main:表示网页的主体
  • footer:表示网页的底部
  • nav:表示网页中的导航
  • aside:和主体相关的其他内容(侧边栏)
  • article:表示独立的文章

以上标签可用div代替,div没有语意,就表示一个区块,目前来讲div还是我们主要的布局元素

有语意的标签

  • h:标签可定义标题
  • p: 标签定义段落
  • br:插入一个换行
  • hr:定义水平线

没有语意的标签

  • div:块元素,没有语意,主要用来做页面布局
  • span:行内元素,没有语意,主要用来包裹文字

浏览器在解析网页时,会自动对不符合规范的内容进行修正,如:

  • 标签写在了根元素的外部
  • p元素中嵌套了块元素
  • 根元素中出现了head和body以外的子元素

文本格式化标签 link

HTML 可定义很多供格式化输出的元素,比如粗体和斜体字

pre -------- 预格式化标签
b  --------- 定义粗体文本
big -------- 定义大号字
em --------- 定义着重文字
i -----------定义斜体字
small ------ 定义小号字
strong ----- 定义加重语气
sub -------- 定义下标字
sup -------- 定义上标字
ins -------- 定义插入字
del -------- 定义删除字

特殊字符(字符实体) link

  • 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体去替换预留字符、
  • 在 HTML 中不能使用小于号 < 和大于号 >,这是因为浏览器会误认为它们是标签
  • 多个空格默认情况下会被浏览器解析为一个空格,可以用&nbsp表示
<!--只写了常用的 其他看手册-->
&nbsp;  空格              
&amp;    &	  
&lt;     <                 
&gt;     >
&quot;   "
&apos;   '	
&copy;   ©	

标签属性(一般用css写)

样式属性

  • 大部分标签内都可以加样式属性,但不推荐,这类属性一般用css写
  • 单个文件需要特别样式时,可以使用内部样式表,即使用 style 属性改变元素样式
<!--实在需要在标签中加属性推荐用内联样式-->
<p style="text-align: center; color: #00b3ff">hello</p>
<!--不建议这样写-->
<p align="center">hello</p>

特殊属性 (举例)

  • img 标签有两个必需的属性:src 属性 和 alt 属性
  • a 标签中的 href 属性,它指示链接的目标,name属性指向锚点
  • 这种特殊标签属性必须写在标签内,类似的还有很多
<!--这些是必备特殊属性,必须写在标签内-->
<a href="https://www.baidu.com/">百度一下</a>
<img src="xxx.jpg"  alt="图片">

如何使用样式

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化,有3种方式来插入样式表

外部样式表

  • 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择
  • 使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

  • 当单个文件需要特别样式时,就可以使用内部样式表
  • 你可以在 head 部分通过 style 标签定义内部样式表
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>

内联样式

  • 当特殊的样式需要应用到个别元素时,就可以使用内联样式
  • style 属性提供了一种改变所有 HTML 元素的样式的通用方法
  • 样式属性可以包含任何 CSS 属性
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

超链接 link

标签用法
超链接可以是字词,也可以是图像,可以点击这些内容来跳转到新的页面或者当前文档中锚点

标签属性

  • href :属性规定链接指向的页面的URL,也可以是锚点或邮箱
  • target :属性规定在何处打开链接文档,有4个重定向操作

链接到外部 (target 属性细节)

<!--
target属性 有4个保留的目标名称用作特殊的文档重定向操作:
_blank ------ 打开新窗口
_self ------- 在本窗口打开
_top -------- 替换整个窗口
_parent -----
framename --- 在指定的框架中打开被链接文档(详见html框架)
-->
<a href="https://www.baidu.com/" target="_blank">百度</a>
<a href="./111.html" target="_blank">本地文件</a>

相对路径

  • ./表示当前文件所在目录
  • ../表示当前文件所在目录的上一级目录

链接到同一个页面的不同位置(锚点)

  • href值为#,可以跳转也页面顶部,#xxx可以跳转到id为xxx的页面位置
  • 以前常用#作为超链接路径的占位符使用,其实用javascript:;做占位符更好
<style>
    body{
        height: 2000px;
    }
</style>

<body>
<h1 id="top">文章标题</h1>
<br><br><br><br><br><br><br><br><br>
<a href="#top">回到标题</a>
</body>

跳出框架

创建电子邮件链接

<a href="mailto:xxx@qq.com?">发送邮件</a>

图像标签 link

img是一个替换元素,类似的替换元素还有iframe标签,音视频标签,都需要src引入
img是一个行内块元素,不会独占一行,又能设置宽高

img 标签

  • img 标签向网页中嵌入一幅图像
  • img 标签并不会在网页中插入图像,而是从网页上链接图像
  • img 标签创建的是被引用图像的占位空间

img 标签属性

  • img 标签有两个必需的属性:src 属性 和 alt 属性
  • alt 属性规定图像的替代文本,如果无法显示图像,浏览器将显示替代文本
  • src 属性和规定显示图像的URL,可以是绝对路径或相对路径
  • ismap 属性将图像定义为服务器端图像映射
  • usemap 属性将图像定义为客户器端图像映射
  • longdesc 属性指向包含长的图像描述文档的 URL

图片链接

a标签中嵌套img标签实现图片链接

图片大小

  • 宽高一般只修改一个,另一个等比例缩放
  • pc端一般不建议修改图片大小,需要多大就裁多大
  • 移动端经常要对图片缩放(大图缩小)

图片格式

  • jpeg(jpg):支持颜色丰富,不支持透明效果,不支持动图
  • gif:支持颜色比较少,支持简单透明,支持动图
  • png:支持颜色丰富,支持复杂透明,不支持动图
  • webp:谷歌推出的专门用来表示网页图片的格式,具备其他格式文件的所有优点,并且文件特别小,缺点兼容性不好
  • base64:将图片使用base64编码,使图片转换为字符,通过字符的形式引入图片,效果是图片可以和网页一同加载

img标签配合map标签和area标签实现图片分区链接效果

  • map 标签定义一个客户端图像映射。图像映射指带有可点击区域的一幅图像
  • area 标签永远嵌套在 map 标签内部。area 标签可定义图像映射中的区域
  • img 中的 usemap 属性可引用 map 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 添加 id 和 name 属性
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" usemap="#logo">

<map name="logo" id="logo">
    <area shape="circle" coords="270,200,30" href ="https://www.baidu.come/" alt="baidu" />
    <area shape="rect" coords="100,100,200,200" href ="https://www.bilibili.com/" alt="blibili" />
</map>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值