HTML

2017-12-24 本文已影响22人 bowen_wu

HTML（HyperText Markup Language）

DOCTYPE
选择文档类型。

<!DOTYPE html>

div、span 标签没有默认样式
empty element
在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。在 HTML 中有以下这些空元素：

<area>
<base>
<br>
<col>
<colgroup>
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

<base> 指定用于一个文档中包含的所有相对URL的基本URL。一份中只能有一个<base>元素。empty element
如果指定了多个 <base> 元素，只会使用第一个 href 和 target 值, 其余都会被忽略。

<base href="http://www.example.com/">
<base target="_blank" href="http://www.example.com/">

可替换元素（replaced element）
在 CSS 里，可替换元素的展现不是由 CSS 来控制的。这些元素是一类外观渲染独立于 CSS 的外部对象。典型的可替换元素有 <img>、<object>、<video> 和表单元素，如 <input>、<textarea> 。某些元素只在一些特殊情况下才表现为可替换元素，例如 <audio>、<canvas>

通过 CSS
content属性来插入的对象被称作 匿名可替换元素（anonymous replaced elements）。
CSS在某些情况下会对可替换元素做特殊处理，比如计算外边距和一些auto值。
需要注意的是，一部分（并非全部）可替换元素，本身具有尺寸和基线（baseline），会被像vertical-align之类的一些 CSS 属性用到。

HTMLElement.contentEditable属性用于表明元素是否是可编辑的。值：

true : 表明该元素可以编辑
false ： 表明该元素不可以编辑
inherit ： 表明该元素继承了其父元素的可编辑状态

语法

editable = element.contentEditable
element.contentEditable = "true"

<input type='range'> 用于输入不精确值控件。如果未指定相应属性，控件使用如下缺省值：

max：0
min：100
value：min + (max-min)/2，或当 max 小于 min 时使用 min
step：1

<meter> 用来显示已知范围的标量值或者分数值。
属性：

value：当前值
max：最大值
min：最小值
low：定义了低值区间的上限值。如果设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，其值即为最小值。
high：定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于low值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。
optimum：这个属性用来指示最优/最佳取值。
-form：该属性将本元素与对应的form元素关联。

<aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。
命令行 whois 可以查看某个域名拥有者的身份。
SVG 是 XML 形式。

iframe HTML内联框架元素表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。默认高度50px，宽度100px。
属性：

name ==> 嵌入的浏览上下文（框架）的名称。该名称可以用作*<a>标签*，*<form>标签*的`target`属性值。
frameborder = 0；清除 iframe 的默认border。
src ==> 可以写相对路径。src = './index2.html'

<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe example 1" width="400" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

width 可以为 100% ，height 不可以为 100% 。

a 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。[ 跳转页面（HTTP GET 请求）[ 会把参数放到查询参数中 ] ]
属性

target = '_blank'：在新窗口打开
target = '_self'：在自身窗口打开
target = '_parent'：在父窗口打开
target = '_top'：在顶层窗口打开
download：此属性指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。
href：`qq.com` 不会跳转到 `qq.com` ，因为 `qq.com` 是相对地址，会跳转到 `/qq.com` 路径。
      `//qq.com` 浏览器默认添加协议，协议为当前文件为什么协议就使用什么协议。
       "" 空，跳转自身，页面刷新，发起请求。
       #xxx 锚点（页面内的跳转）。不会发起请求。当锚点为 空 时，会跳转到顶部。
       ?name=xxx 查询字符串。发起 GET 请求
       javascript:; javascript伪协议（ javascrip: alert(1) ,弹出alert 警告框）。javascript:; ==> 点击 a 标签不会做任何事情

注意：<a target="xxx" href="xxx"></a> 是在 name 为 xxx 的窗口或者 iframe 打开新页面

下载文件两种方法：
a. HTTP 响应：Content-Type: application/octet-stream，浏览器将以下载的形式接收请求。
b. 如果HTTP 响应：Content-Type: text/html 时，可以使用 dowmload 属性告知浏览器进行下载文件。
安装 http-server ：npm i -g http-server 之后运行 http-server
使用：http-server -c-1 不要缓存
form 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。[ 跳转页面（HTTP POST 请求 [ 会把参数放到 form data 中 ]） ]
属性：
```
action：一个处理这个form信息的程序所在的URL
method：浏览器使用这种 HTTP 方式来提交 form。值为 POST 或者 GET（不用）
target：和 a 标签相同
```

form 表单中必须有提交按钮。
提交按钮形式：

 <input type= 'submit' value= '提交' >
 <button>提交</button>（条件为：form 表单中只有这一个按钮，且没有写 type ，则 button 会升级为 submit ，若有 type= 'button' ，则 form 表单没有提交按钮。）

input 用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。
属性：

type：控件类型的显示。如果这个属性没有指定，默认的类型是 text。
    button：无缺省行为按钮。
    checkbox：复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。
    radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。
disabled：这个布尔属性表示此表单控件不可用。
name：控件的名称，与表单数据一起提交。
placeholder：提示用户输入框的作用。仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。
required：这个属性指定用户在提交表单之前必须为该元素填充值。
value： 控件的初始值. 此属性是可选的，除非type 属性是radio或checkbox.

说明：如果 type= 'radio' 或者 type= 'checkbox' 则必须提供 value ，value 的值将作为 name 的值提交到服务器（<label>性别<input type= 'radio' name='sex' value= 'male'><label> ==> ...&sex=male&...）。

input和label的使用

<label for= 'username'>用户名</label>
<input type= 'text' id= 'username' name= 'username' placeholder= '请输入用户名' >

最佳实践

<label>用户名<input type= 'text' name= 'username' placeholder= '请输入用户名'>

button 表示一个可点击的按钮。能够在表单，或者 HTML 文档的任一需要按钮的位置。
说明：input 和 button 的区别为 input 没有子元素，而 button 可以有子元素。

select 表示一种表单控件，可创建选项菜单。
属性：

name：控件名称。必须提供，提交表单时 `name` 的值作为参数提交给服务器。
multiple：这个布尔值的属性标记select是否可以多选. 默认是单选.

option 用于定义在 <select> ， <optgroup> 或 <datalist> 元素中包含的项。
属性：

select：如果存在, 则这个布尔属性表明，这个选项初始被选中。
value：这个属性的内容代表这个选项选中的话，提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。
disabled：如果设置了这个布尔属性，选项就不是可选的。

<textarea> 表示一个多行纯文本编辑控件。
属性：

name：元素的名称。必须提供，提交表单时 `name` 的值作为参数提交给服务器。
resiz : none：去掉文本域右下角的默认的灰色斜杠。
cols：文本域的可是宽度。必须为正数，默认为20 (HTML5)。[ 大概估计，推荐使用 CSS ]
rows：元素的输入文本的行数（显示的高度）。[ 大概估计，推荐使用 CSS ]

说明：一般的 <textarea> 宽度高度是可以随意拉动的，但是会造成一些 bug ，所以要用 CSS 固定其大小 style= 'resize: none ; width : 200px ; height : 200px ; '

table 表示表格数据 — 即通过二维数据表表示的信息。

<table border = 1 style= 'border-collapse: collapse'> 
// style= 'border-collapse: collapse'合并边框，中间没有空隙。
  <colgroup>
    <col width = 100>
    <col width = 100>
    <col width = 100>
    <col width = 100>
  </colgroup>
  <thead>
    <tr>
      <th></th><th>数学</th><th>语文</th><th>英语</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <th>小明</th><td>80</td><td>88</td><td>92</td>
    </tr>
    <tr>
      <th>小王</th><td>90</td><td>88</td><td>95</td>
    </tr>
    <tr>
      <th>小赵</th><td>70</td><td>90</td><td>86</td>
    </tr>
    <tr>
      <th>小李</th><td>99</td><td>76</td><td>80</td>
    </tr>
  </tbody>
  <tfooter>
    <tr>
      <th>总分</th><td>339</td><td>342</td><td>353</td>
    </tr>
    <tr>
      <th>平均分</th><td>84.75</td><td>85.5</td><td>88.25</td>
    </tr>
  </tfooter>
</table>

HTML

HTML（HyperText Markup Language）

猜你喜欢

热点阅读