HTML基本标签详解（一）

阿超前端
240 阅读3分钟

HTML标签

h1-h6

    <h1>h1 标题标签</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>

浏览器默认body的font-size为16px
浏览器默认 1rem = body标签的font-size大小 = 16px
body标签的font-size可以改变
h1标签 font-size：2rem
h1标签 font-size：1.5rem

标题标签的内容会被爬虫抓取，正确使用有利于搜索引擎抓取，涉及seo优化

    <div id="box2" style="font-size:20px;background:red;padding: 10px;">
        div 父元素
        <p style="background:yellow">p 子元素</p>
    </div>

子元素不设置font-size时 ，自动继承父元素的font-size

p

    <div style="width: 300px;background:red;">
        <p style="text-indent: 2rem;">p 标签paragraph 段落标签paragraph 段落标签paragraph 段落标签paragraph 段落标签paragraph 段落标签</p>
    </div>

paragraph 段落标签
特点：独占一行，块级元素
style="text-indent: 2rem;" 首行缩进2个汉字

b strong

     <b>我是b标签</b>
     <br>
     <strong>我是strong标签</strong>

b标签和strong标签都有加粗效果
b标签是物理标签 只是样式加粗 blod
strong是语意标签 表示语气强调
strong标签包裹的元素会被爬虫抓取，有利于seo优化，建议使用

i em

      <i>我是i标签</i>
      <br>
      <em>我是em标签</em>

i标签和em标签都有斜体效果
i标签是物理标签 只是样式倾斜 italic
em标签是语意标签 有强调语气 emphasize
em标签包裹的元素会被爬虫抓取，有利于seo优化，建议使用

del ins

    <del>我是delete标签</del> 
    <p style="text-decoration: line-through;">p标签通过样式实现删除效果</p>
    <ins>我是 insert 标签</ins>
    <p style="text-decoration: underline;">p标签 通过样式实现下划线效果</p>

del是语意化标签，表示删除的文字
insert是语意化标签，表示插入的文字

address

     <address>北京市昌平区</address>

address是语意化标签，表示地址

div

div是布局容器

    <div style="width:300px;height:100px;background: red;" >我是div标签</div>
    <div style="width:300px;height:100px;background: red;">
       div是布局容器div是布局容器div是布局容器div是布局容器div是布局容器
   </div>
   <div style="width:300px;height:100px;background: red;">
       ahsjsjkdldljskskslspspslslslslkakakamnwjnnwnwmw,wmw,w,w,wmwmwmw
       长串英文不会换行，原因是浏览器会把不认识的长串英文当作一个单词处理。一个单词超出容器不会换行
   </div>
   <div style="width:300px;height:100px;background: red;">
       ahsjsjkdldljsksks lspspslslslslkakakamnwjnnwnwmw,wmw,w,w,wmwmwmw
       此处会在空格处换行
   </div>
   <div style="width:300px;height:100px;background: red;">
       空格   和回车
       在div中相当于文本分隔符，在浏览器中只会显示一个空格（文本分隔符）
       aaa bbb 
       ccc
   </div>

image.png

字符实体

    < ：&lt;
    > : &gl;
    空格 : &nbsp;

<p>小于号（Less than sign） &lt;</p>
   <p>大于号（Greater than sign） &gt;</p>

img

<img src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_e835568.png" alt="百度翻译图标" title="百度翻译">

scr :  source源
    可以是网络地址:https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_e835568.png
    可以是相对路径：../img/1.jpg
    可以是绝对路径：/Users/guoyanchao/Desktop/project/前端基础/HTML
alt: 当图片加载失败的时候显示的文字
title：鼠标划过图标时显示的文字

a

     <a href="https:www.baidu.com">在当前标签页打开baidu</a>
     <a href="https:www.baidu.com" target="_blank">在新的标签页打开baidu</a>
     <a href="tel:18734528888">联系18734522017</a>
     <a href="mailto:992418888@qq.com">发邮件</a>
     <div id="box1" style="width:100px;height:100px;background: green;">box1</div>
     <a href="#box1">锚点定位到box1</a>
     <a href="#box2">锚点定位到box2</a>
     <br>
     <a href="">点击a标签</a>
     <a href="javascript:;">点击a标签</a>
     <a href="javascript:alert('点击了a标签');">点击a标签出现弹框</a>

anchor 标签 （锚点）
href：Hypertext Reference 超文本引用

作用：

  1. 跳转网页、 href="https:www.baidu.com"

  2. 打电话、 href="tel:18734528888"

  3. 发邮件、 href="mailto:992418888@qq.com"

  4. 锚点定位、 href="#box1"

  5. 协议限定符、

    href=''会刷新页面

    href='javascript:alert('111')'会打开弹窗

    href='javascript:;'不会刷新页面

avatar
文章
阅读
粉丝