前端基础HTML和css总结
HTML【Hyper Text Markup Language】
超文本标记语言，不是编程语言
软件架构：
1. C/S: Client/Server 客户端/服务器端
* 在用户本地有一个客户端程序，在远程有一个服务器端程序
* 如：QQ，迅雷…
* 优点：
\1. *用户体验好*
* 缺点：
\1. 开发、安装，部署，维护 麻烦
2.B/S: Browser/Server 浏览器/服务器端
* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
* 优点：
\1. *开发、安装，部署，维护 简单*
* 缺点：
\1. 如果应用过大，用户的体验可能会受到影响
\2. 对硬件要求过高
* B/S架构详解
* 资源分类：
1.静态资源：
* 使用静态网页开发技术发布的资源。
* 特点：
* 所有用户访问，得到的结果是一样的。
* 如：文本，图片，音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2. 动态资源：
* 使用动态网页及时发布的资源。
* 特点：
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet,php,asp…
* 如果用户请求的是动态资源，那么服务器会执行动态资源，**转换为静态资源，**再发送给浏览器
* 我们要学习动态资源，必须先学习静态资源！
* 静态资源：
* HTML：用于搭建基础网页，展示页面的内容【标准文档流】
* CSS：用于美化页面，布局页面【层叠样式】
* JavaScript：控制页面的元素，让页面有一些动态的效果
W3C World Wide Web Consortium（万维网联盟）
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
W3C标准包括
结构化标准语言（XHTML 、XML）表现标准语言（CSS）行为标准（DOM、ECMAScript ）
标签分为围堵标签和自闭和标签
1. 围堵标签：有开始标签和结束标签。如
2. 自闭和标签：开始标签和结束标签在一起。如
1.常见标签
| 空格 | ** ** | |
|---|---|---|
| 大于号**(>)** | > | 如果时间**>晚上6****点，就坐车回家** |
| 小于号**(<)** | < | 如果时间**<早上7****点，就走路去上学** |
| 引号**(")** | " | **W3C规范中，HTML的属性值必须用成对的"**引起来 |
| 版权符号**@** | © | © 2008-2018****课工场【©】 |
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。必须写在head里
1-1图像标签
alt属性【图片不能正常显示时】改变路径或图像名称情况下可以看到替代文字和【title属性在鼠标放到图像上提示文字】，并且说明alt属性常和src配合使用。
(1) 图像标签
① img 单标签
② src属性必须提供【建议alt,title属性也填上】
-
绝对地址
-
相对地址
③ 其他属性可选
-
width 图片的显示宽度
-
height 图片的显示高度
-
alt 替代文本【路径或图片名称错误时】
-
title 鼠标悬浮时的提示文本
5)mark：文件加黄色底纹
1-2超链接
链接【文本或图像】
网页中插入图片，说明图片经常保存在image或images目录下，以保证网站目录清淅
链接路径href=链接在哪个窗口打开target=【目标窗口打开的不同位置常用值：_self（自身）、_blan（新窗口）】
1-2-1超链接页面间链接从一个页面链接到另外一个页面【网站上使用最多的就是页面间链接，例如网站导航菜单、新闻列表、商品列表等链接，通常都是页面间链】
1-2-2锚链接【从A页面的甲位置跳转到本页中的乙位置；；从A页面的甲位置跳转到B页面中的乙位置】
乙位置【创建跳转标记】
甲位置【创建跳转链接】
1-2-3功能性链接
_self:自身窗口打开
_blank:新建窗口打开
xxx 在某个区域打
在网上单击一些QQ图标直接弹出QQ对话框，或单击MSN图标直接弹出MSN对话框【电子邮件；QQ；MSN】
联系我们
1-3列表标签
- ul是unordered lists的缩写 (无序列表)
- li是list item的缩写 （列表项目）
- ol是ordered lists的缩写（有序列表）
- dl是definition lists的英文缩写 (自定义列表)
- dt是definition term的缩写 (自定义列表组)
- dd是definition description的缩写（自定义列表描述）
- nl是navigation lists的英文缩写 （导航列表）
- tr是table row的缩写 （表格中的一行）
- th是table header cell的缩写 （表格中的表头）
- td是table data cell的缩写 （表格中的一个单元格）
- cell (巢)[翻译的好怪.]
- cellpadding （巢补白）
- cellspacing （巢空间）
(1)无序列表（unordered list）
①ul>li(line行)
②无序
③type属性可以指定列表的样式（前面的小图标）
disc：实心圆（默认） circle：空心圆 square：实心矩形
(2)有序列表
①ol>li
②有序
③type属性可以指定列表的样式（序号的类型，比如1、A、I）
1：数字（默认） a：小写字母 A：大些字母 i：小写罗马数字 l：大写罗马数字
(3)自定义性列表(ordered list)
①dl>dt+dd
②图文展示
dl：表
dt：图片
dd：描述
③默认：dd有左外边距
| 无序列表 | 以**<ul>标签来实现以****<li>**标签表示列表项 | 无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对【简单的标题】性质的网页内容 |
|---|---|---|
| 有序列表 | 以**<ol>标签来实现以****
|
有序列表ol-li****一般用于显示带有顺序编号的特定场合 |
| 定义类表 | 以**
|
定义列表一般适用于带有【标题和标题解释性内容】的场合 |
1-4、表格标签【简单通用；结构稳定】
(1)复合标签，一般用于表单form的排版
(2)table>tr>td 创建表格标签
……①table 表cellpadding 单元格内边距 cellspacing单元格外边距 width height border【默认无边框】
caption:标题；
②tr 行row cell align:内容居中 style=”background-color:red”
③td 单元格data cell th:表头单元格【加粗居中】
(3)可以合并单元格
①跨行 rowspan
②跨列 colspan
表格
我的书单
栏目/图书编号
名字
作者
价格
出版时间
页数
1
2
3
4
超链接实现隐藏与显示效果
超链接实现隐藏与显示效果
快速建表
ul：表示无序
**li：**表示一个列表
**a：**表示带<**a>**标签的列表
{}：表示每个列表之内相同的内容
>：号表示优先级
***3：**表示创建三个，*x表示创建x个标签
li*3三行相同的
ul>li*3无序列表有三行内容
ul>(li>{姓名：})*3 无序列表有三行内容并且每行含有姓名
ul>(li>lable>a{姓名：})*3 多重标签嵌套用大于号；
dl>dt+dd*4 一行dt,四行dd
dl>dt+dd
1-5音频标签默认自动无声打开
| audio | 定义音频，如音乐或其他音频流 |
|---|---|
| video | 定义视频，如电影片段或其他视频流 |
| canvas | 定义图形 |
| datalist | 定义可选数据的列表 |
| time | 标签定义日期或时间 |
| mark | 在视觉上向用户呈现那些需要突出的文字 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l3VHuWMS-1604328838610)(HTML/image-20201026200456385.png)]
preload的三个值解释一下即可：
auto：当页面加载后载入整个音频；
meta：当页面加载后只载入元数据；
none：当页面加载后不载入音频；
src：指定要播放的视频文件的路径 controls：提供播放、暂停和音量的控件
autoplay：自动播放属性 loop：视频的循环播放
video元素允许多个source元素source可链接不同的视频文件
在html5中播放音频：
| contentEditable | 规定是否允许用户编辑内容 |
|---|---|
| designMode | 规定整个页面是否可编辑 |
| hidden | 规定对元素进行隐藏 |
| spellcheck | 规定是否必须对元素进行拼写或语法检查 |
| time | 标签定义日期或时间 |
| tabindex | 规定元素的tab键迭制次序 |
1-6输入框标签及属性
跨列：colspan="横向跨的单元格数"跨行：rowspan="纵向跨的单元格数
1-7表单元素
post方式提交的数据安全性要明显高于get方式提交的数据。因此在实际开发中通常采用post方式提交表单数据
| type | **指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，**默认为 text |
|---|---|
| name | 指定表单元素的名称 |
| value | 元素的初始值。type 为 **radio时**必须指定一个值 |
| size | **指定表单元素的初始宽度。**当 type 为 【text 或 password】时，表单元素的大小以【字符】为单位。对于其他类型，宽度以【像素】为单位 |
| maxlength | type为text 或 password **时，**输入的最大字符数 |
| checked | **type为radio或checkbox****时，**指定按钮是否是被选中 |
1-7-1type取值为text时为【文本框】
，name属性是必须的，其他几个属性并不是必须的；【size与maxlength的区别】，当没有设置maxlength时向文本框中输入内容没有限制，当设置maxlength时再向文本框中输入值将会有字符数的限制value:文本框初始值
1-7-2.type取值为password时为【密码框】
，name属性是必须的，其他属性并不是必须的，密码框中输入字符时，显示的效果，密码字符以【黑色实心的圆点】来显示。
当注册时需要验证6-16位pattern
密 码：
1-7-3，type取值为radio时为【单选按钮】
，name和value属性是必须的，其他属性并不是必须的；同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥；在页面加载时单选按钮有一个默认的选项，则必须使用checked属性，同一组单选按钮只能有一个默认的checked属性
男
女
1-7-4type取值为checkbox时为【复选框】
，name和value属性是必须的，其他属性并不是必须的；同一组复选框，根据需要可设置name属性值【相同，也可不同】；在页面加载时有默认选中的复选框，则必须使用checked属性，同一组复选框中允许有【多个复选框有默认的checked】属性。
运动
聊天
玩游戏
1-7-5【下拉列表框】的语法,重点说明它的标签组成
，一个中至少包含一下；name和value属性是必须的，其他属性并不是必须的；一个列表框中只能有一个列表项默认被选中；页面加载时有默认选中的选中项，则必须使用selected属性，如果没有默认选中项则【第一个选项默认被选中】；
1-7-6【提交按钮（提交/重置/图片/普通）】
name和value属性是必须的，其他属性并不是必须的；三个按钮提交后显示的不同效果，主要演示提交按钮和重置按钮，提一下普通按钮是需要添加onclick事件的；图片按钮的用法，强调type和src属性，强调“type”属性没有设置为“submit”，但仍然具备提交表单的功能。【图片按钮还可以时动图，显得更加炫酷】
1-7-7【多行文本域】
的内容是在和:列数，行数
1-7-7【文件域】的语法及功能，说明type值为file即为文件域；在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交
1-7-8滑块，搜索框
邮箱:
【邮箱】
请输入你的网址:
【网址】
请输入数字:
【数字】
请输入数字:
【滑块】
请输入搜索的关键词:
【搜索框】
1-7-9【隐藏域】只是把type属性值设置为hidden；在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器【只读和禁用】的语法，强调不能单写readonly或disabled，必须写readonly＝”readonly”和disabled=“disabled”，【W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略】
1-7-8【表单元素的标注】标签的作用，它的for属性对应的id与表单元素id一致；name属性与id属性都是必须的。name属性是由表单负责处理，而id属性是给label标签和表单元素进行关联使用的；【创建标注】和对应的关联表单元素，增强鼠标的可用性；自动将焦点转移到与该标注相关的表单元素上
1-7-9在客户端就对表单进行验证的好处：
表单初级验证：placeholder,required,pattern
（1）减轻服务器的压力。
（2）保证数据的可行性和安全性
1-7-10【提示placeholder/必填required/正则验证pattern】
可以描述文本框期待用户输入何种内容；提示语默认显示，当文本框中输入内容时提示语消失；适合于input标签：text、search、url、email和password等类型
规定文本框填写内容不能为空，否则不允许用户提交表单；适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
昵称：pattern="[-\w\u4E00-\u9FA5]{4,10}"
密码：pattern="[\dA-Za-z]{6,16}"
手机号码：pattern="1[3578]\d{9}"
年龄：pattern="\d|[1-9]\d|1[0-2]\d"
1-7-11【只读，禁用，隐藏域】表单的高级应用
在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器
只读（Readonly）与禁用（Disable）的区别与使用
(1)表面上可看到的区别就是当这两个词都设置为true时，都为禁用状态，当鼠标移上时使用disable的相关控件时鼠标出现禁用样式，并且不可做任何操作【通过js也是获取不到的。例如$("input [name='aaa']").val()是不好用的】，而Readonly还可以获取文本框里的焦点。
disabled属性在将input文本框变成只读不可编辑的同时，还会使【文本框变灰】，但是readonly不会。
（2） Disable比readonly的使用范围比广，适用文本框、文本域、下拉框、button按钮、单选框…….而readonly只适用于[input（text、password、textarea）。]
.disabled属性对input文本框，单选radio,多选checkbox都适用，但是【readonly就不适用，用它修饰后的单选以及多选按钮仍然是可以编辑状态的】。
（3） Disable设置为true之后是[不可以向后台提交数据的]，此时可以选择改用readonly进行禁用，或者在提交数据时取消禁用。
1-7-12【labelforid】表单的标注
可以增强鼠标的可用性自动将焦点转移到与该标注相关的表单元素上【for属性对应的id与表单元素id一致】
1-8页面布局
页面布局
头部
正文
<
| header | 标题头部区域的内容（用于页面或页面中的一块区域）【网页头部】 |
|---|---|
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域）【网页底部】 |
| section | Web页面中的一块独立区域【网页主体部分】 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
内联框架