WEB开发技术基础知识整理——HTML

简介

全称超文本标记语言，有一系列标签组成，文档包含标签以及文本内容。

允许嵌入图像，对象，表单，结构化信息；允许引入css，js影响网页。

网页由浏览器读取html并选安诚可视化界面。

重点知识

HTML的作用

HTML基本编写规范

常用基本元素标签及属性

Inline、block级元素的特点

无序/有序列表的声明定义方法

Form表单下的基本标签，及标签的常用属性

一般格式

H5一般声明为

html

所有文档必须先声明文档类型，统一编码格式

标签格式：

元素与空元素

元素：从开始标签至结束标签，包括开始标签中声明的属性，以及标签之间内容的，全部部分

——换行

——分割线

没有描述内容的元素统一称作空元素

属性

html元素提供的附加信息，声明于开始标签。

键值对形式出现：name=“value”

不区分大小写

示例

标题

自动在前后添加空行

注释

段落

自动在段落前后添加空行

br换行

忽略多余空格和换行

pre元素保留换行和空格

制表符

  空格

< >

链接

普通链接

图片链接：

书签用法

111

允许在不同界面

绝对路径和相对路径

绝对路径从协议开始。

相对路径不包含协议。

../返回上一层目录。

默认为服务器根目录而非网站根目录，通过base属性声明全局相对目录。

input元素

默认为text

password为密码

checkbox为多选

radio为单选，用name分组，checked表示选中

file表示上传文件，accept可以指定属性

button无提交功能的按钮

hidden 源码可见

date输入日期

datetime-local日期和时间

number ，具有min，max，step属性

textera 多行输入

label

label元素不会呈现任何特殊效果，它为鼠标用户改进了可用性

点击label 元素文本，浏览器会将焦点转到和标签相关的表单元素上。for 属性指定关联元素id属性值，实现联动操作

for属性联动checkbox

表格

th，tr，td

先排满行，再排列

th直接替换td就行

tr包含td

块级元素和内联元素

块级元素，始终在新行开始，尽可能的向左向右占用全部可用宽度，div,h1,p,form,table等

div，块级元素，元素本身无特殊意义，与CSS同时使用，用于对大的内容块设置样式属性，通过定义多div，布局整个文档结构，其他HTML元素的容器

内联元素，不以新行开始，只占用所需宽度。span,a,img等。

span元素，内联元素，元素本身无特殊意义，与 CSS 同时使用，用于为部分文本设置样式属性，用作文本的容器。

button

分为button，submit，reset三种type

head

meta为元数据，元数据会被浏览器解析，通常用于指定网页的字符集、描述、关键词，作者等。

属性和标签大全

p 段落

属性： title——工具条提示

img 图片

width

height

属性：alt无法显示的时候显示文本替代

style

h1-h6 标题（由大到小）

a 链接

table表格

tr行

th标题

td列

border属性定义表格的边宽

colspan定义跨列数

rowspan定义跨行数

ul 无序列表

style=“list-style-type：（disc，circle，square，none）”

ol有序列表（1，A，a，I，i）

dl自定义说明列表

dd注释

dt内容

pre预格式文本，保留换行和空格

fieldset划实线框

legend表示框名

select下拉菜单，option表示各个选项，optgroup表示分组，属性selected表示选中

button按钮

datalist预定义列表

form表单

属性action，enctype，method

文本格式：

b strong 加粗

em i 倾斜

small 小号

mark 标记

del 删除线

ins 下划线

sub 上标

sup 下标

abbr 缩写定义

address 地址

bdo 文字方向

blockquote 长引用

q 短引用

cite 引证

kbd键盘输入

samp 程序系统输出

code 代码

var 变量

常见属性：

readonly只读

placeholder输入提示

disabled不可操作

required 必须填写

Data-*属性，自定义数据属性，允许在所有HTML元素中嵌入自定义的数据属性，用于将数据存储在页面，可在JS中使用这些数据，从而创建出更具吸引力的用户体验

input hidden类型：可将值传递到服务器

Data-*属性：值仅存储在前端，为JS提供服务

本文在博客 几何军工作室 首发

https://kfzjw008.github.io