跳到主要内容

Create by Fall on 2019-07-11 Recently revised in 2022-12-08

HTML5

HTML指的是Hyper Text Markup Language 即超文本标记语言

超文本标记语言的意义：标记特定文本实现特定的效果

关于 xhtml：更加严格的 html 模式，因为移动端的出现，对于浏览器的需求变更，从此舍弃了 xhtml。

标签​

HTML 通过标签的方式，对文本进行标注，从而控制文本的样式，即标记语言

最基础的标签有两个：<div>、<span>

div（块样式）：划分区域的块，支持所有样式、独占一行、默认与父元素宽度相同

span（行内样式）：对文字做内部修饰，宽度由内容决定，不能设置宽高边距等内容

标签的使用方式有两种

  • 闭合标签（双标签）：有开头，有结尾，比如：<div></div>、<span></span>
  • 不闭合标签（单标签）：单个标签，比如：<img>、<link>、<br>

标签中的起始标签可以添加属性，比如：

将 contenteditable 添加到 div 的属性中 <div contenteditable>，可以实现编辑标签内的内容。

标题​

标题是双标签： <h1></h1>、<h2></h2>.....<h6></h6> 六层标题。

将内容书写在标签内，即可实现标题

<h1>一级标题</h1>

在一个网页中，<h1>标题最重要，并且一个.html文件中只能出现一次 h1 标签

段落与文本​

段落标签：<p></p>

文本相关标签，都是双标签

  • <strong> 用来加粗，强调性更强

  • <em> 用来将字体改为斜体，强调性弱

  • <sub>下标

  • <sup>上标

  • 删除文本：<del></del>

  • 插入文本：<ins></ins>

<br>：用于文本换行

<p>
  首先写一个 <strong>强调标签</strong>，然后加一个 <em>斜体标签</em>
</p>
<p>
  氧气的化学式：O<sup>2</sup>
  2的平方这样表示：2<sub>2</sub>
</p>
<p>
  <del>删除了内容</del>
  <ins>一般是下划线修饰</ins>
</p>

注释​

写法：<!-- 注释内容 --> 在浏览器渲染后的页面看不到，只能在代码中看到注释的内容

任何语言的注释都是这个意义：

  • 把暂时不用的代码注释起来，方便以后使用（代码停靠）
  • 对开发人员进行提示（代码提示）

图片标签​

<img>

  • src：引入图片的地址
  • alt ：当图片出现问题的时候，可以显示文字信息进行提示
  • title：鼠标悬停在图片上面的时候的提示信息
  • width、height：调节图片的大小
<img src='ptha.jpg' alt="出错时的内容填充" title="提示信息">

img 标签中的 src 路径

  • 相对路径："./xxx/xxx.jpg"、"../xxx/xxx.jpg"
  • 绝对路径："e:/xxx/xxx/xxx.jpg" 或者是网络绝对路径（URL）：https://blahblah.com

链接标签​

<a></a>：标签双标签

  • href 属性：连接的地址
  • target 属性：可以改变连接的打开方式，
    • 默认值为 _self，在当前页面进行打开
    • 在其他页面打开 _blank

通过在 head 中使用 <base> 标签，进行网页的整体打开方式的编辑

<a href='www.4399.com' target='_blank'>点击进入新的页面</a>

链接和锚点​

锚点可以使用进行当前页面的跳转，跳转到该锚点处

两种方式：

  • 使用 # + id 属性
  • 使用 # + name 属性（name 使用于<a name=""></a>）

列表标签​

列表是用来展示一系列的数据，譬如下面的数据：

  • 苹果
    • 红富士
    • 金冠
  • 香蕉
  • 橘子

共有三类列表：

  • 无序列表：ul > li 符合嵌套的规范，即 ul 内部嵌套 li
  • 有序列表：ol > li 一般使用较少，可以用无序列表进行替代
  • 自定义列表：dl > dd/dt dt（正常子节点显示） dd（本行开头多加一个制表符）

标签的分类​

按类型​

  • block（块元素）
    • 标签：<div>、<p>、<ul>、<li>、<h1>
    • 支持样式：支持所有样式、独占一行、默认与父元素宽度相同
    • 特点：所占区域为矩形
  • inline（行内元素）
    • 标签：<span>、<a>、<em>、<strong>、<img>
    • 支持样式：排列在一起，不支持部分修饰：width、height、margin、padding
    • 特点：宽度由内容决定，所占区域不一定为矩形，行内标签之间会有空隙
  • inline-block（行内块元素）
    • 标签：input、select
    • 特点：挨在一起排列，支持宽高

按内容​

  • Flow：流内容（文档流，就是所有文字，除标签外的内容
  • Sectioning：分区（头部，主体，底部，导航栏，分区
    • <header>、<footer>、<main>、<nav>
  • Phrasing：修饰（文字修饰
    • <span>、<strong>、<label>、<br>、<code>、<sub>、<sup>
  • Metadata：元数据（决定其它内容样式或者行为
    • <base>、<link>、<meta>、<noscript>、<script>、<style>、<title>
  • Heading：标题（一级标题到六级标题，和标题组
    • <hgroup>、<h1>、<h2>、...<h6>
  • Embedded：嵌入的（其它资源嵌入到文档中
    • <audio>、<video>、<canvas>、<iframe>、<img>、<math>、<object>、<svg>
  • Interactive：互动的内容
    • <a>、<audio>、<button>、<details>、<img>、<input>、<label>、<object>、<select>、<textarea>

其他分类​

按显示

替换元素（<img>、<input>）：根据元素标签和属性，来决定元素的具体显示内容

非替换元素（<div>，<h1>，<p>）：将内容直接告诉浏览器，让其显示出来

脚本标签​

<script src='./index.js'></script>

通过 script 标签引用或者撰写脚本，也就是 JavaScript 内容

标签中有的是使用 href 属性引入资源，有的是使用 src 引入资源，前者的意为：hypertext reference 的缩写，即超文本引入，加载这些资源的时候，不会停止对于当前文档的处理。

src 引入则表示作为资源进行引入，浏览器需要加载完毕 src 的内容才会继续往下走。

特殊符号​

由于浏览器会将一部分代码识别，无法渲染，想要使用该符号需要使用这些格式

写法表示的符号
&lt;左尖括号
&gt;右尖括号
&nbsp;空格
&reg;®商标符号
&copy;©版权符号

&nbsp; 因为浏览器只能识别文本中的一个空格，如果想添加空格，需要使用特殊写法

表格标签​

详细的表格标签内容可以在 1.3 章查看。

表格是用来展示表格的数据（对数据按照展示）。

  • table：用于包裹表格
  • tr：行，一个 tr 就是一行，放在 table 内
  • th：加粗的（行），可以理解为 table head
  • td：行中的数据，必须在 tr 标签内部
  • caption：用于放置标题

有嵌套关系的，要符合嵌套规范

table 中的语义化标签：tHead、tBody、tFoot

注：语义化标签只有 tBody 可以在一个表格内出现多次，其它两个只能出现一次

水平对齐方式：样式中设置align ，值可以为left,center,right，

垂直对齐方式：valign ，top,middle,bottom

扩展——table表格标签的特殊属性：

  • 添加边框单线：border-collapse：collapse
  • 隐藏空单元格：empty-cells: hide
  • 斜线分类 ：border/rotate
  • 列分组：colgroup/col
健康登记表
身高体重长相偏好
18079偏好打篮球，梳中分

表单标签​

详细的表格标签内容可以在 1.3 章查看。

表单，用于让用户填写内容的表单（对数据进行获取）。

表单标签中包括的内容有：form、input、textarea、select、label

textarea：多行文本框

可以通过 resize: none 更改属性使文本框不能调节大小

select标签​

下拉标签

<select name="cars">
  <option name="cheap">奥拓</option>
  <option name="middle">大众</option>
  <option name="expensive">宾利</option>
  <option name="top">保时捷</option>
</select>

下拉菜单中如果select中添加multiple='true' 实现多选功能

input标签​

在元素内的可选属性

checked 首次加载时选中

disabled 选择不可用

input 中 type 属性可选值作用
radio定义圆形选择框（单选）
checkbox方形选择框（复选框）
button可定义按钮
file定义输入字段和上传按钮
reset重置表单中的数据
submit可以把数据提交到服务器
text单行的输入字段，默认宽度为20个字符
hidden隐藏的输入字段