全栈开发复习之 HTML

学习自 https://www.freecodecamp.com 和 https://www.w3schools.com

新知道的标签和用法：

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
  </datalist> 
</form>

datalist - 将select和input进行组合的一种效果。有下拉框，但同时允许输入。注意input必须有list属性，该属性为datalist的id.


<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

usemap - 分区域超链接


<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

picture - 根据浏览器窗口大小进行图片更换，响应式

display: flex;

flex - 弹性/灵活布局，可为任何容器设置该属性，会覆盖掉float,clear，可极灵活的进行整体布局设计

<aside>

侧边栏 - 类似nav, header, footer

<figure>

独立引用资源 - 单独引用的音频，视频，代码等，效果类似 quote 有缩进效果

<legend>info</legend>

GroupBox标题 - 用在fieldset内，表示标题。

<pre></pre>

保持文本格式的p标签

<out></out>

和普通p标签差不多，表示输出值

不熟悉的标签和用法：

<ins>< / ins>

插入文字 - 下划线

<sub>< / sub>

subscript文字 - 上标注释

<sup>< / sup>

superscript文字 - 下标注释

<q>< / q>

小区域引用 - 自动加引号

<blockquote>< / blockquote>

大区域引用 - 缩进段落头

<abbr title = "whole name">WN< / abbr>

缩写 - 自带下划线并带Tips

<address>< / adsress>

地址 - 斜体

<site>Hally Poter< / site> by Jay in 1992

引用 - 斜体

<bdo dir = "rtl">This< / bdo>

方向重置 - 反向显示字母，如 sihT

<a href = "#OtherID">Link< / a>

内部链接 - 点击后链接到本HTML中的OtherID元素处

<img style = "float"left" src="1.jpg">

依附 - 图片最左/右吸附

table{ border - spacing: 5px; }

Table边缘间隔，和padding不同

<th colspan = "2">Telephone< / th>

Table表项占多列

<th rowspan = "2">Telephone< / th>

Table表项占多行

<caption>Monthly savings< / caption>

Table表添加表单caption标题信息

table#t01 tr : nth - child(even) {}

Table表偶数设定

table#t01 tr : nth - child(odd) {}

Table表奇数设定

<ul style = "list-style-type:disc">

无序列表前符号样式 square，circle，disc, none, 注意和有序列表属性不一样，是style = “list-style-type”

<ol type = "1">

有序列表前符号样式 “1”, “A”, “a”, “i”, “I” ，注意和无序列表属性不一样，是type

<span>text< / span>

效果类似div或p，但不换行，可实现复杂css指定

<noscript>no srcipt support< / noscript>

当浏览器不支持script时触发

<!--[if IE 9]>some HTML<![endif]-->

当浏览器是IE时才触发的HTML

<fieldset>< / fieldset>

类似windows的group box，通常和form组合使用比较好

<meta name = "description" content = "my blog">

页面描述，提供给搜索爬虫，在Head中

<meta name = "keywords" content = "HTML,CSS">

页面关键字，提供给搜索爬虫，在Head中

<meta name = "author" content = "John">

页面开发人员，在Head中

<meta http - equiv = "refresh" content = "30">

30秒刷新一个document页面

<body style = "background-image:url('1.jpg')">< / body>

背景图设置 - 设置大背景图，注意必须有url()方式定义style

table, th, td{ border - collapse: collapse; }

Table边缘合并

<dl><dt>12< / dt><dd>discribe< / dd>< / dl>

注释列表，dd项会被缩进

<h1 style = "font-size:10vw">Hello World< / h1>

设置h1文字大小占当前浏览器窗口大小10%，字体大小根据浏览器窗口大小更变进行自调整。响应式布局。

<p>pressing <kbd>Ctrl + S< / kbd>< / p>

键盘按键描述 - kdb标签中字体会更变成另一字体

<p>return <samp>Error!< / samp>< / p>

程序结果描述 - samp标签中字体更变成另一字体，类似code，经常和pre标签一起使用。注意：是pre标签包含code标签

<p><var>E< / var> = <var>mc< / var><sup>2< / sup>< / p>

变量描述 - var中间的字体会更变成另一字体

<meta name = "viewport" content = "width=device-width, initial-scale=1.0">

设置页面根据显示器屏幕大小进行的适配规则，注意，不是和浏览器窗口大小进行的适配规则。

<meta http - equiv = "Content-Type" content = "text/html;charset=ISO-8859-1">

HTML4字符集表示

<meta charset = "UTF-8">

HTML5字符集表示

<base href = "https://www.xxy.com/d/" target = "_blank">

在header中设置，类似于设置工作目录，之后本页面所有相对url路径，均自带该href前缀，所有link自动为_blank模式打开。

组合小技巧：

<ul style="list-style-type:none"> + li { float: left;}

有序列表横向排列，效果类似横向菜单

<iframe src="1.htm" name="a"></iframe> + <p><a href="2.htm" target="a">redirect</a></p>

指定iframe进行跳转，类似target=”_top/_blank/_parent”但注意不需要target=“#a”

<meta http-equiv="refresh" content="0;url=hello.html">

0秒后直接刷新，跳转到新页面

其他数学符号，箭头，标志符可参见https://www.w3schools.com/charsets/ref_utf_punctuation.asp

常用组件

<input type = "text">

输入框

<input type = "button">

按钮

<input type = "radio">

单选框

<input type = "checkbox">

复选框

<input type = "submit">

提交按钮

<input type = "range">

拉动条

<input type = "number">

输入框（仅允许数字）

<input type = "password">

输入框（密码）

<input type = "color">

颜色选择

<input type = "date">

日期选择（可选择 年 / 月 / 日）

<input type = "datetime-local">

日期和时间选择（可选择 年 / 月 / 日 时 / 分）

<input type = "email">

邮件输入栏

<input type = "month">

日期选择（仅选择 年 / 月）

<input type = "search">

搜索输入栏，类似普通输入框。。。

<input type = "tel">

输入栏，类似普通输入框。。。

<input type = "time">

时间选择（仅选择 时 / 分）

<input type = "url">

网址输入栏

<input type = "week">

周输入栏（仅选择 年 / 周）

<fieldset>

group面板

<select><option>

下拉列表

<select size = "3">

列表栏（单选）

<select size = "4" multiple>

列表栏（多选）

<textarea rows = "10" cols = "30">

多行文本输入区域

<button type = "button" onclick = "alert('1')">2< / button>

按钮，等同于<input type = "button" onclick = "alert('1')" value = "2">

<input list = "browsers"> +<datalist id = "browsers">

下拉列表（可输入）

属性大部分包括

  • value 默认值
  • size 显示长度
  • disable 不可见
  • readonly 可读
  • maxlength 最大输入长度
  • autocomplete 是否可“智能”输入
  • novalidate 仅修饰form，其所属控件不再进行预检测
  • autofocus 抢占焦点
  • form 作为属性时，强制本控件隶属于指定id的form（即使UI上已经不在该form区域内）
  • formaction 会覆盖重写form提交时的action地址（仅作用于Type = sumbit和image的控件）
  • formenctype 会覆盖重写form提交时的加密方式（仅作用于Type = sumbit和image的控件）
  • formmethod 会覆盖重写form提交时的通讯方式GET / POST（仅作用于Type = sumbit和image的控件）
  • formnovalidate 仅作用于image的控件，该控件不再进行预检测
  • formtarget 会覆盖重写form提交后的target 例_blank / _top / _parent等（仅作用于Type = sumbit和image的控件）
  • height and width 显示宽高
  • list 配合datalist控件，可组合成为 可输入型下拉列表
  • min and max 最小最大值限定
  • multiple 是否可多选
  • pattern(regexp) 正则表达时预检测
  • placeholder 占位符显示
  • required 强制输入
  • step 更变步长

HTML5的更变

  1. 加了些灵活布局型标签，例如header, section, footer, aside, nav, main, article, figure等
  2. 加了一些form元素类型，例如datalist，output。
  3. 加了一些input元素类型，例如color，date，datetime，datetime-local，email，month，number，range，search，tel，time，url，week。
  4. 加了一些input元素属性，例如autocomplete，autofocus，form，formaction，formenctype，formmethod，formnovalidate，formtarget，height and width，list，min and max，multiple，pattern (regexp)，placeholder，required，step。
  5. 加了一些音频视频元素类型，例如audio， embed, source, track, video以及更多的多媒体格式，支持插件模式
  6. 加了一些图形处理元素类型，例如canvas和svg（向量画布）
  7. 内置支持了google map元素组件，内置支持youtube连接。
  8. 支持拖拽功能
  9. 支持GPS地理位置查询
  10. 支持web缓存
  11. 支持多线程后台webWorker
  12. 支持服务器消息推送