HTML-基础与常用标签

5个月前发布 SanS三石
29 0 0

一、HTML基础语法

HTML

  • HTML是Hypertext Markup Language(超文本标记语言)的缩写,是一种基于SGML(标准通用标记语言)的标记语言,是Web用于编辑网页的主要工具。

纯文本和超文本

  • 纯文本:没有任何的修饰,只能保存文字内容,有利于网络传输,可以通过修改后缀命。
  • 超文本:用于连接另一个链接,文本,多媒体。

标记

  • 也叫标签 写给浏览器的一种语法格式。

语义化网页的优势

  • 便于浏览器阅读,解析。以及后期维护。便于爬虫抓取需要的数据。

THTML规范

  • W3C 万维网联盟,发布和维护互联网的规范和标准。

标签语法

  • 必须书写在一对尖括号<>内。
  • 分单标签和双标签,双标签成对存在 。
  • 需要有结束符,H5后单标签可以不写结束符。

HTML元素

  • 开始标签到结束标签的所有内容。
  • 标签之间可以嵌套。
  • 元素对空白换行不敏感。

标签级别:

  • 容器级:可以嵌套其它所有的标签。
  • 文本级:只能嵌套文字/图片/超链接。

html标签可以添加属性

  • 书写必须在开始标签或单标签内,和标签名用空格分开。
  • 键值对写法:key:value value包裹在双引号内。多个属性用空格分开。

HTML基本结构

  • html 最大的标签,文件的根元素。
  • head 头部,内部用于对网页的设置,除了title其它都不显示,title必须要写。
  • title 标题。提高搜索排名。浏览器收藏夹的标题。尽量精简。
  • body 主体。存放所有html用来显示的标签。
  • 字符集:mate定义当前网页所使用的字符编码。
<head><!--头部,对网页的设置-->
        <meta charset="UTF-8"><!-- 定义字符编码 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html常用标签</title><!--标题-->
    </head>
    <body><!--主体,网页的书写内容-->

    </body>

路径:

  • 相对路径:同级,子级,上级。
  • 绝对路径:直接从电脑盘符出发查找,路径不可移植。

二、常用标签

标题标签:

  • h1-h6 分别定义六个级别的标题,h1权重最大,依次减小。一般一个页面只写一个h1,重复出现反而降低权重。
  • 标题标签不能互相嵌套,进行同级书写。
<h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

段落标签和换行标签:

  • p 段落标签,只能存放文本,图片,表单,或者废弃的font标签用来添加一段完整的语义。
  • br 换行标签。
<p>用来添加一段语义完整的文字</p>
    <br/>

文本格式化标签:

<b>粗体</b>
    <i>斜体</i>
    <em>强调文本</em>
    <sup>上标标签</sup>
    <sub>下表标签</sub>
    <small>小号字体</small>

图像标签:

  • src:图片查找路径。分相对路径和绝对路径。
  • width:宽度,height:高度。只设置一个,另一个等比缩放。两个都设置,按设置值变化。
  • border 边框。title 提示文本,鼠标停留时提示信息。alt 替换文本,图片加载失败时,替换提示。
<img src="img/小丑.jpg" alt="加载失败提示" width="100px" height="" title="鼠标停留提示">

音频标签和视频标签:

  • src 路径。consrols 控制条。
<audio src="img/mp3.mp3" controls></audio>
    <video src=""></video>

超链接:

  • a标签,在指定位置添加超级链接。
  • 属性:
    • href:超文本引用,用于规定链接的目标地址。
    • title 提示文本,鼠标停留时提示
© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...