HTML重点标签

预览效果

测试、预览网页效果时，不要双击打开*.html文件，要输入网址打开。

终端安装在线阅览效果的插件
yarn global add http-server
怎么用？
http-server . -c-1 -c缓存-1不缓存
可以缩写hs . -c-1
在浏览器路径里写/[文件名].html
安装parcel
yarn global add parcel
怎么用？
parcel [文件名.html]

a标签

<a> - HTML（超文本标记语言） | MDN
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

路径[/a/b/c和a/b/c是不同意思，/a表示在根目录下]
href="javasript:;" 啥都不做
href="mailto:XXX@126.com"发邮件给XXX
href="tel:你的手机号"打电话给XXX
target
- target="_self" 当前页面打开，默认值
- target="_blank" 新标签打开
- target="_top" 当前页面顶级窗口打开
- target="_parent" 当前链接的所在的iframe上级窗口打开
- target="xxx" 套个百度，谷歌进 iframe

target指向iframe示例

<body>
  <a href="http://google.com" target="xxx">google</a>
  <a href="http://baidu.com" target="xxx">baidu</a>
<hr>
<iframe style="border: none; width: 100%; height: 1000px;" name="xxx"></iframe>

download 不打开页面，而是下载页面，不是所有浏览器支持
rel=nodopener
id href=#xxx

可点击图片示例

<a href="https://developer.mozilla.org/en-US/">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" 
       alt="MDN logo" />
</a>

img 标签图片

用于一份图像嵌入文档
<img>：图像嵌入元素 - HTML（超文本标记语言） | MDN

src：指定图片链接地址（必须）
width/height：设置宽度/高度，设置一个就行，永远不要图片变形
title：设置图片标题，鼠标悬浮在图片上时显示
alt：设置提示，当图片加载失败时会显示
onload 事件
onerror 事件
max-width:100% 响应式

示例

<img class="fit-picture"
     src="/media/examples/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">

table 标签表格

素表示表格数据 — 即通过二维数据表表示的信息。
<table> - HTML（超文本标记语言） | MDN

表格相关的HTML元素

<thead>里面<tr>表行，包<th>,<th>是表头数据标题，th=table head
<tbody>里面<tr>表行。包<td>,<td>是表内容,td=table data
<tfoot>表尾（表格说明与备注部分）
<caption>表格主标题，位于表格之外

table样式

table-layout=自动算
- auto 自动算法，根据内容调宽
- fixed 自动算法，平均宽

table相关

可能特别有用的关于设定表格元素样式的CSS属性:
- width 控制表格的宽度;
- border ,border-style ,border-color ,border-width ,border-collapse
- border -spacing 控制单元格边框,规则和框架方面;
- margin 和padding 设定特定的单元格内容样式
- text -align 和vertical -align 定义文本和单元格内容的对齐方式。

form 标签

元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
form - HTML（超文本标记语言） | MDN

作用

发送get或者post请求，然后刷新页面，必须要有type="submit"的按钮。

属性

action 处理表单提交的 URL。这个值可被 <button>、<input type="submit"> 或 <input type="image"> 元素上的 formaction 属性覆盖。
autocomplete
method浏览器使用这种 HTTP 方式来提交表单. 可能的值有：
- post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器.
- get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 '?' 作为分隔符，没有副作用时使用这个方法。
- dialog：如果表单在 <dialog> 元素中，提交时关闭对话框。
target 表示在提交表单之后，在哪里显示响应信息。

事件

onsubmit

input 标签

<input>：输入（表单输入）元素 - HTML（超文本标记语言） | MDN
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

作用

让用户输入内容

属性

type="radio" 单选
type="checkbox" 多选
type="file" 上传文件
type="file" multiple 上传多个文件
type="password" 密码
<textarea style="resize:none【文本框不能变大小】; width:300px;height:300px" />

选择器
<select>
  <option value="">请选择</option>
  <option value="1">星期一</option>
  <option value="2">星期二</option>
</select>

事件

onchange 输入改变变化时
onfocus 输入聚焦时
onblur 离开聚焦时

验证器

<input type="text" required />加了required就必须填，不然submit不了。
还有其他方式，后见JS的用法。