2021-01-17

最新推荐文章于 2024-05-01 12:03:21 发布

MESS#

最新推荐文章于 2024-05-01 12:03:21 发布

阅读量152

点赞数 1

分类专栏：学习文章标签： html web

本文链接：https://blog.csdn.net/MESSSage/article/details/112727750

版权

学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Html学习笔记：
HTML是HyperText Markup Language(超文本标记语言)的简写。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。可以使用.html与.htm作为html文件的后缀名。
标记语言：
1、编辑语言：C/JAVA 编辑语言需要编译运行（解析），本身具有逻辑能力和行为能力。
2、脚本语言：javascript 脚本语言被解析器解析运行，本身具有逻辑能力和行为能力。
3、标记语言：html/xml 标记语言不具有逻辑能力和行为能力。

HTML特点：
1、从上往下依次解析；
2、有一定容错性；
3、对大小写不敏感。

1. HTML文档
一个完整的HTML网页是由多个HTML元素按照一定的方式组成的。在这里插入图片描述
DOCTYPE：是一个声明：

<html>

HTML的根元素，用来包含HTML文档的所有元素；

<head>

包含在头部的内容不会被显示在页面中，这里通常包含页面的编码，作者，页面的描述信息，JavaScript的导入，CSS的导入等信息；

<meta>

设置字符编码；

<title>

设置标签页名称；

<body>

在浏览器上想要展示的内容。

2.元素

元素的组成：
<标签内容> 元素内容 </标签内容>
有一些标签没有结束标签–叫单标签或空元素。

元素分类：

块级元素
特点：独占一行空间；
用来布局段落，列表，导航菜单，脚注等结构，不能将块级元素嵌套在行内元素中；
宽度占满整个父级元素，高度由子级元素撑起，可以直接设置宽高属性。
行内元素
特点：与其他元素共享一行空间，一般被嵌套在块级元素中，通常作为段落的一部分出现；
宽高由内容撑起，不能直接设置宽高，不能直接设置上下的内外边距。
空元素
特点：只包含单个标签，通常用于在文档中插入部分内容，例如img。

3. 属性
属性设置：
1、写在开始标签内容（用空格分开）；
2、属性名和属性值之间使用等于号连接；
3、多对属性之间用空格分开。
属性分类：
1、按照公有属性分类：
大多数元素都可以使用的属性
id 元素的唯一标识
class 标识一类元素（可以有多个属性、空格分开）
style 设置行内样，按照式CSS语法设置
title 为标签设置标识、提示
私有属性：为当前标签设置<div id>="one" class="web1201 web1202" style=" " title="hello"
2、按照属性特性分类：
基本属性：属性值使用字符串类型 “ ” ‘ ’
布尔值属性：属性只有ture\false

4 语法
1、空白
在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白
2、实体
在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体，实体以&符开始，以;结尾。
3、注释
注释会被浏览器忽略而不被解析，用户无法看到，注释的作用是让程序员表明代码的含义，方便以后再看的时候能看明白。

<!-- 这是一段注释 -->

5. 标签

P: 段落标签；
Pre段落标题（保留用户所输入的格式）；
H1–H6 ：标题标签；
div:块级元素；
span:行内元素；
img:引入图片（alt:替换图片内容；src:引入图片地址）；
width:图片宽度；
highth:图片高度；
strong：意为强调；
b：加粗；
em：意为强调，突出文章重点，倾斜效果；
i：斜体；
u：下划线；
sup：上标；
sub：下标;
br:标签换行；
hr:设置水平线（size:设置水平线；width:水平线的宽度；alige:水平线的位置）；
a:超链接
超链接可以允许我们从当前文档链接到任意其他文档（其他资源），也可以链接到文档的某个特定部分。

<a href="http://www.baidu.com" target="_blank">百度一下</a>

href（设置直接地址）
1、通过ID属性设置
目标元素的ID值，用于锚点跳转（ href="#目标元素的ID值" ）
2、标准URL
URL使用path来定位文件，path又分为相对路径和绝对路径
3、email

  <a href="mailto:liuyr@briup.com">联系我们</a>

target （设置页面打开方式）
_self (默认，在当前选项卡打开新页面)
_blank(在新选项卡打开新页面)
_top（在顶级框架中打开）
_parent（在父级框架中打开）

6. 表格
<table>在Html文档中代表表格，通过二维数据表表示数据。
Table标签经常需要配合caption thead tfoot tbody tr td th col colgroup一起使用。
caption
表示表格的标题信息
colgroup
列分组
thead
表示表头，包含了以及
tbody
表示表格的表体，包含了很多
tfoot
表示表脚，包含了对表的总结信息
tr 表示表格的行，可以包含td\th元素
align
表格应该如何在文档中对齐，可以取值：left,center,right
border
设定表格边框特性，取整数为值，单位为px
cellpadding
设定内容与单元格之间的距离
cellspacing
设定单元格与单元格之间的距离
width
设定表格的宽度
bgcolor
设定表格的背景色
td/th
表示表格用来包含数据的单元格。常用于表头单元格，th单元格内的内容有居中加粗的效果。
属性
colspan 跨列数
rowspan 跨行数
width 宽度，当宽度太窄以至于无法正确显示单元格内容时，在页面显示的时候会适当的调整。
colgroup
定义一个表中的一组列，只能作为table的子元素，位于caption元素后，其他元素之前。
col
定义一个表中的列，并用于在所有公共单元上定义通用语义，经常作为colgroup元素的子元素。
span
跨列数，即规定有几列可以作为同一列
article
代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任和独立的内容。
section
作为Html文档独立的功能。
header
是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。
nav
是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。
aside
元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。
footer
元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。
address
元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。
figure& figcaption
figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。
details
details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。
open属性
当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false时，其内部的子元素应该被收缩起来不显示。默认值为false
summary子元素
summary元素从属于details，用鼠标单击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供单击。

7. 表单
Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给Web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单控件组成，这些表单控件是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，使用表单控件时一般要配合label标签，用于描述其目的。Form标签可用属性如下：
action 用于处理表单信息的应用程序的地址。
method 浏览器用来提交表单的HTTP方法，常用的get/post。
get 对应于Http协议的GET方法，表单数据被附加在uri上，使用"?"分隔
post 对应于Http协议的POST方法，表单数据包含在HTTP协议的请求报文的体部。
name 设定表单的名称
target 表示浏览器接收到form的提交信息后在哪里显示回应。
_self 在当前选项卡打开响应内容
_blank 在新选项卡打开响应内容

Input表单控件
Input控件用于接受来自用户的数据
type属性，用于设定控件类型，取值如下：
text 单行文本框
password 密码框，输入的内容将会被遮挡。
checkbox 复选框，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中。
radio 单选按钮，必须使用value属性来描述该控件所提交的值，使用checked属性默认选中。一个单选按钮组中所有控件都应该具有相同的name值，这样，每次只能选中按钮组中的某一个控件。
submit 提交按钮
reset 重置按钮
file 文件按钮，该控件用于选中文件系统中的某个文件
hidden 隐藏域，该控件不显示在页面中，但是其值会被提交。
image 图像按钮，必须使用src来加载图片，使用alt来声明替换文本。
button 普通按钮。

Input控件用于接受来自用户的数据，其他可用属性如下
name 用于设定控件名和提交数据的属性名；
value 用于控件值初始化，可选；
checked 单选框，复选框默认选中属性；
disabled 表示禁用组件，禁用组件的值也不能被提交；
size 当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text, password，这时宽度是整数值，表示字符的数目，默认为20 ；
maxlength 指定可以输入的字符的最大值。适用于控件类型为text,password。
button表单控件
按钮控件，在form表单内的按钮有提交表单的功能。其可用属性如下
type ：指定控件类型
取值：button，submit，reset
name ：按钮名称
label表单控件
label 用于表示某一表单控件的标题；
for 与为设定标题的表单控件的ID值一致；
select表单组件
select用于表示下拉列表或列表，其可用属性如下
multiple ：指定控件类型
布尔类型的值，表示是否允许多选，如果select元素不包含属性size和属性multiple时，表单类型显示为菜单（组合框），如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框。
size ：显示的行数
当要表示一个可以滚动的列表时候，size表示同时展示的行数。默认值为0。表示非列表显示。
disabled ：表示禁用控件，禁用控件的值也不能被提交
name ：用于指定该组件的名字，会与其option子元素的value值组成键值对随其他表单数据一齐被提交
option表单组件
option：用于表示选项，常包含在 , 中
disabled：表示禁用组件，禁用组件的值也不能被提交
value ：定义控件的初始值。提交表单时，初始值会被提交给服务器。
selected ：表示该选项默认被选中
optgroup表单组件
optgroup：用于表示包含option的选项组，常包含在中
disabled ：表示禁用组件，禁用组件的值也不能被提交
label ：表示选项组的名称
textarea
textarea用于表示多行文本框，没有value属性，其值被包含在标签内
rows ：定义文本框的行数
cols ：定义文本框的列数
disabled ：表示禁用控件，禁用组件的值也不能被提交
readonly ：表示该控件只读，其值依然会被提交
name ：用于指定该控件的名字，会随着其值一同被提交到后台
fieldset控件
fieldse：t控件用于在一个web表单中对多个控件和标签进行分组
disabled：禁用filedset元素，该属性会影响fieldset的子元素
name ：fieldset元素的名称
fieldset的标题由legend标签提供

8.新增表单元素
progress
progress：表示任务的完成情况，常用于进度条
max ：定义进度元素所要求的任务的工作量，默认值为1
value ：定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。
meter
meter元素表示规定范围内的数量值。例如：磁盘使用量，某个候选者的投票人数占总投票人数的比例等
value 在元素中特地表示出来的实际值，该值在min与max之间，如果未指定，该值默认为1
min 指定规定范围时允许使用的最小值，默认为0
max 指定规定范围时允许使用的最大值，默认为1
low 规定范围的下限值必须小于或等于high属性的值
high 规定范围的上限值（表示较高危险的意思）
optimum 最佳值，最优值
Form
在H5中，可以将表单内的从属元素书写在页面上的任何地方，然后为该元素指定一个form属性，属性值为该表单的id。
formaction
一般用于提交按钮和图片按钮上，用于指定处理表单提交的后台程序，可以重写form中的action属性。
formenctype
一般用于提交按钮和图片按钮上，用于指定处理表单的内容类型。
formmethod
一般用于提交按钮和图片按钮上，用于指定表单的提交方式。
formnovalidate
一般用于提交按钮和图片按钮上，布尔类型，提交时表单不被验证。
formtarget
一般用于提交按钮和图片按钮上，用于指定表单提交后在哪里显示响应页面。
autofocus
当页面加载完毕的时候，默认聚焦。在页面中，只能有一个表单元素具有该属性，值为boolean类型
list
取值为datalist元素的id，用于显示提示内容。
max/min
表单组件能够接受到的最大值/最小值。
placeholder
对用户的输入进行提示，常用于搜索框，不要出现回车换行。
pattern
取值为正则表达式，用于表单验证。
比如验证手机号：pattern=”1\d{10}” maxlength=“11”
验证邮箱：pattern=”\W+@\W+.com”
**