html结构标签基本使用

Icarrot
241 阅读5分钟

标签

标题标签

作用性质

  1. 标签从 h1 到 h6 字体依次变小
  2. 页面中尽量减少 h1 标签的使用，h1常用作SEO优化当中；可以嵌套 a 标签装网页logo
  3. 属于块级元素
  4. 双标签
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

段落标签

作用性质

  1. 常用来装载小段文字或者大篇文章
  2. 不会自动缩进
<p>我是文章内容<p>
<p>我是文章内容<p>
<p>我是文章内容<p>
<p>我是文章内容<p>

文本格式化标签

文字倾斜

作用性质
  1. 使文字倾斜
  2. em 内容较重要使用
<i>倾斜</i>
<em>倾斜</em>

文字加粗

作用性质
  1. 使文字加粗
  2. strong 内容较重要使用
<b>加粗</b>
<strong>加粗</strong>

文字下划线

作用性质
  1. 使文字下方添加一条下划线
  2. ins 内容较重要使用
<u>下划线</u>
<ins>下划线</ins>

文字删除线

作用性质
  1. 使文字中间添加一条删除线
  2. del 内容较重要使用
<s>删除线</s>
<del>删除线</del>

图片标签

作用性质

  1. 在页面添加一张图片
  2. src 推荐使用相对路径
  3. alt 替换文本，当图片无法加载时显示
  4. title 图片说明，鼠标悬停在图片上片刻显示
<img src="./images/logo1.jpg" alt="图片加载失败" title="这是一只猫">

音频标签

作用性质

  1. 在页面添加一段音频
  2. controls 给音频添加控件
  3. autoplay 让音频自动播放，一般不使用
  4. loop 让音频自动循环播放
  5. 双标签
<audio src="./music.mp3" controls autoplay loop><audio>

视频标签

作用性质

  1. 在页面添加一段视频
  2. controls 给视频添加控件
  3. autoplay 让视频自动播放，一般不使用。在Google浏览器要配合 muted 静音属性使用
  4. loop 让视频自动循环播放
  5. 双标签
<video src="./video.mp4" controls autoplay muted loop></video>

链接标签

作用性质

  1. 在页面添加一条链接（可以是本地链接，也可以写网址）
  2. href
    1. 添加网址是记得在前面加上 https://
    2. 添加 # 可以实现空链接，暂时不知道跳转地址可以写 #
  3. target 默认属性值是在原窗口跳到新页面，_blank 值可以在新窗口打开链接
<a href="https://www.baidu.com/" target="_blank">跳转到百度一下</a>

列表标签

无序列表

作用性质
  1. 常用于网页navbar导航栏，商品类别列表
  2. 用于横向导航栏时，需要配合浮动进行使用
  3. 常常嵌套 a标签使用
  4. 快速生成
    1. ul>li{$内容}*5
    2. ul>(li>a[href="#"]{$内容})*5
  5. 块级元素
<ul>
	<li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

有序列表

作用性质
  1. 用于有需要排列或者排名，不常见
  2. 快速生成 ol>li
  3. 块级元素
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

自定义列表

作用性质
  1. 目前常见于页面底部帮助中心之类的应用
  2. 快速生成 dl>dt+dd*6
  3. 块级元素
<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
</dl>

表格

作用性质

  1. 制作简易表格，目前不常用
  2. <caption></caption> --> 整个表格外的标题，但是依然包含在 <table></table>里面
  3. 为了让浏览器内核更精确分析，通常将表格分为 <thead> <tbody> <tfoot> 三部分
  4. th-->表头，包含在 tr 里面，样式自动加粗居中
  5. rowspan 跨行合并单元格，嵌入式，添加在需要合并的所有单元格的第一个单元格，后续的单元格也要对应删除
  6. colspan 跨列合并单元格
  7. cellspacing 调整单元格之间的距离，优化表格
<table border="1">
    <caption><strong>学生成绩单</strong></caption>
    <thead>
        <tr>
            <!-- <td></td> -->
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td rowspan="2">100分</td>
            <td>真棒, 第一名</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>真棒, 第二名</td>
        </tr>    
    </tbody>
    <tfoot>
        <tr>
            <td>总结</td>
            <td colspan="2">郎才女貌</td>
        </tr>
    </tfoot>
</table>

表单

表单标签

  • form——表单域，所有表单元素都要包含在其内，以保证数据可以提交，重置
    • action——提交地址
<form action="">
    表单内容
</form>

  • input——单标签

    • text——文本框，输入内容会正常显示
    文本框: <input type="text">
    • password——密码框，输入内容自动变为小圆点
    密码框: <input type="password">
    • radio——单选框，属性 name 的值相同时可实现单选，被添加 checked 属性的 radio 会被默认选中
    单选框: <input type="radio" name="sex">
单选框: <input type="radio" name="sex" checked>
    • checkbox——复选框，被添加 checked 属性的 checkbox 会被默认勾选
    多选框: <input type="checkbox"> <input type="checkbox" checked>
    • file——上传文件，默认只能一次上传一个文件，添加 multiple 属性可以一次上传多个文件
    上传文件: <input type="file" multiple>
    • submit——表单提交按钮，value属性可以设置按钮名字
    <input type="submit" value="免费注册">
    • reset——重置表单内容
    <input type="reset">
    • button——普通按钮，默认没有任何功能
    <input type="button" value="普通按钮">

  • button——按钮，可以额外附加表单属性

    • type="submit"——实现提交表单
    <button type="submit">提交按钮</button>
    • type="reset"——重置表单
    <button type="reset">
    重置按钮
</button>
    • type="button"——默认属性，没有功能
    <button type="button">
    普通按钮
</button>

  • section ——下拉菜单，双标签，包含 option ，被添加 selected 属性的 option 会被默认选中

    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected>深圳</option>
    </select>
  • textarea——文本域，可通过设置 cols rows 控制宽高
    <!-- cols 行长      rows 列高 -->
    <textarea cols="60" rows="30"></textarea>

  • 快捷生成代码，input:password/checkbox/radio/file

  • 占位符

    • placeholder——常用于文本框 input:text 或密码框 input:password
    • 用于提示用户输入内容
    文本框: <input type="text" placeholder="请输入账号">

  • label——常用，使文字与表单元素关联，鼠标点击文字时也可以选中表单元素

    • 显式关联（需要 for 和 id 属性配合）
    <label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSn" />
    • 隐式关联（较为方便快捷，推荐使用）
    <label>Date of Birth: <input type="text" name="DofB" /></label>

无语义标签

  • div——使用最频繁的标签，块级元素
<div></div>
  • span——行内块元素
<span></span>

有语义标签-移动端常用-HTML5新增

  • header
<header>网页头部</header>
  • nav
<nav>网页导航</nav>
  • aside
<aside>侧边栏</aside>
  • section
<section>网页区块</section>
  • article
<article>文章</article>
  • footer
<footer>网页底部</footer>

路径

  • 绝对路径
<img src="C:\Users\itheima\Desktop\code\images\dog.gif" alt="">

  • 相对路径

    • 同级
    <img src="cat.gif" alt="">
<img src="./cat.gif" alt="">
    • 下级
    <img src="images/dog.gif" alt="">
    • 上级
    <img src="../images/dog.jpg" alt="">

基本网页骨架

vscode, 英文状态下 !+回车 生成骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title>
</head>
<body>
    这是网页身体/主体
    <!-- 这是注释, 是对代码的解释说明 -->
</body>
</html>
avatar
文章
阅读
粉丝