html标签 | 青训营笔记

echo_前端
79 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

html标签 | 青训营笔记

h标签

关于h标签的解读

  • 标签的内容对于搜索引擎来说非常重要，并且其在一个网页中只能出现一次

p标签

段落标签,其中不能嵌套 h 标签和其他 p 标签

div标签

关于div标签的解读

  • div 标签对是用来将相关内容组合到一起，以和其他内容分隔，使文档结构更清晰
  • 网页布局 头部，内容区，底部 都会通过 div 进行分隔

列表标签

1.无序列表

无序列表使用 <ul></ul>标签,每个列表项都是 <li></li>标签

基本常见网站导航、列表页都会使用 ul li 无序列表标签

2.有序列表

无序列表使用 <ol></ol>标签,每个列表项都是 <li></li>标签

无序列表有 type , start , reversed 属性

3.定义列表

定义列表使用 <dl></dl>标签,表头用<dt></dt>标签,列表项用<dd></dd>标签

<dl>
    <dt>导演</dt>
    <dd>陈凯歌</dd> 
    <dt>主演</dt>
    <dd>张国荣</dd>
    <dt>上映日期</dt>
    <dd>1993-01-01</dd>
</dl>

渲染效果如下：

导演
陈凯歌
主演
张国荣
上映日期
1993-01-01

多媒体标签

img标签

<img src="" alt="" title="">
  • src 指图片路径
  • alt 指图片没显示出来时的替代文本
  • title 指鼠标停留在图片上是显示出来的文本
  • alt 不能为无意义字符，需要能表现出图片的含义
  • 网页支持的图片格式：.jpg .png .bmp .gif .svg .webp

a标签

<a href="" target="" title></a>
  • href 链接路径
    • 也可以通过 href = "#id"设置页面锚点
  • target 链接的打开方式
    • target = _blank(在新窗口打开网页)
    • target = _self(默认，当前页面跳转)
  • title 用户设置鼠标的悬停文本

特殊标签

指向 exe、zip、rar、word、excel 等文件格式的链接，将自动成为下载链接

mailto 为前缀的链接即邮件链接

tel 为前缀的链接即电话链接

<a href="doc/1.zip"></a>
<a href="mailto:1797422685@qq.com"></a>
<a href="tel:15573500000"></a>

音视频标签

音频标签

<audio src="" controls autoplay loop></audio>

controls 显示播放器样式

autoplay 自动播放(部分浏览器都禁止了该属性)

loop 循环播放

视频标签

<video src="" controls autoplay loop></video>

绝对路径和相对路径

  • 绝对路径指网页的URL或者文件的完整地址
  • 相对地址指从当前网页出发去找到文件的路径
    • .. / 表示回退上一级目录

语义化标签

span标签

文本中的区块标签，无任何样式

文本格式化化标签

标签描述
<em>定义着重文字 （被强调的文本，样式为斜体）
<strong>定义加重语气（表示特别重要的文字,样式为粗体）
<code>代码文本
<pre>定义预格式文本。被包围在 pre 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 pre 标签的一个常见应用就是用来表示计算机的源代码。
<figure>代表一段独立的内容，与说明 figcaption 标签配合使用。figure 标签规定独立的流内容（图像、图表、照片、代码等等）
<figcaption>一个独立的引用单元，为<figure>元素定义标题

html5区块化标签

标签描述
<header>头部标签
<main>网页核心部分
<section>文档的区域，语义比 div 大
<article>文档的核心文章内容，会被搜索引擎主要抓取
<aside>文档的非必要相关内容，比如：广告
<nav>导航条
<foorer>页面底部
<body>
    <!-- 网页的头部 -->
    <header>
        <!-- logo -->
        <div>
            <h1>网页logo</h1>
        </div>
        <!-- 导航栏 -->
        <nav>导航栏</nav>
    </header>

    <!-- 网页主体部分 -->
    <main>
        <!-- 轮播图 -->
        <aside>轮播图广告</aside>

        <!-- 商品信息 -->
        <h2>商品信息</h2>
        <section>商品信息1</section>
        <section>商品信息2</section>
        <section>商品信息3</section>
        <section>商品信息4</section>
    </main>

    <!-- 页脚 -->
    <footer>
        <h2>网页底部</h2>
    </footer>
</body>

表单

form标签

  • 所有的表单都是被一个form元素所包裹
  • action属性：提交表单时向何处发送表单数据
  • method属性：规定用于发送表单数据的 HTTP 方法

单行文本框

<input type="" value="" placeholder="" disabled="">

属性描述
type文本框类型
value文本框的值
placeholder提示文本，以浅灰色显示在文本框中，并不是文本框中的值
disabled禁用属性
name在单选和复选框中需要将name设置成相同的值

单选和复选框

属性描述
name在单选和复选框中需要将name设置成相同的值
value向服务器中提交的值
checked默认选中

label标签

用来将文字和表单元素进行绑定,点击文字就相当与点击了选择按钮

<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>

下拉菜单

请选择省：
<select>
    <option>湖南省</option>
    <option>湖北省</option>
    <option>浙江省</option>
    <option>黑龙江省</option>
</select>

多行文本框

  • <textarea rows="10" cols="100"></textarea>
  • 有 rows和cols属性，用于定义多行文本框的行数和列数

按钮

type属性描述
button普通按钮
submit提交按钮
reset重置按钮

表单类型

type属性描述
text单行文本框
password密码框
radio单选框
checkbox复选框
button普通按钮
submit提交按钮
reset重置按钮
color颜色选择控件
date、time日期、时间选择控件
email电子邮件控件
file文件选择控件
number数字选择控件
range拖拽条控件
search搜索框
url网址输出控件
avatar
文章
阅读
粉丝