WEB开发技术基础知识整理（1）
第一部分——HTML
简介
- 全称超文本标记语言，有一系列标签组成，文档包含标签以及文本内容。
- 允许嵌入图像，对象，表单，结构化信息；允许引入css，js影响网页。
- 网页由浏览器读取html并选安诚可视化界面。
一般格式
- H5一般声明为<！DOCTYPE html>
<！DOCTYPE html><!-- 声明文档为h5 -->
<html><!-- 描述文档 -->
<head><!-- -->
<meta charset="utf-8"><!-- 声明字符集元数据 -->
<title></title><!-- 声明文档标题 -->
</head>
<body>
html<!-- 描述可视化内容 -->
</body><!-- -->
</html>
- 所有文档必须先声明文档类型，统一编码格式
- 标签格式：
<标签名称> </标签名称>
元素与空元素
- 元素：从开始标签至结束标签，包括开始标签中声明的属性，以及标签之间内容的，全部部分
- <br/> ——换行
- <hr/> ——分割线
- 没有描述内容的元素统一称作空元素
###属性
- html元素提供的附加信息，声明于开始标签。
- 键值对形式出现：name=“value”
- 不区分大小写
- 示例
<p title=“what?!”> <p>
标题
- 自动在前后添加空行
注释
<!--这是 注释 -->
段落
- 自动在段落前后添加空行
- br换行
- 忽略多余空格和换行
- pre元素保留换行和空格
制表符
  空格
< > <>
链接
普通链接
<a href="www.baodi.com" >12345</a>
图片链接：
<a href="www.baodi.com" >
<img src="1.gif">
</a>
书签用法
<a id="1" href="www.baodi.com" >
<img src="1.gif">
</a>
<a href="#1" >111</a>
- 允许在不同界面
绝对路径和相对路径
- 绝对路径从协议开始。
- 相对路径不包含协议。
- …/返回上一层目录。
- 默认为服务器根目录而非网站根目录，通过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 图片
- 属性：alt无法显示的时候显示文本替代
- style
- width
- height
-
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/2018/11/05/web1/
1666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
