HTML总结

HTML是网页内容的载体

基本结构

<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    网页主体内容
  </body>
</html>

html注释：<!---->

DOCTYPE文档类型声明: <!DOCTYPE>声明必须放在HTML文档第一行，该声明不是HTML标签

网页编码设置：防止网页显示时出现中文乱码。在<head></head>标签之间添加
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
注：utf-8、GB2312、gbk等编码

文字和段落标签:

  • 标题标签：<h1></h1> ~ <h6></h6>
  • 段落标签：<p></p>
  • align对齐属性值：left：左对齐内容; right：右对齐内容; center：居中对齐内容; justify：对行进行伸展，每行都可以有相等的长度
  • 换行标签：<br/>
  • 文字斜体：<i></i>、<em></em>
  • 加粗：<b></b>、<strong></strong>
  • 下标：<sub>
  • 上标：<sup>

特殊符合

属性 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标\
&reg; ® 已注册
&copy; © 版权
&trade; ™ 商标
&nbsp; Space 空格

无序列表：

<ul>
  <li>列表项</li>
  <li>列表项</li>
  ......
</ul>

<!--list style有disc, square, circle-->

有序列表：

<ol>
  <li>列表项</li>
  <li>列表项</li>
  ......
</ol>

列表标签：

<dl>
  <dt>定义列表项</dt>
  <dd>列表项描述</dd>
  <dd>列表项描述</dd>
  <dt>定义列表项</dt>
  <dd>列表项描述</dd>
  ......
</dl>

<!--dt,dd是同级标签-->

图像标签：<img src="" alt="" />。注：src为必写属性，其他属性：alt, height, width

超链接标签：<a href="">内容</a>。注：href链接地址，可以是内部链接或外部链接

属性 描述
href 链接地址
target 链接的目标窗口：_self, _blank, _top, _parent
title 链接提示文字
name 链接命名

超链接标签实现页面内/外跳转（定义锚）：

    <a href="#锚名1">目录1</a>
    <a href="#锚名2">目录2</a>
    <a href="..." name="锚名1">内容</a>
        xxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxx
    <a href="..." name="锚名2">内容</a>
        xxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxx

超链接实现电子邮件链接：<a href="mailto:邮件地址">...</a>

超链接实现文件下载：<a href="下载文件的地址">...</a>

HTML表格

<table>
  <caption>标题</caption>
  <thead>
    <tr>
      <th>表头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>主体</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>脚注</td>
    </tr>
  </tfoot>
</table>
<!--表格嵌套要在td中-->

表单工作原理：用户访问一个包含表单的饿页面，输入数据后“提交”表单。浏览器将用户在表单中输入的数据进行打包，并发送给服务器。服务器接受数据并转由程序处理。

表单<input>标签：<input type="类型属性" name="名称" value="..." placeholder="...".../>

type属性值 描述
text 文字域
password 密码域
file 文件域
checkbox 复选域
radio 单选域
button 按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏域
image 图像域

HTML其他标签：

  • <input>：表单输入标签
  • <select>：下拉菜单和列表标签
  • <option>：下拉菜单和列表项目标签
  • <optgroup>：下拉菜单和列表项目分组标签
  • <textarea>：文字域标签

<div>标签：区块容器标记，<div></div>之间是一个容器，可以包含段落、表格、图片等各种HTML元素。

<span>标签：没有实际意义，为了应用样式。

HTML标签规则：

  • 块级标签：占据一行，换行，可以设置宽、高，如果不设置宽度，宽度默认为容器的100%。<div>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <h1>~<h6>, <p>, <form>, <hr>...
  • 行内标签：在一行，不换行，不可以设置宽、高，宽高就是文字/图片的宽高。<b>, <em>, <img>, <input>, <a>, <sup>, <sub>, <textarea>, <span>...
  • 块级元素可包含行内元素和某些块级元素.
  • 行内元素不能包含块元素，只能包含其他行内元素
  • 块级元素不能放在<p>标签内
  • 特殊块级元素只能包含行内标签，不能再包含块级元素，如<h1>~<h6>, <p>, <dt>
  • 块级元素与块级元素并列，行内元素与行内元素并列

HTML5

文档类型定义（DTD）：DTD可定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构。在HTML中，DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容。HTML5不基于SGML，所以不需要引用DTD

结构标签（块状元素，有意义的div）：header, section, aside, article, footer不能嵌套；header/section/footer > aside/article/figure/hgroup/nav > div/figcaption

  • <article>：标记定义一篇文章
  • <header>：标记定义一个页面或一个区域头部
  • <nav>：标记定义导航链接
  • <section>：标记定义一个区域
  • <aside>：标记定义页面内容部分的侧边栏
  • <hgroup>：标记定义文件中一个区块的相关信息
  • <figure>：标记定义一组媒体内容以及它们的标题
  • <figcaption>：标记定义figure元素的标题
  • <footer>：标记定义一个页面或一个区域的底部
  • <dialog>：标记定义一个对话框（会话框）类似微信

多媒体标签：多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大的提升了用户体验

  • <video>：标记定义一个视频
  • <audio>：标记定义音频内容
  • <source>：标记定义媒体资源
  • <canvas>：标记定义图片
  • <embed>：标记定义外部的可交互的内容插件，比如flash

状态标签：

  • <meter>：状态标签，实时状态显示：气压、气温，IE浏览器不兼容
  • <progress>：状态标签，任务过程：安装，加载

列表标签：

  • <datalist>：为input标记定义一个下拉列表，配合option
  • <details>：标记定义一个元素的详细内容，配合summary

其他标签：

  • <ruby>：标记定义注释或音标
  • <rt>：标记定义对ruby的注释内容文本
  • <rp>：告诉那些不支持ruby元素的浏览器如何显示
  • <mark>：标记定义有标记的文本（黄色选中状态）
  • <output>：标记定义一些输出类型，计算表单结果配合oninput事件

删除的标签：

  • 纯表现的元素：basefont、big、center、font、s、strike、tt、u
  • 对可用性产生负面影响的元素：frame、frameset、noframes
  • 产生混淆的元素：acronym、applet、isindex、dir

重定义的标签：显示不变，只是表达的含义进行了重新定义的标签

  • <b>：代表内联文本，通常是粗体，没有传递表示重要的意思
  • <i>：代表内联文本，通常是斜体，没有传递表示重要的意思
  • <dd>：可以同details与figure一同使用，定义包含文本，dialog也可用
  • <dt>：可以同details与figure一同使用，细节汇总，dialog也可用
  • <hr>：不仅表示水平线，还表示主题结束，显示效果相同
  • <menu>：重新定义用户界面的菜单，配合command或者menuitem使用

<input>类型：手机端android/ios键盘显示不同

  • 电子邮件类型：<input type="email" name="email">
  • 统一资源定位符：<input type="url" name="url">
  • 电话号码类型：<input type="tel" name="tel">
  • 数字类型：<input type="number"" name="number">
  • range类型：<input type="range" name="range" min="1" max="10">
  • search类型：<input type="search" name="search">
  • color类型：<input type="color" name="color">
  • date pickers类型：<input type="date" name="date">
    • date：选取日、月、年
    • month：选取月、年
    • week：选取周、年
    • time：选取时间（小时和分钟）
    • datetime：选取时间、日、月、年（UTC时间）
    • datetime-local：选取时间、日、月、年（本地时间）

表单属性

  • autocomplete属性：form或input域有自动完成标签
    • <form autocomplete="on"></form>
    • 该属性适用于<form>标签，以及以下类型的<input>标签：text, search, url, telephone, email, password, datepickers, range, color
  • autofocus属性：规定在页面加载时，域自动的获得焦点
  • multiple属性：规定输入域中可选择多个值。
    • <input type="file" multiple="multiple" />
    • 该属性适用于以下类型的<input>标签：emial，file
  • placeholder属性：提供一种提示（hint），描述输入域所期待的值
    • <input type="search" placeholder="search content" />
  • required属性：规定必须在提交之前填写输入域
    • <input type="text" required />
    • 该属性适用于以下类型的<input>标签：text, search, url, telphone, email, password, data pickers, number, checkbox, radio, file

script:

  • defer：规定当页面已完成加载后，才会执行脚本
  • async：规定一旦脚本可用，则会异步执行

posted on 2020-09-16 17:28  DemiMiracle  阅读(101)  评论(0)    收藏  举报