HTML
Web前端介绍
-
认识web前端
前端：凡是通过浏览器到用户端计算机的技术统称前端。
应用：网页、网页游戏、小程序、移动端APP、游戏、大数据、桌面应用等等
Web前端工程师：FE（后端-工程师-RD）
Web前端三种语言：结构HTML、表现CSS、行为JavaScript
互联网原理
-
浏览器与服务器
B/S模型
用户通过在浏览器上输入一个网址，通过HTTP协议向服务器发送请求，服务器做出响应，将相关的网页数据传输到本地计算机，在浏览器上渲染出来。服务器（server），用于存放我们的数据，必须24小时在线，掉线了就不能访问到服务器的数据，也就不能正常访问网页了。
浏览器（Browser），用于HTTP请求的发起和接收。
五大浏览器： IE：Trident内核 火狐(Firefox)：gecko内核 苹果(Safari)：webkit内核 谷歌(Chrome)：Blink内核 欧朋(Opera)：谷歌blink内核从服务器接收的数据会存放在一个临时的文件夹，接收我们的缓存数据。临时文件夹会使第二次访问同一个网站速度变快。
-
http与控制台
HTTP：Hypertext Transfer Protocol，超文本传输协议。
HTTP包括请求和响应两个部分，都依赖浏览器
请求：request，浏览器根据网址向对应的服务器发送请求。 响应：response，服务器根据请求响应文件，将页面传输给客户端，在浏览器中进行网页渲染。发送HTTP请求：直接输入网址，点击超级链接。
访问页面时，会同时发出多个http请求，包含网页的图片、视频、音频等文件。
HTML与纯文本
-
html与纯文本
纯文本：纯文本文件只保存文字内容。
html：Hypertext Markup Language，超文本标记语言，用来制作语言。
语义化：标记文字(其他内容)存在的意义。
html标签：用于给文本增加语义。标签本身就是超文本。
HTML框架
-
DOCTYPE
DTD：文件类型定义，用来定义文档的规范，规定了html使用了哪个版本。
-
html，标签，元素，属性
html标签：双标签，表示整个的网页。
html标签有两个属性： manifest:定义了一个URL，描述了文档的缓存信息，html5新增。 xmlns:HTML不支持，只有XHTML支持，规定XML的namespace属性（命名空间） lang:全局属性，定义语言标签：<head>、<body>等，用来标记HTML元素。
元素：网页是由许多各种各样的HTML元素构成的，HTML元素是使用HTML标签定义的。
属性：为HTML元素提供各种附加信息，只能在开始标签中添加。
-
注释
注释：一段解释说明的文字，渲染页面时被忽略。
<!-- -->
-
head标签
head标签：用于定义文档的头部，描述了文档的各种属性和信息，包括文档的标题、在Web中的位置、与其他文档的关系等。
可以在head部分使用的标签：<base>、<link>、<meta>、<script>、<style>、<title>
<base>：为页面上的所有相对链接规定默认地址或默认目标。 href：规定页面中所有相对链接的基准URL target：在何处打开页面中所有的链接（_blank，_parent，_self，_top，framename） <title>：标签内部放的是网页的名字，里面的内容可以提高搜索引擎优化（SEO） link：定义文档与外部资源的关系。如：引入外部样式 style：定义内部样式 script：引入外部脚本，或定义内部脚本 meta：提供页面相关的元信息。 content：定义与http-equiv或name属性相关的元信息 http-equiv：把content属性关联到HTTP头部（content-type、expires、refresh、set-cookie） name：把content属性关联到一个名称（author、description、keywords等） -
body标签
body标签：网页主体，给用户浏览的区域，里面放置的是我们html标签书写的网页结构。
-
html基本语法
html基本语法：标签之间对空格、缩进、换行不敏感。对标签的嵌套关系敏感。
空白折叠现象：文本内容区域内如果有一个或多个空格或者缩进或者换行，在浏览器中显示的时候，只显示一个空格，即所有空白区域折叠为一个空格。
标签的用法：
1. 标签必须写在一对尖括号里面，里面写的是我们的标签关键字。
2.双标签必须成对出现
3.结束标签必须写关闭符号 ‘ / ’
4.标签分类：容器级标签、文本级标签 -
标签分类
容器级标签：h1~h6，pre，div
文本级标签：p，code，span文本级标签一般不能或不建议嵌套容器级标签，但容器级标签可以嵌套文本级标签。
-
属性
元素的属性：对元素的描述以及控制信息。
语法：<tag att="value">文本内容</tag>属性分类：
必需属性 ： img标签的src alt
可选属性 ： img标签的width height
标准（全局）属性 ： id class style lang
事件属性 ： onclick、 onmouseover、onmouseout
标签介绍
-
h系列标签
h1~h6标题标签
给文本添加标题语义，不能互相嵌套。默认加粗，具有换行符h1→h6字体逐渐变小
由于h标签拥有确切的语义，因此要选择恰当的标签层级来构建文档的结构。一个页面上，h1标签通常只有一个，h2~h6标签可以有多个。
-
p标签
给文本添加段落语义。具有换行符。
p标签可以嵌套在块级元素内，但p标签不能嵌套其他块元素，如div，h系列标签，p标签等。
-
img标签
img标签是一个单标签。
img标签的属性：
src：添加资源文件的路径 alt：图片加载失败后的文本提示 title：鼠标悬停时的文本提示信息 width：图片宽度 height：图片高度 border：图片边框的厚度（默认黑色实线，且不可修改）路径：目标文件所在的完整路径
相对路径 / 绝对路径 /根目录 ./当前目录 ../退出当前目录 -
a标签
a标签，超链接，是一个双标签。网页页面之间通过超链接进行跳转。
<a href="#">点我跳转</a>a标签的属性：
href：超链接的地址，#代表链接到页面的某个位置 title：文本提示信息 ref：规定当前文档与被链接文档之间的关系 download：规定被下载的超链接目标 media：规定被链接文档是为何种媒介/设备优化的 type：规定被链接文档的MIME类型 target属性：被链接页面的打开方式 _self：当前页面打开 _blank：新页面打开 _parent：页面的父窗口打开 _top：页面在整个浏览器窗口打开 framename：在指定框架中打开页面锚点：给某个标签设置name或id属性作为锚点。
通过另一个 a标签的href属性# 去链接这个锚点，可以跳转到当前页面的指定位置，也可以链接到其他页面的指定部分。
-
div和span标签
div：容器级标签，用来划分独立的逻辑块，标签内可以放置任何标签和内容。
span：文本级标签，标签内只能放文字、图片、表单元素等。div盒子内容独占一行，span的内容会被放在一行中。div和span是没有任何默认效果的。
-
无序列表
无序列表：给文本添加无序的列表语义。项与项之间没有顺序的先后之分。
ul：无序列表 li：列表项ul和li这这两个标签必须同时出现，不能单独书写。ul里可以嵌套一个或多个li标签，不能放其他内容
li标签是容器级标签，可以放置任何标签。无序列表的列表样式通过type书写来修改：
disc：默认实心圆 circle：空心圆 square：实心方块 -
有序列表
有序列表：给文本添加有序列表的语义。
ol：有序的列表 li：列表项ol和li是一组标签，必须同时出现。ol元素的属性：type：设置有序列表的样式 A、a、I、i、l start：设置列表符号从第几个开始排列，属性值只能是阿拉伯数字 reserved：设置有序列表项目符号的倒叙(html5新增) -
定义列表
dl定义列表给我们的文本添加定义列表语义。dl：定义列表 dt：定义标题 dd：定义描述dl里面嵌套了dt和dd。dt和dd是同一级标签，dd是对dt的解释、说明、定义。dl里面只能放置dt和dd，dt和dd中可以放置任意标签。dt后面可以有多个dd标签，也可以没有dd，表示没有解释说明。 -
表格标签
table：定义表格容器。tr：定义行 th：定义表头 td：定义单元格嵌套关系：table ＞tr ＞th | td
table标签的属性：
border：设置表格的边框 bordercolor：设置边框的颜色 height、width：设置表格的宽高 align：设置表格的整体水平对齐方式 center居中、left默认居左、right居右 cellspacing：设置边框与边框之间的距离 cellpadding：设置内容与边框之间的距离 background：设置表格的背景图片 bgcolor：设置表格的背景颜色 summary：表格隐藏信息，用来提高SEOtr：行语义，有几个
tr标签，就代表这个表格有几行，tr标签的属性：align：设置当前单元格中文本的对齐方式 left、right、center bgcolor、background：设置背景颜色和背景图片td(th)：单元格语义，一对
tr标签中有几对td(th)标签，就表示当前行有几个单元格。
th标签中的文本默认加粗、居中。td(th)标签的属性：
bgcolor、background：设置背景颜色和背景图片 colspan：列合并，左右合并 rowspan：行合并，上下合并 属性值：是几就合并几个单元格 -
划分区域
表格标题：caption
表头：thead
主体部分：tbody表格标题的添加方式：
1.使用标题标签h1~h6 2.使用表格自带标题标签caption标准中规定，一个表格只能添加一个标题。
-
form标签
form：表单标签，用来收集用户数据，并将其提交到对应的地址。
form标签的属性：name：定义表单的名称 action：设置数据提交的地址 method：设置数据提交的方式，如GET、POST target：页面打开方式，如_self、_blank、_top、_parent、framename表单中的控件：input输入框、textarea文本域、select下拉列表、button按钮
textarea：多行文本域，多行文本输入框。textarea的属性如下：
rows：设置行高，属性值是数字 cols：设置列宽，属性值是数字 for：规定label绑定到哪个表单控件(id)，将表单控件写在label标签内，可以实现联动。 -
select标签
select：下拉框语义化标签。
select标签创建单选或多选菜单，属性：multiple：设置多选 size：设置显示在页面上的列表的项数option标签用来定义下拉列表中的一个选项（条目），属性：
selected：设置默认被选中的列表项，内容只能是文本，不能出现标签。optgroup标签定义选项组。
labeltext：为选项组规定描述。 -
button标签
button标签定义了一个按钮，属性：
type：规定按钮的类型(button、reset、submit)button控件与input type="button"控件相比：
button标签之间的所有内容都是按钮的内容，如文本、多媒体内容。 -
input标签
input：表示输入的语义标签，用于搜集用户信息。
input是一个单标签，也叫做自封闭标签，控件的类型由type属性确定：1. text：单行文本框 pattern：规定输入字段的值的模式或格式(html5新增) 2. password：密码输入框 3. radio：单选框 4. checkbox：复选框 单选和复选框的name值必须一致，这样才能保证是同一题干下面的不同选项。 checked属性，设置默认被选中；布尔型属性。 5. image：图像域 src：设置图片的路径 width、height：设置图片的宽度和高度 6. file：文本域 7. hidden：隐藏文件 8. button：普通按钮 9. submit：提交按钮 10. reset：重置按钮表单控件通用属性：
value：定义送往服务器的选项值（表单控件的值）。 autofocus：自动获取焦点（html5新增） form：规定文本区域所属的一个或多个表单（html5新增） name：规定文本区的名称 placeholder：规定描述文本区域预期值的简短提示（html5新增） diabled：规定禁用该文本区 readonly：规定文本区为只读 maxlength | minlength：规定文本区域的最大/最小字符数，textarea和input。 required：规定文本区域是必填的（html5新增），textarea和input。 -
废弃标签
html5中废弃的标签：
font：字体标签 frame：定义框架 b：加粗 i：斜体字 u：下划线 s：删除线 -
其他标签
html5中的其他标签：
pre：预格式化原样输出 code：单行代码 strong：强调标签，加粗效果 em：强调标签，斜体字效果 ins：下划线 del：删除线 abbr：定义缩写 address：定义地址 iframe：内联框架 br：换行 hr：分割线 -
实体字符
html中常用的实体字符：
空格   全角空格 © 版权符号© ¥ 人民币符号￥ > 大于号> < 小于号< -
代码规范
前端代码规范：
1. 标签名必须使用小写字母 2. 属性名必须使用小写字母，属性值必须用双引号包裹 3. 使用4个空格作为一个缩进层级 4. class必须单词全字母小写，单词间以-分隔 5. id使用驼峰式命名
1650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
