- 系统结构
- B/S架构：Browser/Server（浏览器/服务器的交互形式）
- Browser端支持HTML、CSS、JavaScript（WEB前端开发工程师），前端页面的图片需要UI设计师完成
- Server端支持C、C++、Java、python等语言
- 优点：升级方便，只升级服务器端代码即可，维护成本低
- 缺点：速度慢、体验不好、界面不炫酷
- 企业内部的解决方案都采用B/S架构系统，因为企业内部办公需要的系统不需要炫酷、不需要特别好的用户体验，只要能做数据的增删改查即可，且企业内部更注重维护成本
- 代表：京东、百度、天猫等
- C/S架构：Client/Server（客户端/服务器端的交互形式）
- 优点：速度快、体验好、界面炫酷（娱乐性系统多数是C/S架构）
- 缺点：升级麻烦、维护成本较高
- 代表：QQ、微信、支付宝
- 世界五大主流浏览器：谷歌（Google Chrome）、火狐（Mozilla Firefox）、IE（Internet Explorer）、Safari（只支持IOS系统）、Opera（欧朋）
- 网页制作三剑客：Dreamweaver、Firework、Flash
- B/S架构：Browser/Server（浏览器/服务器的交互形式）
- 什么是HTML？怎么开发？怎么运行？
- HTML：Hyper Text Markup Language（超文本标记语言）
- 由大量标签组成，每一个标签都有开始标签和结束标签，可以有子标签
- <标签>
- <标签>
- <标签 属性名="属性值 属性名="属性值">
- </标签>
- </标签>
- <标签>
- </标签>
- <标签>
- 超文本：流媒体、图片、声音、视频
- 由大量标签组成，每一个标签都有开始标签和结束标签，可以有子标签
- 开发：HTML开发使用普通的文本编辑器，创建的文件扩展名是.html或者.htm
- 专业开发工具：DreamWeaver、HBuilder等
- 运行：直接采用浏览器打开HTML文件就是运行
- HTML：Hyper Text Markup Language（超文本标记语言）
- HTML是谁制定的？
- W3C：世界万维网联盟（World Wide Web），W3C制定了HTML规范，每个浏览器生产厂家都会遵守规范，HTML程序员也按照规范写代码
- W3C制定了很多规范：HTML、XML、http协议、https协议等
- HTML规范目前最高版本是HTML5.0，简称H5
- 为了方便中国web前端程序员开发，提供大量的帮助文档，和W3C没有关系
- W3School：先出现
- W3CSchool：后出现
- W3C：世界万维网联盟（World Wide Web），W3C制定了HTML规范，每个浏览器生产厂家都会遵守规范，HTML程序员也按照规范写代码
- HTML代码（必修/技术/HTML+CSS+JavaScript/HTML中）
- 第一个HTML：
- 有头：head（title标签为网页的标题，显示在网页左上角）
- 有体：body（网页的主体内容）：用户能看见
- 最开始加上<!doctype html>表示为HTML5.0版本，没加就为HTML4.0版本
- 注释：<!--xxxx-->(xxxx为注释内容)：不会在网页中直接显示，但可以在源码中查看
- <!--
- 表示多行注释
- -->
- 可以将一些不希望显示的内容隐藏
- 注释不能嵌套
- <!--
- 不区分大小写，语法松散不严格
- 文档声明（doctype）:
- 用来告诉浏览器当前的版本，写在网页的最开头
- <!doctype html>
- vscode中，输入!按tab可以自动生成网页基本内容
- <html lang="zh">中zh表示是中文网站
- 进制：
- 十进制：(日常使用)
- 特点：满10进1
- 计数： 0 1 2 3 4 5 6 7 8 9 10 11 12...19 20
- 单位数字：10个（0-9）
- 二进制：（计算机底层的进制）
- 特点：满2进1
- 计数：0 1 10 11 100 101 110 111
- 单位数字：2个（0 1）
- 所有数据在计算机底层都以二进制的形式保存，一个0/1在内存中存储为1位（bit）
- 8bit = 1byte(字节)：最小可操作的单位为1byte
- 1024byte = 1kb(千字节)
- 1024kb = 1mb(兆字节)
- 1024mb = 1gb(吉字节)
- 1024gb = 1tb(特字节)
- 1024tb = 1pb()
- 八进制：（不常用）
- 特点：满8进1
- 计数：0 1 2 3 4 5 6 7 10 11 12...17 20
- 单位数字：8个（0-7）
- 十六进制：（一般显示一个二进制数字时会转换为十六进制）
- 特点：满16进1
- 计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12...1a 1b 1c 1d 1e 1f 20...
- 单位数字：16个（0-9 a-f）
- 十进制：(日常使用)
- 字符编码：
- 所有的数据及文字在计算机中存储时都以二进制形式存储，所以一段文字在存储到内存中时，都需要转换为二进制编码
- 编码：将字符转换为二进制码的过程
- 解码：将二进制码转换为字符的过程
- 字符集（charset）：编码和解码采用的规则
- 乱码问题：如果编码和解码采用的字符集不同就会出现乱码
- 常见的字符集：ASCII,ISO88591,GB2312,GBK,UTF-8（万国码，在开发时都使用UTF-8）
- 使用meta标签设置网页的字符集，避免乱码：<meta charset="UTF-8">
- HTML的基本标签：
- 标签就是元素
- 根标签：<html></html>：网页中所有内容都要写在跟标签里面，子标签有head、body
- <head>：网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎解析网页
- <meta>：设置网页的元数据(元数据不是给用户看)，常用属性有charset、name、content
- charset：指定网页的字符集
- name：指定的数据的名称
- content：指定的数据的内容
- <meta name="keywords",content="HTML5,前端，CSS3">
- keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用“，”隔开
- <title>：内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容
- <meta>：设置网页的元数据(元数据不是给用户看)，常用属性有charset、name、content
- <body>：表示网页中的主体，网页中所有可见内容应该写在body里面
- <h1>：网页的一级标题
- <head>：网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎解析网页
- 属性：在标签中（开始标签或者自结束标签中）可以设置属性，属性是一个名值对（x=y）
- 属性和标签名或其他属性应该用空格隔开
- 属性应该根据文档中的规定来编写：有的属性有属性值，有的没有；属性值要用引号引起来
- 段落标记：<p></p>
- 标题字：是HTML预留的格式，和word中的标题子相同
- 字号从大到小：<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>
- <center><h1>xxx</h1></center>，可以让xxx居中显示
- 换行标记：<br>，br标签是一个独目标记（即没有</br>）
- 横线标记：<hr>，独目标记
- <hr>，一根黑色拉满屏幕的横线
- color和width都是hr标签的属性，属性格式：属性名=属性值（属性值用引号或者不写）
- <hr color="red">，一根红色拉满屏幕的横线
- <hr color="red" width="50%">，一根红色占屏幕一半的横线
- 预留格式：<pre></pre>，保留写代码时的换行格式
- 删除字：<del></del>，在字中间加横线
- 插入字：<ins></ins>，在字下面加下划线
- 粗体字：<b></b>
- 斜体字：<i></i>
- 右上角加字：<sup></sup>，如10<sup>2</sup>，即10的平方
- 右下角加字：<sup></sup>，如10<sup>m</sup>
- 字体标签：<font></font>
- 颜色：color
- 大小：size
- 如<font color="red" size="50"></font>
- 自结束标签<img>/<img />：不用成对出现
- 实体(转义)符号（会与html语言符号冲突的符号）：以&开头，以;结尾
- 大于：>
- 小于：<
- 空格：
- 版权符号：©
- 表格：table（表格），tr（行），td（单元格）
- 设置属性：
- 边框：border，单位为像素px
- 表格整体宽度：width，单位可以设置为像素px，也可以设置为百分比（同比例缩放）
- 表格整体高度：height，单位可以设置为像素px，也可以设置为百分比（同比例缩放）
- 对齐方式：align，有center等
- 如<table align="center" border="1px" width="60%" height="150px">
- 单元格合并：
- 找到要合并的单元格，删除要合并的下面的单元格，保留最上面的单元格，并在保留单元格的<td>中设置rowspan、colspan的数量（数量即为合并单元格的数量）
- 如:
- <td rowspan="2">c</td>
- <!--
- <td>f</td>
- -->
- 注意事项：
- row合并时，删除“下面的”单元格
- column合并时，对删除哪个没有要求
- th标签：也是单元格标签，比th多的是自动居中、加粗
- thead（头）、tbody（体）、tfoot（脚）标签：
- 在table中不是必须的，只是这样做便于后期JS代码的编写
- 设置属性：
- 背景颜色和背景图片：
- <meta charset="utf-8">：告诉浏览器采用哪一种字符编码方式打开当前文件，不是设置当前文件的字符编码方式
- GBK：简体中文（EditPlus）
- 一般文件采用什么字符集，就设置meta charset为什么字符集
- 背景颜色：bgcolor
- 背景图片：background，在项目下新建一个目录（命名为img）
- 如<body bgcolor="red" background="img/u.jpg">
- 背景颜色图层在背景图片图层下面
- <meta charset="utf-8">：告诉浏览器采用哪一种字符编码方式打开当前文件，不是设置当前文件的字符编码方式
- 图片：浮在网页上的一个元素（背景图片是贴在网页背景上的，即位置不同）
- 图片标签：img标签
- 图片路径：src
- 图片宽度：width
- 只设置宽度，高度会等比例缩放
- 图片高度：height
- 设置鼠标悬停时显示的信息：title
- 设置图片加载失败时显示的提示信息：alt
- 如<img src="img/u.jpg" width="100px" title="我是饭粒猫噢" alt="图片找不到噢"/>
- 如果<img></img>中间不写代码，可以改成<img xxx/>
- 超链接（或热链接）：<a></a>
- href：hot references热引用，href属性后面一定是一个资源的地址URL（统一资源定位器）
- href后面的路径可以是绝对路径或者相对路径，路径可以是互联网上的某个路径，也可以是本地资源的一个路径
- 特点：有下划线，鼠标停留在超链接上面显示小手形状，点击超链接之后可以跳转页面
- 如<a href="https://www.baidu.com">百度</a>
- target属性，可取值：
- _blank：新窗口
- _self：当前窗口（默认）
- _top：顶级窗口
- _parent：父窗口
- 如：<a href="hao123_上网从这里开始" target="_blank">
- 图片超链接：<a>设置图片路径即属性</a>
- 如<a href="hao123_上网从这里开始">
- <img src="img/u.jpg" width="120px"/>
- </a>
- 如<a href="hao123_上网从这里开始">
- 作用：通过超链接可以从浏览器向服务器发送请求
- 请求request：浏览器向服务器发送数据
- 响应response：服务器向浏览器发送数据
- B/S结构的系统，每一个请求都会对应一个响应
- B请求S，S响应B
- B/S结构的系统，每一个请求都会对应一个响应
- 用户点击超链接和用户在浏览器地址栏上直接输入URL有什么区别？
- 本质上没有区别，都是向服务器发送请求
- 操作上来说，超链接使用更方便，不用记住地址
- 列表：<li></li>
- 列表中可以嵌套子列表，分类为有序列表和无序列表
- 有序列表
- <ol></ol>，可以选择type改变编号方式，如数字、字母、罗马数字
- 无序列表
- <ul></ul>，可以选择type改变内容前的符号，如圆圈circle、方块square、点disc
- 代码：C:/Users/LXY/OneDrive/桌面/必修/技术/Java/HTML+CSS+JavaScript/HTML/HBuilder/html-code/010-列表.html
- 表单form：
- 作用：收集用户的信息
- 表单展现之后，用户填写表单，点击提交按钮提交数据给服务器
- 怎么画一个表单：使用form标签
- 一个网页中可以有多个表单form
- 表单最终是需要提交数据给服务器的
- form标签中的action属性，用来指定服务器地址
- action属性用来指定数据提交给哪个服务器
- action属性和超链接中的href属性一样，都可以向服务器发送请求request
- http://192.168.111.3:8080/oa/save：这是请求路径
- 表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件
- 如<form action="http://192.168.111.3:8080/oa/save">
- form标签中的action属性，用来指定服务器地址
- 画按钮可以使用input输入域：
- type="submit"时表示该按钮时一个提交按钮，具有提交表单的能力
- 使用type的value属性，设置按钮上显示的文本信息；若没有设置，默认为“提交”
- <input type="submit" value="注册"/>，必须放到form标签内部
- <input type="button"/>：是一个普通按钮，不具备提交表单的能力
- <input type="text"/>：文本框
- <input type="password"/>：密码框
- <input type="checkbox"/>：复选框
- <input type="radio"/>：单选按钮，value必须手动指定
- <input type="reset"/>：清空输入内容，只能放到form标签内部
- 超链接和表单都可以向服务器发送请求，但表单发送请求的同时可以携带数据
- 例：<form action="百度一下，你就知道">
- <input type="submit" value="百度">
- </form>
- 和普通的超链接没什么大的区别
- 表单是以什么格式提交数据给服务器的？
- http://localhost:8080/jd/login?username=abc&userpwd=111
- 格式：action?name=value&name=value&name=value&name=value&name=value...
- ?前面是路径，?后面是数据，数据以name和value的键值对方式，中间用=衔接，每对数据中间用&连接
- HTTP协议规定必须以这种格式提交给服务器
- 表单项写了name属性的一律会提交数据给服务器；如果不想提交就不要写name属性
- <td>用户名</td>
- <td><input type="text" name="username"/></td>
- 如果type是文本框text和密码框password时，不用写value属性，用户填入的内容就是value
- 当name没有写的时候，该项不会提交给服务器；但当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器，java代码得到的是：String s = "";
- 画用户注册表单：
- 用户注册：用户名、密码、确认密码、性别、兴趣爱好、学历、简介
- <input type="radio" name="sex" value="1" checked/>男/女：若name一样，两个button只能选一个；若name不一样，两个button都可以选，“男/女”不会提交给服务器
- checked：表示默认选中（radio、checkbox、select）
- 下拉列表框：
- <select name="grade">
- <option value="gz">高中</option>
- <option value="dz">大专</option>
- <option value="bk" checked>本科</option>
- <option value="ss">硕士</option>
- </select>
- 下拉列表支持多选：multiple="multiple"
- 设置显示条数用size
- <select multiple="multiple" size="2">
- 在浏览器中必须按住ctrl才能多选
- <select name="grade">
- 文本域：textarea
- <textarea rows="10" cols="50" name="introduce"></textarea>
- rows：行数；cols：列数
- 没有value属性，用户填写的内容就是value
- <textarea rows="10" cols="50" name="introduce"></textarea>
- 最终提交数据为：name&value
- form表单method属性：
- get：采用get方式提交时，用户提交的信息会显示在浏览器的地址栏上（如上）
- post：采用post方式提交时，用户提交的信息不会显示在浏览器的地址栏上
- post提交的时候提交的数据格式和get一样，只不过不在地址栏上显示出来
- post提交的数据还是：name=value&name=value&name=value...
- 当用户提交的信息中含有敏感信息（如密码），建议采用post方式提交
- <form action="http://localhost:8080/jd/register" method="post">
- method属性不指定或指定为get，都是get（默认为get），只有当指定为post时，才为post
- 超链接也可以提交数据给服务器，但是提交的数据都是固定不变的；
- 超链接是get请求，不是post请求
- <a href="http://localhost:8080/oa/save?username=abc&userpwd=123">提交</a>
- 用户注册：用户名、密码、确认密码、性别、兴趣爱好、学历、简介
- file控件：文件上传专用（可以选择文件）
- <input type="file"/>
- hidden控件：使用hidden控件会产生一个隐藏域，在网页上看不到，但是表单提交的时候数据会自动提交给服务器
- <input type="hidden" name="userid" value="111">
- 一般method也会写成post
- readonly与disabled：
- 相同点：只读，不能修改
- 不同点：readonly的数据可以提交给服务器；disabled的数据不会提交（即使有name属性也不会提交，可以不写name属性）
- <input type="text" name="usercode" value="110" readonly/>
- <input type="text" name="username" value="lisi" disabled/>
- input控件的maxlength属性：设置文本框中可输入的字符数量
- <input type="text" maxlength="3"/>
- 作用：收集用户的信息
- HTML中元素的id属性：
- 在HTML文档中，任何元素（也叫节点）都有id属性，id属性是该节点的唯一标识（节点的身份证号码），所以在同一个HTML文档中id值不能重复
- <head>头节点；<body>body节点；<title>标题节点
- 表单提交数据的时候，只和name有关系，和id无关
- <body id="mybody">
- <form id="myform">
- <input type="text" id="username" name="wusename"/>
- </form>
- <form id="myform">
- </body>
- <body id="mybody">
- id的作用：
- JavaScript语言：可以对HTML文档当中的任意节点进行增删改查操作（让网页产生动态效果）
- JavaScript在增删改之前需要先拿到这个节点，通常通过id来拿到节点对象
- id的存在让我们获取元素（节点）更方便
- HTML文档是一棵树(DOM树)，树上有很多节点，每个节点都有唯一的id
- JavaScript主要是对这颗DOM(Document文档)树上的节点进行增删改
- 在HTML文档中，任何元素（也叫节点）都有id属性，id属性是该节点的唯一标识（节点的身份证号码），所以在同一个HTML文档中id值不能重复
- div和span：
- 是什么？有什么用？
- div和span都可以称为“图层”
- 图层的作用是为了保证页面可以灵活地布局
- 图层就是一个一个的盒子，div嵌套div就是盒子套盒子
- 最早的网页采用table布局，但是table不灵活、太死板；现在的网页开发中div布局使用最多。几乎很少使用table进行布局了
- div和span是可以定位的，只要定下div左上角的x轴和y轴坐标即可，可以嵌套
- div和span的区别：
- div独自占用一行（默认情况下）
- span不会独自占用一行
- 是什么？有什么用？
- 第一个HTML：
- 网页分成三个部分：结构（HTML）、表现（CSS）、行为（JavaScript）
- <head>：网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎解析网页
- <meta>：设置网页的元数据(元数据不是给用户看)，常用属性有charset、name、content
- charset：指定网页的字符集
- name：指定的数据的名称
- content：指定的数据的内容
- <meta name="keywords",content="HTML5,前端，CSS3">
- keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用“，”隔开
- <meta name="discription",content="京东 JD.com">
- description：指定网站的描述（自我介绍），会显示在搜索引擎搜索的结果中
- title标签的内容会作为搜索结果的超链接上的文字显示
- <meta http-equiv="refresh" content="3;url=https://www.baidu.com">3秒后跳转到百度
- 将页面重定向到另一个网站
- <meta name="keywords",content="HTML5,前端，CSS3">
- <meta>：设置网页的元数据(元数据不是给用户看)，常用属性有charset、name、content
- <body>：表示网页中的主体，专门负责网页的结构，网页中所有可见内容应该写在body里面
- 语义化标签：
- 标题标签：块元素，h1-h6，共有六级标题，重要性递减（一般只使用h1-h3，h4-h6很少用）
- <h1></h1>：网页的一级标题，重要性仅次于title标签，一般情况下一个页面中只有一个h1
- hgroup标签：用来为标题分组，可以将一组相关的标题同时放入到hgroup
- 在页面中独占一行的元素称为块元素（block element），用来对页面进行布局；
- 不会独占一行的元素称为行内元素（inline element），主要用来包裹文字（设置特殊效果）
- 一般在块元素中放行内元素（块元素中基本什么都能放），不在行内元素中放块元素
- <p></p>：p标签表示页面中的一个段落，也是一个块元素
- p元素中不能放任何的块元素
- em标签：表示语音语调的加重（行内元素）（变成斜体）
- strong标签：表示强调，重要内容（粗体）
- blockquote：表示一个长引用（独占一行）
- q：表示一个短引用（不换行）
- br标签：表示页面中的换行
- 标题标签：块元素，h1-h6，共有六级标题，重要性递减（一般只使用h1-h3，h4-h6很少用）
- 浏览器在解析网页时，会自动对网页中不符合规范的内容修正
- 如：标签写在了根元素的外部，p元素中嵌套了块元素，根元素中出现了除head和body以外的子元素
- 结构化语义标签：
- header：表示网页的头部
- main：表示网页的主体部分（一个页面中只有一个main）
- footer：表示网页的底部
- nav：表示网页中的导航
- aside：和主体相关的其他内容（侧边栏）
- article：表示一个独立的文章
- section：表示一个独立的区块，上边的标签都不能表示时使用section
- div：没有语义，表示一个区块，目前是主要的布局元素
- span：行内元素，没有语义，一般用于在网页中选中文字
- 列表list：
- 有序列表：
- 使用ol标签创建有序列表，使用li表示列表项
- 无序列表：
- 使用ul标签创建无序列表，使用li表示列表项
- 定义列表：
- 使用dl标签来创建一个定义列表
- 使用dt表示定义的内容
- 使用dd对内容进行解释说明
- 列表间可以互相嵌套
- 有序列表：
- 超链接：从一个页面跳转到其他页面，或者是当前页面的其他的位置
- 用a标签定义超链接（alt+shift+方向键：向上/下复制）
- 也是一个行内元素，但在a标签中可以嵌套除它自身外的任何元素
- 属性：
- href：指定跳转的目标路径 <a href="https://www.baidu.com">
- 值可以是一个外部网站的地址（绝对路径），也可以写一个内部页面的地址（两个页面在同一个目录下）
- 当需要跳转到一个服务器内部的页面时，一般使用相对路径
- 相对路径使用./或../开头，可以省略不写，如果两个都不写相当于写了./
- ./表示当前文件所在的目录
- ../表示当前文件所在目录的上一级目录
- 相对路径使用./或../开头，可以省略不写，如果两个都不写相当于写了./
- target：用来指定超链接打开的位置
- 可选值：
- _self 默认值：在当前页面中打开超链接
- _blank：在一个新的页面中打开超链接
- 可选值：
- href：指定跳转的目标路径 <a href="https://www.baidu.com">
- lorem：自动生成一段英文文本
- 将href属性设置为#：点击超链接后页面不会发生跳转，而是转到当前页面的顶部的位置
- id属性（唯一不重复的）：每一个标签都可以添加一个id属性
- 是元素的唯一标识，同一个页面不能出现重复的id属性，命名要以字母开头
- 跳转到页面的指定位置：将href属性设置 #目标元素的id属性值
- 在开发中可以将# 作为超链接的路径的占位符使用，但是点击后也会回到顶部
- 可以使用javascript:;作为href的属性，此时点击这个超链接什么也不会发生
- 用a标签定义超链接（alt+shift+方向键：向上/下复制）
- 图片标签：用于向当前页面引入一个外部图片，使用img标签引入外部图片（自结束标签）
- 属性：
- src指定外部图片的路径（路径规则和超链接一样）
- img属于替换元素（基于块和行内元素之间，具有两种元素的特点）
- alt：图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示，如果不写alt属性图片就不会被搜索引擎所收录
- height：图片的高度；width：图片的宽度
- 宽度和高度如果只修改了一个，则另一个会等比例缩放
- 注意：一般在pc端，不建议修改图片的大小，需要多大的图片就裁多大
- 但在移动端，需要经常对图片进行缩放（大图缩小）
- src指定外部图片的路径（路径规则和超链接一样）
- 格式：
- jpeg（jpg）：支持的颜色丰富，不支持透明效果，不支持动图
- 一般用来显示照片
- gif：支持的颜色较少，支持简单透明，支持动图
- 颜色单一的图片，动图
- png：支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明的图片（专为网页而生）
- webp：支持的颜色丰富，不支持透明效果，不支持动图
- 谷歌新推出的专门表示网页中的图片的一种格式，具备其他图片格式的所有优点，文件还特别小
- 缺点：兼容性不好
- base64：将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用，希望图片加载速度快的时候使用
- 总结：效果一样，用小的；效果不一样，用效果好的
- jpeg（jpg）：支持的颜色丰富，不支持透明效果，不支持动图
- 属性：
- 内联框架iframe：用于向当前页面中引入一个其他页面
- src：指定要引入的网页的路径；width；height
- frameborder：内联框架的边框，0表示没有，1表示有，不能被搜索引擎检索
- 音视频：文件引入时，默认情况下不允许用户自己控制播放停止
- audio标签：用来向页面中引入一个外部的音频文件
- 属性：
- src指定路径：
- <audio src="./路径"></audio>
- controls：是否允许用户控制播放
- autoplay：音频文件是否自动播放
- 如果设置了autoplay，则音乐在打开页面时会自动播放，但是目前大部分浏览器都不会自动对音乐进行播放
- loop：音乐是否循环播放
- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径，可以同时指定多个文件（mp3、ogg）,浏览器支持哪个格式就会自动选择哪个格式的音频进行播放
- <audio controls>
- 对不起，浏览器不支持播放音频（不兼容时可以显示提示文字）
- <source src="./路径/audio.mp3">
- <source src="./路径/audio.ogg">
- embed支持老版本浏览器的兼容问题
- <embed src="" type="" width="" height="">
- src指定路径：
- 属性：
- video标签：向网页中引入一个视频文件
- 使用方式和audio基本一样
- webm：谷歌推出的视频格式
- 可以直接在视频网站上复制链接贴进代码
- audio标签：用来向页面中引入一个外部的音频文件
- 语义化标签：
- 表格：通过table标签创建
- 使用tr表示表格中的一行，有几个tr就有几行
- 在tr中使用td表示一个单元格，有几个td就有几个单元格
- colspan：横向的合并单元格
- rowspan：纵向的合并单元格
- 在tr中使用td表示一个单元格，有几个td就有几个单元格
- 可以将一个表格分成三部分：头部thead，主体tbody，底部tfoot
- th表示头部的单元格（居中、加粗效果）
- border-spacing：指定边框之间的距离
- border-collapse：设置边框的合并
- 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中，则tr不是table的子元素，是tbody的子元素
- 默认情况下元素在td中是垂直居中的，通过vertical-align来修改
- 将元素设置为单元格：display: table-cell;
- 使用tr表示表格中的一行，有几个tr就有几行
- 表单：将本地的数据提交给远程的服务器
- 使用form标签创建一个表单
- form的属性：
- action：表单要提交的服务器的地址
- 文本框：input type="text"
- 数据要提交到服务器中，必须要为元素指定一个name属性值
- 密码框：input type="password"
- 提交按钮：input type="submit" value指定按钮显示的文字/<button type="submit"></button>
- 单选按钮：input type="radio"
- 像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
- 如果有多个，要设置相同的name值，才可以只能选择一个
- checked：将单选按钮设置为默认选中
- 多选框：input type="checkbox"
- 下拉列表：<select><option></option></select>
- 在option中设置selected即为默认选中
- 普通的按钮：input type="button"/<button type="button"></button>
- 重置按钮：input type="reset"/<button type="reset"></button>
- 颜色选择框：input type="color"（兼容性不好）
- 电子邮件框：input type="email"
- autocomplete="off"：关闭自动补全
- readonly：将表单项设置为只读，数据会提交
- disabled：将表单项设置为禁用，数据不会提交
- autofocus：设置表单项自动获取焦点
- 小米商城练习：
- index.html：表明为主页
- transition：为样式设置过渡效果
- text-indent: -9999px：隐藏文字
- 网站图标（在标题栏和收藏栏）：
- 网站图片一般都存储在网站的根目录下，名字一般都叫做favicon.ico
- 在head里设置：<link rel="icon" href="./favicon.ico">
- 网站图片一般都存储在网站的根目录下，名字一般都叫做favicon.ico
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
