前端学习—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>描述了基本的链接地址/目标，作为文档中所有链接标签的默认链接

<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 src="URL" width="200" height="200" ></iframe> url指向不同的网页，width/height定义标签的宽度和高度，单位为像素

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

<noscript> 提供无法使用脚本时的替代内容，只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

html5新增标签

<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成

<canvas>标签只是图像容器，必须用 JavaScript 脚本来绘制图像

Canvas 通过 JavaScript 来绘制 2D 图形。

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:元素值变化是触发