EP44-zake学HTML

zake在掘金的账本子
220 阅读4分钟

参考文档：

1，基本语法

1，HTML文档结构

1，HTML文档声明

HTML文档通常以类型声明开始，该声明将帮助浏览器确定其尝试解析和显示的HTML文档类型。

<!DOCTYPE html>

文档声明必须是HTML文档的第一行，且顶格显示，对大小写不敏感。
文档类型声明不是标签，不应具有关闭标签。
浏览器使用文档开头的声明来决定使用怪异模式还是标准模式。
如果文档中没有DOCTYPE将触发文档的怪异模式。
怪异模式最明显的影响是会触发怪异盒模型。

2，HTML文档头部

<head> 将包含页面的常规信息和元数据。
<head>大部分不可见，可以呈现的是title和icon。
<head>的子元素主要包括：

<meta>
<title>
<base>
<link>
<style>
<script>
1，meta
2, title

title元素定义文档的标题，在所有的文档中，title都是必须的。

3，base

base用于指定文档里所有相对URL地址的基础URL,为页面上所有链接规定默认地址和默认打开方式。
文档中的基础URL可以可使用document.baseURL进行查询。

4，link

link标签可以实现资源加载，DNS预解析等功能。

1，link标签与@import的对比
  • link是HTML提供的外部连接元素，不仅可以加载样式文件，还可以加载其他文件，例如：tab上的图片和脚本。而@import是CSS语法，只能用于加载样式文件。
  • 多个link引入的CSS会同时加载，先加载完的优先解析。@import引入的CSS将在页面加载完毕之后再加载。
  • @import是CSS2.1引入的语法，故可在IE5+上才可使用。link没有兼容性问题。
  • link引入的样式权重大于@import引入的样式。

3，HTML骨架结构

一个完整的HTML文档必须包含三个部分：文档声明，文档头部和文档主体。

1,html

<html>代表HTML文档的根，所有其他元素都是该元素的后代。

4，HTML块级元素

在HTML5之前，人们一般将元素分为块级，内联和内联块元素。

1，h

标题（heading）

2，p

段落（paragraph)

3, div

divide
被用来对其他元素进行分组。

4，hr

表示段落级元素之间的主题转换，表示为一条水平线。

5,pre

表示预定义格式文本。

5，HTML内联元素

1，span

通用行内容器。

6，框架

框架<frame>已经被废弃，而内嵌框架<iframe>依然在使用。通过使用框架可以在同一个窗口显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

1，frameset

框架结构标签，也称为框架集。定义了如何将窗口分割为框架，每个frameset定义了行或者列。

2，iframe

内联框架用于在网页中显示网页。iframe可以很方便的创建框架，但是由于创建一个框架就相当于创建了一个完整的页面环境，很耗费资源，因此能不用就尽量不用。

7，替换元素和非替换元素

1，替换元素

在CSS中，可替换元素的显示效果不是由CSS来控制的。这些元素是一种外部对象，他们外观的渲染，是独立于CSS的。 浏览器根据标签和标签的属性来判断具体显示的内容

  • img
  • input “image”类型的input元素就想image元素一样被替换，但是其他类型的image元素是非可替换元素。
  • textarea
  • select
  • iframe
  • video
2，非替换元素

HTML的大多数元素是不可替换元素，浏览器直接显示器内容。

2，HTML多媒体

多媒体元素存储在媒体文件中，确定媒体类型的最常用的方法时查看文件拓展名。

3，表单

除了input元素外，HTML还有8个传统表单控件和5个HTML5新增的表单控件。
传统控件：

  • button
  • select
  • option
  • optgroup 定义option选项组，用于组合选项
  • textarea 多行的文本输入控件
  • fieldset 分组表单内的相关控件
  • legend fieldset标签的标题
  • label input标签的标注，建立文字标签和表单控件的关联。
    label标签的两个属性：
    1, for,规定label绑定到哪个表单控件。for特性值为绑定表单控件的ID特性值。
    2，form规定label字段所属的一个或者多个表单。
    label标签有两种用法:其一是使用for属性，其二是将表单控件嵌套到label标签内部。
<h4>使用for方法</h4>
<label for="male">Male</label>
<input type="radio" name="sex1" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex1" id="female" />
<h4>使用嵌套方法</h4>
<label>Male<input type="radio" name="sex2" /></label>
<br />
<label>Female<input type="radio" name="sex2"  /></label>

1，form元素

form元素有如下属性：

  • accept-charset 字符集

  • action 提交地址

  • autocomplete HTML5新增的一个属性，规定表单是否需要启动自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写过的值。

  • enctype 数据编码，规定在发送到服务器之前如何对表单数据进行编码。大多数情况下该属性不需要设置。

  • method 数据发送方法：post，get。

  • name name为表单名称，

<form method="get" action="form.php" name="test"></form>    
<script>
    var oForm = document.forms.test;
    console.log(oForm.method);//get
</script>
  • novalidate HTML5新增的属性，规定在提交表单是不对其进行验证。
  • target 规定在何处打开action URL，共五个值：_blank, _self, _parent, _top, framename 其中action和name为必填项。

2，input元素

form元素只是一个数据获取元素的容器，而容器内的元素称为表单控件。最常用的表单控件是input元素。

1，input传统属性

  • accept 规定能够通过文件上传进行提交的文件类型。
    只能和type= file配合使用。

  • alt 图像输入替代文本，为用户因为某些原因无法查看图像时提供备选信息。
    只能和type=image的input元素配合使用。

  • checked 规定在页面加载时应该被预先选定的input元素。
    只能和type=checkbox|radio的input元素配合使用。

  • disabled 禁用input元素，不能修改，也不能通过tab键切换到该字段。
    无法和type="hidden"的input元素配合使用。

  • maxlength 规定输入字符的最大长度，以字符个数计。
    只能和type="text"|"password"的元素配合使用。

  • name name属性规定了input元素的名称，用于对提交到表单服务器后的表单数据进行标识，或者在客户端通过JavaScript引用表单数据。
    只有设置了name属性的表单元素才能在提交表单时传递他们的值。

  • readonly 规定input元素为只读。

  • size

  • src 作为提交按钮显示的图像的URL。
    只能和type="image"类型的input元素配合使用。

  • type 规定input元素的类型，默认值是type=text。

  • value

2，input HTML5新增属性
  • autocomplete
  • autofocus
  • novalidate
  • height 用于规定image类型的input标签的图像高度。
  • width 用于规定image类型的input标签的图像宽度。
  • list
  • min
  • max
  • step
  • multuple
  • pattern
  • placeholder
  • required
  • form 表单重写属性：
    表单重写属性允许重写form元素的某些属性设定。其中，formnovalidate适用于button或者input元素；而其他属性适用于submit或者reset的button或者input元素。
  • formaction 重写表单的action属性。
<form action="#" >
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formaction="#" value="以管理员身份提交" />
</form>
  • formenctype 重写表单的enctype属性。
  • formmethod
  • formnovalidate
  • formtarget
3,input元素的10种传统type类型
  • text 单行的输入字段，用户可在其中输入文本。
  • password
  • file 用于文件上传
  • radio 单选按钮
  • checkbox 多选按钮
  • hidden 定义隐藏输入类型，用于在表单中增加对用户不可见，但是需要额外提交的数据。
    disabled属性无法和type="hidden"的input属性一起使用。
//点击提交按钮后，隐藏域的内容test=12会包含在URL中
<form name="form" action="#">
    <input type="hidden" name="test" value="12">
    <input type="submit">
</form>
  • button 定义可点击的按钮，但没有任何行为，常用于在用户点击时启动JavaScript程序。

type="button"的input元素和button属性有许多重叠特性

<input type="button" value="Click me" onclick="alert(1)" />
  • image
  • submit
  • reset
4,input元素的13种新增HTML5 type类型
  • color 调色板
  • tel 表示语义上的电话输入域
  • email 会自动验证email的值
  • url 会自动验证url的值
  • search 表示语义上的搜索框。
  • number 用于处理数字输入
  • range
  • date
  • month
  • week
  • time
  • datetime
  • datetime-local

4，HTML5

其他

1，HTML5标签语义化的好处
  • 无障碍 方便无障碍引擎对网页内容进行解析。
  • SEO 语义清晰，对搜索引擎爬虫友好。
  • 可读性 可读性提高，利于维护
avatar
文章
阅读
粉丝