【从0到1 HTML + CSS】1章7页 【HTML的版本】【HTML标签】

温水小青蛙
135 阅读2分钟

HTML

  • <标签符>内容</标签符>

当浏览器收到HTML文本后，就会解析里面的标签符，然后把标签符对应的功能表达出来

  • HTML是从HTML4.01升级到HTML5的
  • 我们常说的HTML是指HTML 4.01, 而HTML5是相对于HTML 4.01新增加的内容

HTML标签

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
</head>
<body>
    <p>段落</p>
</body>
</html>

<!DOCTYPE html>
  • 文档声明，表示这是一个HTML页面
<html xmls="http://www.w3.org/1999/xhtml">
  • 告诉浏览器，当前页面使用W3C的XHTML标准
  • 一般，我们不需要加上这一句

head 标签

  • 包含：
    • 页面标题
    • 定时刷新
    • 外部文件
  • 只有一些特殊的标签，才能放在head内：
    • title
      • 指定显示在浏览器Tab上的标题
    • meta
      • 不是给用户看得，是给搜索引擎爬虫的。告诉爬虫这个页面是做什么的
      • 属性有：
        • name，可能的值：
          • keywords
          • description
          • author
          • copyright
        • http-equiv，可能的值：
          • Content-Type，定义网页所使用的的编码
          • refresh，定义网页自动刷新跳转
        • charset，可能的值：
          • utf-8
        • content，可能的值：
          • 前端开发，读书笔记
          • 小青蛙
          • 本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。
          • text/html; charset=utf-8
          • 6;url=juejin.cn/user/668962…
    • link
      • 用于引入外部样式文件（CSS文件）
    • style
      • 用于定义元素的CSS样式
    • script
      • 用于定义页面的Javascript代码
      • 也可以引入外部Javascript文件
    • base
      • 没有意义，可以忽略

meta 示例

<head>
    <!--网页关键字-->
    <meta  name="keywords" content="前端开发，读书笔记"/>
    <!--网页描述-->
    <meta  name="description" content="读书笔记"/>
    <!--本页作者-->
    <meta  name="author" content="小青蛙">
    <!--版权声明-->
    <meta  name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。"/>
    
    <!--定义网页定时刷新-->
    <!--6秒后会自动跳转到 我的主页上-->
    <meta  http-equiv="refresh" content="6;url=https://juejin.cn/user/668962839606359/columns"/>
    
    <!--定义网页的编码方式-->
    <!--必须放在title和其他meta标签的前面-->
     <!--如果发现网页乱码，可能是没加这一句-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--上面这行，HTML5 可以简写为-->   
    <meta charset="utf-8">
</head>

HTML 文本

标题标签

  • h1, h2, h3, h4, h5, h6
  • 重要性不同，重要性依次降低
  • h1 一般只有一个
  • h2 - h6 可以有多个

段落标签

p 给文字分段， br 给文字换行

  • <p></p>
    • 显示一段文字
    • 自动换行
    • 段落与段落之间 有一定间距
  • <br/>
    • break的缩写
    • 对文字进行换行
    • 不会 产生间距

文本标签

修饰文字

  • strong和b
    • 加粗，二者效果相同
    • 尽量使用strong （表强调）
  • i, em和cite
    • 斜体，三者效果相同
    • 尽量使用em （表强调 emphasized）
  • sup
    • 上标
  • sub
    • 下标
  • s
    • 中划线
    • 删除线效果一般用CSS来实现，几乎不用s标签
  • u
    • 下划线
    • 下划线效果一般用CSS来实现，几乎不用u标签
  • big
    • 大字号
    • 几乎不用
  • small
    • 小字号
    • 几乎不用
<strong>这是粗体文本</strong><br/>
<b>这是粗体文本</b>

<i>斜体文本</i><br/>
<em>斜体文本</em><br/>
<cite>斜体文本</cite>

<p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
<p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>

<p><s>原价:￥6.50/kg</s></p>
<p><u>小青蛙专栏</u>欢迎您</p>
<big>大字号文本</big>
<small>小字号文本</small>

水平线标签

hr (horizon) 实现一条水平线

<body>
    <h3>静夜思</h3>                  
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
    <hr/>
    <h3>春晓</h3>                  
    <p>春眠不觉晓，处处闻啼鸟。</p>
    <p>夜来风雨声，花落知多少。</p>
</body>

div标签

  • division （分区）
  • 可以放入绝大多数 其他标签

划分HTML结构，从而 配合CSS来 整体控制某一块的样式

avatar
文章
阅读
粉丝