前端学习—HTML
前端学习
html概括
HTML结构标签定义网页内容
CSS样式配置，规定网页布局
JavaScript编程网页行为
HTML超文本标记语言，是一套标记标签，描述网页的
XHTML是以XML格式编写的HTML
HTML文档也叫web页面，由互相嵌套的HTML元素构成
对于中文网页需要使用<meta charset="utf-8">声明编码，有的浏览器默认GBK编码
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
html中只有一个单位像素，所以单位可以省略
<!-- 注释-->
HTML文档的后缀名 .html .htm
HTML的网页结构
只有body标签里<白色区域>才会在浏览器显示
块级元素：显示时以新行开始和结束
内联元素：显示时不会以新行显示
html的表单用于收集用户的输入信息，表示文档的一个区域，将用户收集的信息发送到web服务器
html标签
<!DOCTYPE html> 声明html5文档
HTML标签是成对出现的，尖括号包围 <开始标签>内容</结束标签>
某些标签是空内容，空元素在开始标签内进行关闭（以开始标签的结束而结束）例如<标签 />
大多数HTML标签具有属性，标签对大小不敏感，建议使用小写
<html>元素HTML页面的根元素
<head> 头元素，包含了文档的元数据
html标签包含了所有的头部标签元素
在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>
<title>文档的标题
定义浏览器工具栏的标题，必需的
<base>描述了基本的链接地址/目标，作为文档中所有链接标签的默认链接
<link>定义了文档与外部资源之间的关系,通常用于链接到样式表
<style>定义文档的样式文件引用地址，可以直接添加样式来渲染html文档
<meta>标签通常用于指定网页的描述，文件的最后修改时间，作者，和其他元数据，页面不显示
<script>加载js脚本文件
<body>文档的可见页面内容
<h1>...<h6>Html的标题
<p>Html段落,块级元素,浏览器自动在段落前后添加空行
<a>Html的链接，在href属性指定链接地址
<a href="URL定义连接目标" target="定义链接打开方式" rel="定义链接和目标页面的关系">链接文本</a>
target:
_blank: 在新窗口或新标签页中打开链接。_self: 在当前窗口或标签页中打开链接（默认）。_parent: 在父框架中打开链接。_top: 在整个窗口中打开链接，取消任何框架。rel:
nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接。
noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题
noopener: 防止新的浏览上下文（页面）访问window.opener属性和open方法。 noreferrer: 不发送referer header（即不告诉目标网站你从哪里来的)
class：定义指定元素的类名，css定义
style: 在元素上定义css样式
url链接 请始终将正斜杠添加到子文件夹，否则会调用https两次
<img> Html的图像，图像的名称和尺寸以属性的方式提供
<img src="url" alt="some_text" width="304" height="228">
url:图像地址
alt:为图像预备不显示时可替换的文本
width/height:默认单位为像素
<table>表格：展示结构化数据
tr:表格的行
td:单元格
th:表格的表头元素
列表
<ul> 无序列表，每个列表项始于 <li> 标签。ul的属性已废弃，使用css属性style
<ol>有序列表，每个列表项始于 <li> 标签。
<dl>自定义列表，而是项目及其注释的组合，每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
<hr>标签在HTML页面创建水平线，分隔内容
<br>换行
<b>文本加粗 ， <i>文本倾斜
<div>块级元素，无含义，用于文档布局，常与CSS连用对大的内容设置样式属性
<span>内联元素，无含义，用于对部分文本设置样式属性
<form>元素创建表单
<form action="表单提交的目标url" method="提交数据的http方法（post/get）"> </form>
<label>元素为表单元素增加标签，提供可访问性
<input >创建文本输入框、密码框、单选按钮、复选框等
<input type="输入框类型" id="关联<label>元素" name="标识表单元素">
<select> 创建下拉列表，<option> 定义下拉列表的选项
表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。
<iframe >
<iframe src="URL" width="200" height="200" ></iframe> url指向不同的网页，width/height定义标签的宽度和高度，单位为像素
<script>定义客户端脚本
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
<noscript> 提供无法使用脚本时的替代内容，只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：
html5新增标签
<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成
<canvas>标签只是图像容器，必须用 JavaScript 脚本来绘制图像
Canvas 通过 JavaScript 来绘制 2D 图形。
<svg>SVG图象的容器
SVG可缩放矢量图象
SVG使用xml模式2d图象的
<math>数学标记语言
基于xml标准，用来在互联网上书写数学符号和公式的置标语言。
属性
属性是html元素的附件信息，通常出现在开始标签中，定义元素的行为样式，name="value"的形式
全局属性：所有html都能使用的属性
id:为元素指定唯一标识符
class:为元素指定一个或多个类名，供css和js选择
style:直接在元素上使用css样式
title:为元素提供额外的信息，通常在鼠标悬停的时候展示
data-*:自定义属性（*为自定义变量），自定义数据，通常用于js读取
特定元素的属性：
href:（用于 <a> 和 <link> 元素）指定链接目标的URL
src:（用于 <img>, <script>, <iframe> 等元素）指定外部资源的URL
alt:（用于 <img> 元素）为图片提供替代文本，图片不显示时显示文本
type:（用于 <input> 和 <button> 元素）显示输入控件的类型
disabled（用于表单元素）：禁用元素，使其不可交互。
checked（用于 <input type="checkbox"> 和 <input type="radio">）：指定复选框或单选按钮是否被选中。
value（用于 <input>, <button>, <option> 等元素）：指定元素的初始值。
placeholder（用于 <input> 和 <textarea> 元素）：在输入框中显示提示文本。
target（用于 <a> 和 <form> 元素）：指定链接或表单提交的目标窗口或框架。
布尔属性
不需要值的属性，存在为true，不存在为false
disabled禁用元素
readonly 输入框只读
required 指定输入字段为必填
autoplay（用于 <audio> 和 <video> 元素）：自动播放媒体。
事件处理属性
HTML 元素可以通过事件处理属性来响应特定的事件，如点击、鼠标悬停等。
onclick:点击元素时触发
onmouseover:鼠标悬停时触发
onchange:元素值变化是触发