这是我参与「第四届青训营」笔记创作活动的第1天

HTML简介

HTML是什么？

HTML：Hyper Text Markup Language，超级文本标签（标记）语言，是一种建立网页文件的语言。

使用HTML语言，可将所需表达的信息（如文字、图片、动画、影像、声音等内容）按某种规则编写成HTML文档（.html或.htm作为结尾的文件） ，该文档独立于各种操作系统平台（如Unix、Windows等），通过专用的浏览器来识别，并将HTML文档“翻译”（解释运行）成可以识别的信息，即现在所见到的网页。

HTML标记（标签）

在HTML中，用于表述功能的符号，书写时，必须用尖括号“<>”括起来。标记分为：

封闭型标记：<标记></标记>
非封闭型标记：<标记> 或<标记 />，又称单标记或空标记

说明：
① 标记通常是成对出现
② 单标记 <br /><hr />

HTML元素：

开始标签（start tag）到结束标签（end tag）的所有代码

语法：

HTML元素以开始标签起始
HTML元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些HTML元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数HTML元素可拥有属性

元素的嵌套：即在一个元素中出现另一个元素
语法：<标记1><标记2></标记2><标记1>

HTML属性

为HTML元素提供附加信息

基本语法：
<标记名称 属性名1=“属性值” 属性名2=“属性值” ></标记名称>
<标记名称 属性名1=“属性值” 属性名2=“属性值” />\

注意事项：
属性应写在首标记内，并且和标记名之间有一个空格分隔。
属性值与属性之间用“=”来连接，属性值要用双引号或单引号引起来。
一个元素允许有多个属性，多属性之间排名不分先后，中间用空格隔开。

标记的属性：

通用属性：
id：定义元素在页面中唯一的名称
title：鼠标移入到元素上时所提示的信息
class：指定元素所引用的类选择器（CSS中使用）
style：定义元素的内联样式（CSS中使用）

HTML页面：

<!doctype html>
<html>
    <head>
        <meta charset= "UTF-8">
        <title>页面标题</ title>
    </head>
    <body>
        <hl>一级标题</hl>
        <p>段落内容</p>
    </body>
</html>

网页要表示的信息的开始和结束：`<html>< /html>`

网页头部信息：`<head>< /head>`

子级元素：网页标题：<title>标题内容< /title>
定义或引入css文件：<style>< /style>
引入JavaScript文件：<script>< /script>
网页元数据：<meta>

网页主体信息：`<body>< /body>`

HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly

文本与段落标记

常用文本标签

标记	说明
<h#></h#>	标题标记，#=1,2,3,4,5,6，定义了6级标题，每级标题的字体大小依次递减，即数字越大字体越小。该标记自动插入一个空行。属性align设定对齐方式：center：居中；left：左对齐（默认）；right：右对齐
<font></font>	字体标记：size属性，设置字体大小，取值从1到7。数字越大字号越大；color属性，设计字体颜色，使用名字常量或RGB的十六进制值，face属性，设计字体字型，例如“宋体”、“楷体”等
<p></p>	段落标记：属性align指定对齐方式。
<blockquote></blockquote>	长文本引用，默认带有左右40px的外间距，不带“”。
<q></q>	引用上下文，在内容的开始和结尾处会包有“”。
<cite></cite>	对某个参考文献的引用，比如书籍或者杂志的标题。引用的文本将以斜体显示。
<hr/>	水平分隔线标记：属性width设置线的长度（单位像素），size设置线的粗细（单位像素），color设置线的颜色，align设置对齐方式
<br/>	插入一个回车换行符
<sub>	用于以下标的形式显示文本
<sup>	用于以上标的形式显示文本
<u>	用于实现下划线
<b></b>	字体加粗标记
<i></i>	斜体标记
<strong></strong>	加重文本标记（通常是斜体加黑体）

文本颜色

颜色由红色（Red）、绿色（Green）、蓝色（Blue）三种基色混合而成，简称RGB。每种颜色的最小值是0（十六进制为#00），最大值是255（十六进制为#FF）。
大多数的浏览器都支持颜色名集合，它们分别是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、 purple、red、silver、teal、white和yellow。

注意：
(1)rgb()的参数是十进制数，且只能作为CSS样式属性值，而不能作为标签属性值。
(2)标签<font>具有属性color，取值为色彩名或色彩值。
(3)#FF00FF等效于#F0F。（全部两两相同才可简写）

度量单位

在HTML文档里，字体除了有颜色特性，还有大小特性。表格和图像等页面元素，也需要有度量大小的单位。
HTML中，度量的主要单位如下：

px：像素单位（计算机屏幕上的一个点），是绝对单位；
%：百分比（相对当前屏幕尺寸的百分比），能适应屏幕大小；
em：相对于当前字体尺寸的倍数，能方便地实现首先缩进2个汉字。

（4）常用特殊转义字符

字符	转义字符
<	&lt；
>	&gt；
&	&amp；
空格	&nbsp；
"	&quot；
©	&copy；
¥	&yen；

列表标签

有序列表——order list

语法格式及属性：

无序列表——unorder list

语法格式及属性：

自定义列表：根据需求自定义列表

语法格式及属性：

超链接标签

超链接是指从一个对象指向另一个对象的指针，它可以是网页中的一段文字也可以是一张图片。实现从一个页面到另一个页面的跳转。

URL

URL：统一资源定位符/定位器，又称路径，用来描述资源位置的信息

① 绝对路径：

从资源文件所在的最高级目录下开始的完整路径表示
获取网络资源文件只能用绝对路径，由以下内容组成：

通信协议：http 或 https，冒号和两个斜杠为通信协议与主机名之间的分隔符
主机名：域名或IP地址，如 www.baidu.com
目录路径：获取的文件在主机上的目录结构
文件名：获取的文件名字

例：

https://www.baidu.com/img/bd_logo1.png

② 相对路径：

从当前文件位置处开始去查找资源文件所经过的路径

相同目录下，直接通过名称进行引用，如 a.jpg
子目录，先进入，再引用,如 Images/b.jpg
父目录，先返回，再引用,“../”表示返回一级，如../a.jpg

③ 根相对路径：

从Web站点所在的服务器根目录下开始查找，以斜线“/”开始

（2）超链接语法及属性：

<a href=“值” target=“值”>超链接文本或图片</a>

属性href：指定链接的目标（另一个网页的路径）
target：目标窗口，取值有：

_self：默认值
_blank：浏览器总在一个新打开、未命名的窗口
_parent：使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效
_top：用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口

（3）超链接的表现形式：

外部链接：

资源下载：链接地址为 .zip 、.rar
电子邮件链接：<a href=“mailto:abc@163.com”>发送邮件</a>
返回页面顶部的空链接：<a href=“#”>返回顶部</a>
链接到JavaScript：<a href=“javascript:js代码”></a>

锚记链接：

定义锚点（做记号）：

通过 a 标记的 name 属性：<a name=”锚点名称”>内容</a>，尽量英文下划线连字符
通过任意标记的 id 属性：<标记 id=”锚点名称”></标记>

链接到锚点（跳转到锚点处）：

<a href=”#锚点名称”></a>：跳转的本页的锚点
<a href=”页面URL#锚点名称”></a>：跳转到指定页面的锚点

图片标签

语法与属性：

<img src="url" height="" width =""  alt="" />

src：指定图像源的URL路径
alt：替代文本（如：图片加载中）；
height：图片的高度；
width：图片的宽度

行内元素与块级元素

行内元素：多个元素会在一行内显示，元素的宽度、高度及顶部和底部边距不可设置；元素的宽度是它包含的文字或图片的宽度，不可改变。如<span>、<b>、<td>、 <a>、 <i>、<strong>等。
行内块级元素：多个元素会在一行内显示，元素的宽度、高度及顶部和底部边距可设置。如<img> <input> <marquee>
块级元素：每个元素独立成行，如<h1>~<h6>、<p>、<ol>、<ul>、<div>、<form> <table>等，元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。

span与div

<span> 元素

<span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
使用<span> 来组合行内元素，以便通过样式来格式化它们。
如果不对<span> 应用样式，那么<span> 元素中的文本与其他文本不会任何视觉上的差异。

可以为 <span> 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
例：

<p><span>some text.</span>some other text.</p>

<div> 元素

<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记<div> ，那么该标签的作用会变得更加有效。
例：

<div style="color:#00FF00"> 
  <h3>This is a header</h3> 
  <p>This is a paragraph.</p>
</div>

表单元素

表单用于显示、收集用户信息，并提交给服务器。
完整的表单由两部分组成：

前端：由表单元素和更够与用户实现交互的表单控件构成
服务器端：表单提交后的处理

表单元素介绍：

用于定义表单的提交信息，如提交地址，提交方式等
语法：

 <form name="表单名" method="提交方法" action="处理程序">
    ………
 </form>

注意：
只有出现在 form 中的表单控件的数据才会被提交
form 在页面中没有显示效果，只有功能

属性：

action属性：
作用：指定提交给服务器处理程序的地址，若省略不写，默认提交给本页。
method属性：
指定提交数据的方法，取值为：

get：获取，特点是以明文的方式提交数据到服务器（数据会显示在地址栏上），安全性较低。
post：（邮递，打包）邮寄，特点：以隐式的方式提交数据到服务器（不会显示），安全性较高。

enctype属性：
指定表单数据的编码方式，即什么样的收据允许被提交，取值为：

application/x-www-form-urlencoded : 默认值，可以将所有的数据提交给服务器（文件除外）
multipart/form-data ：可以将文件提交给服务器
text/plain ：只允许将普通字符提交给服务器，特殊字符无法提交（=，&，?）。

表单控件：

标签	具体描述
form	定义供用户输入的表单
input	定义输入域
textarea	定义文本域 (一个多行的输入控件)
label	定义一个控制的标签
select	定义一个选择列表
option	定义下拉列表中的选项
button	定义一个按钮

<input>标记：用于定义一个用户输入区

基本语法：<input> 或 <input />
通用属性：

type：根据不同的type值，创建不同的输入控件
name：定义控件的名称，提供给服务器端使用，建议采用控件缩写+功能形式命名
value：定义控件的值，提供给服务器端使用
disabled：禁用控件（无法操作，无法提交），该属性无值

名称	格式	说明
文本域	<input type="text" name="文本字段名称"maxlength=" " size=" " value=" ">	size与maxlength属性用来定义此区域显示的尺寸大小与输入的最大字符数
密码域	<input type="password" name="密码字段名称"size=" " maxlength=" " value=" " >	当用户输入密码时，区域内将会显示“*”号代替用户输入的内容
单选按钮	<input type="radio" name=" " value=" " checked />	checked属性用来设置该单选按钮默认状态是否被选中。当有多个互斥的单选按钮时，设置相同的name值
复选框	<input type="checkbox" name=" " value=" " checked />	checked属性用来设置该复选框默认状态是否被选中，当有多个复选框时，可设置相同的name值，也可以设置不同的name值
提交按钮	<input type="submit" name=" " value=" "/>	将表单内容提交给服务器的按钮
取消按钮	<input type="reset" name=" " value=" "/>	将表单内容全部清除，重新填写的按钮
图像按钮image	<input type="image" src="图片"/>	使用图像代替submit按钮，图像的源文件名由src属性指定
文件域	<input type="file" name=" " size=" " maxlength=" ">	上传文件
隐藏域	<input type="hidden" name=" " value=" " />	用户不能在其中输入信息，用来预设某些要传递的信息

<textarea>标记：用于创建一个可以输入多行文本的文本域

基本语法：<textarea></textarea>
常用属性：

name：用来标记文本区域，缩写txt
cols：设置文本域的字符宽度值，以字符数为单位
rows：设置文本域允许输入的最大行数
readonly：只读，用户无法修改文本域的内容

<select>标记：用于创建一个可以提供多个选项选择的下拉列表

基本语法：

<select name="" size="" multiple>
      <option value="" selected>…</option>
      <option value="">…</option>
      ……
</select>

select的属性：

name：缩写sel
size：默认显示选项的数量，如果大于1的话，则为滚动列表
multiple：设置多选，无值属性，也会变成滚动列表，配合Ctrl或Shift键实现多选

<fieldset>标记：用于为控件分组

基本语法：

<fieldset>----------分组
	<legend>----------分组标题
		标题名称
	</legend>  
	组内控件  
</fieldset>

多媒体元素

audio元素专门用来播放网络上的音频数据。
viedo元素专门用来播放网络上的视频或电影。使用这两个元素，不需要使用其他任何插件。

video和audio元素具有的属性

属性	属性描述
src	音频或视频文件的路径
width	Video独有，定义video元素的宽度
height	Video独有，定义video元素的高度
autoplay	文件是否自动播放，取值为autoplay或false
controls	文件是否显示控制面板，如要显示，取值为controls
loop	控制文件循环播放的次数，取值true、false、具体整数
poster	Video独有，当视频不可用时，可以使用该元素向用户展示一副替代的图片
preload	preload属性，该属性用于指定视频或音频数据是否加载，如果使用预加载，则浏览器会预先将视频或音频数据进行缓冲，加快播放速度，有3个属性值：none、 metadata、 auto;

HTML | 青训营笔记

HTML简介

HTML是什么？

HTML标记（标签）

HTML元素：

HTML属性

标记的属性：

HTML页面：

网页要表示的信息的开始和结束：<html>< /html>

网页头部信息：<head>< /head>

网页主体信息：<body>< /body>

HTML语法

文本与段落标记

常用文本标签

文本颜色

度量单位

（4）常用特殊转义字符

列表标签

有序列表——order list

无序列表——unorder list

自定义列表：根据需求自定义列表

超链接标签

URL

① 绝对路径：

② 相对路径：

③ 根相对路径：

（2）超链接语法及属性：

（3）超链接的表现形式：

外部链接：

锚记链接：

定义锚点（做记号）：

链接到锚点（跳转到锚点处）：

图片标签

行内元素与块级元素

span与div

<span> 元素

<div> 元素

表单元素

表单元素介绍：

属性：

表单控件：

<input>标记：用于定义一个用户输入区

<textarea>标记：用于创建一个可以输入多行文本的文本域

<select>标记：用于创建一个可以提供多个选项选择的下拉列表

<fieldset>标记：用于为控件分组

多媒体元素

video和audio元素具有的属性

网页要表示的信息的开始和结束：`<html>< /html>`

网页头部信息：`<head>< /head>`

网页主体信息：`<body>< /body>`