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

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20181110G102J700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券