NightWatch

# 前端查漏补缺—HTML4

# 语义化标签

  • 概念：用特定的标签表达特定的含义

  • 原则：标签的默认效果不重要、语义很重要

  • 优势：

    • 代码的可读性强

    • 有利于SEO(搜索引擎优化) 爬虫 代码 机器人

    • 方便设备解析（屏幕阅读器、盲人阅读器）

# 块级元素和行内元素

  • 规则1：块级元素中能写行内元素、块级元素(几乎什么都能写)
  • 规则2：行内元素中能写行内元素，不能写块级元素
  • 特殊规则：h1-h6不能互相嵌套
  • 特殊规则：p标签中不能写块元素

# 文本标签

# 常用文本标签

  • 用于包裹词汇短语
  • 通常写在排版标签里
  • 排版标签通常是大段文字，文本标签更微观（词汇、短语）
  • 文本标签通常都是行内元素
标签名 标签语义 单/双标签
em 要着重阅读的内容 双
strong 十分重要的内容 双
span 没有语义，用于包裹 双

# 不常用文本标签

标签名 标签语义
cite 作品标题（书籍、歌曲）
dfn 特殊术语，专属名词
sub与sup 上标和下标
code 一段代码
kbd 表示键盘文本，用于计算机操作手册
abbr 表示缩写，配合title属性使用
bdo 改变文本方向
u 下划线
q 短引用
blockquote 长引用

备注：

  1. blockquote和address是块级元素,都是行内元素
  2. 语义感强的 h1~h6、p、em、div、strong、span

# 图片标签

  <img src="./genshin.png" width="300" alt="原神送快递">

alt属性的两个作用：

  • 搜索引擎识别图片内容
  • 图片因为某种原因加载不出来的时候，显示文字

width、height属性一般只用一个，更改图片尺寸的时候会默认保持宽高比

img标签是一个行内元素

# 常见的图片格式

  1. jpg格式：有损压缩，体积小，用于对图片细节没有极高要求的场景，例如网站宣传图
  2. png格式：无损压缩，用于需要透明背景，更高质量的场景,例如公司logo
  3. bmp格式：不压缩，支持颜色丰富、保留细节更多，占用空间极大，主要用于细节要求极高的场景，例如大型游戏中的图片，网页中很少使用
  4. gif格式：仅支持256种颜色，支持简单透明背景，支持动态图
  5. webp格式：谷歌推出专门在网页呈现图片，具备1-4的优点，但是兼容性不太好，IE无法使用
  6. base64格式：本质是一串特殊的文本，要通过浏览器打开，适合一些比较小的图片

# 超链接

# 跳转页面

a标签，主要作用是从当前页面跳转

href属性为跳转的地址，可以使绝对地址，也可以是相对地址

target属性_blank是在新标签页打开，_self是在当前标签页打开

a标签虽然是行内元素，但是可以包裹除了自身的任何东西

# 跳转文件

a标签还有个作用是跳转资源，浏览器支持的文件会直接在浏览器打开，不支持的文件会默认触发下载，使用download属性可以强制触发下载，属性值为文件名。

# 跳转锚点

// 跳转锚点
<a href="#anchor">跳转锚点</a>

// 两种写法
<a name="anchor">锚点位置1</a> 
<p id="anchor">锚点位置2</p>

// 直接回到顶部
<a href="#">回到顶部</a>

// 刷新页面
<a href="">刷新页面</a>

// 跳转到别的页面的锚点
<a href="./19_超链接_跳转锚点.html#yuanshen">跳转到指定位置</a>

// 打开弹窗
<a href="javascript:alert(666);">点我弹窗</a>

点击跳转锚点会跳转到锚点位置，

设置锚点：

  • 具有name属性的a标签
  • 具有id属性的任意元素

# 唤起指定应用

<a href="tel:10010">电话联系</a>
<a href="mailto:123456@163.com">邮件联系</a>
<a href="sms:10086">短信联系</a>

在网页上会让你选择应用，手机上是真的好用

# 列表

# 分类

几个缩写：

  • ol:有序列表 ordered list
  • ul:无序列表 unordered list
  • dl:自定义列表 definition list
  • li:列表项 list item
  • dt:术语名称 definition term
  • dd:属于描述 definition description
  <!-- 有序列表 -->
  <h2>把大象放冰箱分几步？</h2>
  <ol>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
    <li>
      <!-- 包裹元素 -->
      <a href="https://www.baidu.com">去百度</a>
    </li>
  </ol>

  <!-- 无序列表 -->
  <h2>我想去的几个城市</h2>
  <ul>
    <li>新疆喀什</li>
    <li>
      <span>甘肃</span>
      <ul>
        <li>天水</li>
        <li>甘南</li>
        <li>扎尕那</li>
      </ul>
    </li>
    <li>吉林长白山</li>
  </ul>

  <!-- 自定义列表：术语名称，术语定义 -->
  <h2>如何更好的学习？</h2>
  <dl>
    <dt>做好笔记</dt>
    <dd>笔记是复习的好工具</dd>
    <dt>多加练习</dt>
    <dd>学编程90%的时间都要敲代码</dd>
  </dl>

# 注意事项

  • 列表可以嵌套，但是要把结构写完整
  • li必须在ol或者ul标签内
  • 自定义列表用的很少，例如网站下方说明

# 表格

# 几个标签

  • table 表格
  • caption 标题
  • thead 表头
    • tr 表头行
      • th 列名
      • th 列名
  • tbody 内容
    • tr 内容行
      • td 内容单元格
      • td 内容单元格
  • tfoot 脚注
    • tr
      • td
      • td

# 常用属性

标签名 标签语义 常用属性
table 表格 width:设置表格宽度
height:设置表格最小高度
border:设置表格边框宽度
cellspacing:设置单元格之间间距
thead 表格头部 height：设置表格头部高度
align: 设置单元格水平对齐方式
valign: 设置垂直对齐
tbody 表格主体 常用属性与thead相同
tr 行 常用属性与thead相同
tfoot 表格脚注 常用属性与thead相同
td 普通单元格 width:设置单元格宽度，同列所有单元格都受影响。
height：设置单元格高度，同列所有单元格都受影响。
align：设置水平对齐
valign: 设置垂直对齐
rowspan：指定要跨的行数
colspan：指定要跨的列数
th 表头单元格 常用属性与td相同

注意点：

  • table的border属性可以控制表格边框，但并不控制单元格边框

# 补充常用标签

  • br 换行
  • hr 分隔线
  • pre 按原文显示

# 表单标签

# 基本结构

  • form ：表单
    • action：用于指定表单的提交地址
    • target：用于控制表单提交后如何打开页面
      • _self：在当前页打开
      • _blank：在新窗口打开
    • method：表单提交方法 get post
  • input：输入框
    • type： 输入值的类型
    • name：用于指定提交数据的名字
  • button：按钮

# 常用表单结构

  1. 文本输入框：
    • name数据名称;
    • value:输入框默认值,
    • maxlength:输入框最大可输入长度
<input type='text'>
  1. 密码输入框：name、value、maxlength
<input type='password'>
  1. 单选框
    • name：数据名称，多个radio的name要保持一致
    • value：提交的数据值
    • checked：默认选中
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
  1. 复选框
    • name:数据名称
    • value：提交的数据值
    • checked:让复选框默认选中
<input type="checkbox" name="hobby" value="smoke" checked>抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm" checked>烫头
  1. 隐藏域：用户不可见的一个输入区域，作用是提交表单的时候携带一些固定数据
<input type="hidden" name="abc" value="123">
  1. 提交与重置
<!-- 确认第一种写法 -->
<!-- <button>确认</button> -->
<!-- 确认第二种写法 -->
<input type="submit" value="确认">

<!-- 重置第一种写法 -->
<!-- <button type="reset">重置</button> -->
<!-- 重置第二种写法 -->
<input type="reset" value="重置">

注意：button不要name属性，重置的button要写type=reset

  1. 普通按钮
<button type="button">检测账户是否被注册</button>
<input type="button" value="检测账户是否被注册">
  1. 文本域
    • rows：行数
    • cols：列数
<textarea name="other" cols="30" rows="3"></textarea>
  1. 下拉框
    • name：数据名称
    • option
      • value：标签的值
      • selected：默认选中
<select name="place">
	<option value="冀">河北</option>
	<option value="陕" selected>陕西</option>
	<option value="鲁">山东</option>
</select>
  1. label标签：作用是让提示文字和表单控件产生关联，关联后点击对应的文字就可以获取焦点

两种方式：

  • 让label标签的for属性等于表单控件的id
  • 把表单控件嵌套在label标签中

# 分组

fieldset可以为表单分组,legend标签是分组的标题

<fieldset>
    <legend>主要信息</legend>
    ...
</fieldset>

# 思考

单选和多选都是通过input标签的name属性实现的，下拉框是通过select标签的name实现的，注意区别

P30

Last Updated: 11/18/2024, 4:01:47 PM

← 前端查漏补缺—HTML4 →