HTML标签关系标签属性

HTML标签关系

  • 嵌套关系如下

    head和boby属于并列集关系,兄弟关系

<html><head></head></html>
 <!DOCTYPE html> 表示html的版本信息

  • utf-8表示字符的编码方式

简体字GB2312 繁体字BIG5 UTF-8支持世界各国语言

<meta charset="utf-8">
  • h1 h2 h3 h4 h5 h6属于标题标签

大标题 小标题 标题标签有加粗的效果

<H1>
    我是一级标题
</H1>

P标签 段落标签

<p></p>
  • hr标签 横线,水平线标签 单标签
<hr/>或者<hr>
  • br换行标签 单标签
<br>

div和span标签

没有语义,div就是division的缩写,分割分区,网页有很多div组成

span 跨度 跨距 范围

<div> </div><span></span>
  • b标签和strong标签都是 加粗文字(推荐使用strong标签)

    <b></b>   <strong></strong>
  • i标签和em标签都是倾斜字体的标签(推荐使用em标签)

    <i></i>    <em></em>
  • s标签和del属于加删除线标签(推荐使用del)

    <S></S>   <del></del>
  • u标签和ins标签属于下划线标签

    <u></u>   <ins></ins>
  • 标签属性

  • 标签属性格式

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

    如下:水平横线 宽度和颜色

    <hr width="100" color="red">
  • 图片标签

  • img属于单标签

    src属性=值 是图片的必需属性

<img src="图像.jpg">
  • 图片添加alt属性 当图片显示不出来的时候,会替换属性文字如下

    <img src="图像.jpg" alt="加载失败">
  • 图片添加了title属性 当鼠标放上去悬停的时候 会显示文字

    <img src="图像.jpg" title="这张图片很美丽">
  • 图片添加width宽度height高度属性

    <img src="图像.jpg" width="300" height="200">
  • 添加border边框属性

    <img src="图像.jpg" borde="10">
  • 链接属性

  • a标签 属于链接标签

  • 链接必须有href这个属性

  • 链接地址 必须是http://开头的

    <a href="跳转网站链接">百度</a>
  • 以上是外部链接内部链接只需要写上页面名称就可以了,不能忘记后缀名

  • 锚点定位

  • 锚点定位适合于较长的页面,我们可以点击某个关键词,从而迅速到达页面中的这个位置。

    <a href="#life">下个坐标</a>
    <h3 id="life">本坐标</h3>
  • base标签

  • base属于单标签,base标签当你点击外部链接时,它会以新的窗口打开

    <base target="_blank">
  • 当你点击外部链接时,不想让它以新的窗口打开

    <a href="跳转网站链接" target="_self">百度</a>
  • 特殊字符

    &nbsp;    空格
    &lt;      小于号
    &gt;      大于号
    等等百度可查
  • 注释标签

当你点击外部链接时,不想让它以新的窗口打开

<a href="跳转网站链接" target="_self">百度</a>
  • 特殊字符

    &nbsp;    空格
    &lt;      小于号
    &gt;      大于号
    等等百度可查
  • 注释标签

  • 内容是给自己看的,浏览器不执行 快捷键 ctrl + /

加油加油

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值