html只能被浏览器解析
所有标签都能设置的属性是四个，公有属性——id，class，title，style
外部资源链接元素：<link rel="stylesheet" href="url">
超链接元素<a href="url"></a>
表单元素<form action="提交的服务器端地址"></form>
//div#outer>div#center>div#inner
<div id="outer">
<div id="center">
<div id="inner"></div>
</div>
</div>
html：preload：页面加载后载入视频
autoplay：视频就绪马上播放
buffered：缓冲的时间范围
controller：当前媒体控制器
children：只返回子节点不返回孙节点，包括文本和注释节点
contents：返回所有后代节点
一、HTML(不报错)
超文本标记语言(HyperText Markup Language)的简写，不是编程语言，而是一种标记语言。
1.超文本和标记语言(3种语言-1)、客户端-服务器端-数据库、标准url路径、B/S架构
超文本：超越普通文本，能够在文本内插入图片、音频、视频、超链接、表格等
标记语言：<div>1+1</div> 输出1+1
特点：本身不具有逻辑能力和行为能力，只能被(浏览器)读取，怎么插入怎么显示
本地sublime/vscode编辑器上编写代码->本地浏览器运行->部署到服务器端
(能在线看不下载淘宝，是因为淘宝的开发者将所有页面放在了淘宝的服务器上)
HTTP协议：https://blog.csdn.net/qq_38265137/article/details/93379922?
标准url路径：http://www.baidu.com (包含客户端和服务器端的请求和响应)
http://47.100.138.73:80/demo/index.html——转化成上面的需要花钱
协议名称://ip地址:端口号/项目路径
ip地址——访问到服务器端(哪台电脑)
端口号——哪个软件 eg.vscode
:80端口，访问静态服务器页面
:3306端口，访问数据库
项目路径——哪个页面
B/S架构(Browser/Server，浏览器/服务器模式)————浏览器运行
只要在浏览器打开的就叫B/S架构项目
是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件
C/S架构(client/server，客户机/服务器模式)————软件运行
2.编程语言(3种语言-2)
C
java：hello.java->hello.class 编译成class文件，再被解析器解析
system.out.print(1+1); //2
特点：需要编译后才能运行，本身具有逻辑能力和行为能力(输出在控制台上)
3.脚本语言(3种语言-3)
js:
console.log(1+1); //2
特点：被解析器解析运行(浏览器自动解析)，本身具有逻辑能力和行为能力
二、HTML特点
1、从上到下依次解析(不区分执行和解析顺序)
2、容错性(宽松性)，不报错
3、大小写不敏感
三、文档结构
创建HTML文档：.html .htm 为后缀名的文档，多的l是language的意思
默认文档结构：快捷键生成
html:4t
html:5
DOCTYPE(声明文档类型)
<html>(根元素、最大父元素)
<head>
<meta>(至少一个)：设置字符编码
html5中会多一个meta，设置手机端属性(手机端开发)
<title>(至少一个)：设置标签页名称</title>
引入第三方文件(建议) eg.style,script
<style type="text/ccs"></style> //文本或css文件
<script type="text/javascript"></script> //文本或js文件
</head>
<body>
在浏览器上想要展示的内容
</body>
</html>
四、元素
1.元素的组成(不能交叉嵌套)
开始标签 元素内容 结束标签
单标签/空元素(无元素内容)：有一部分标签没有结束标签
meta：在head里
img
<br>换行
<hr>水平分割线，最常用
2.元素的分类(块级元素、行内元素及区别)
块级元素：div
p
pre 保留输入格式
h1~h6
table表格
<form action=""></form>
----------------------------------------------
列表标签：
<ul> 无序列表
<li></li> //列表项
</ul>
-----------------------------------------------
<ol> 有序列表
<li></li>
</ol>
-----------------------------------------------
<dl> 定义列表
<dt></dt> //一个项目
<dd></dd> //项目下更细内容
</dl>
行内元素：
<a></a> 超链接
<b></b> 加粗 <strong></strong>
<span></span> 最常用的行内元素
<img src="" alt=""> 图片
<select name="" id=""></select> 下拉框
<label for=""></label> 可和input绑定使用
for属性
功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
用法：<input id="InputBox" type="text">
<label for="InputBox">姓名</label>
<button></button>
<textarea name="" id="" cols="30" rows="10"></textarea> name不展示在地址栏，传给后台
<em></em> 斜体
<i></i> 斜体
<u></u> 下划线
五、属性
1.属性的设置
写在开始标签内部 属性名1="属性值1" 属性名2="属性值2"
2.属性的分类
1>按照公有性分类
公有属性：所有标签都能设置的属性(在body里写)
id：元素的唯一标识(属性值只能有一个)
class：按类标识元素，设置元素的分类(每个标签都可以设，且不只一个属性值)
title(title属性)：设置提示(鼠标移过去会显示)
style：设置行内样式(边框、宽度、背景等)，属性值必须根据css语法进行设置
私有属性：只有当前标签能使用
img(私有属性src，alt)
2>按照属性值(布尔特性)分类
普通属性：属性值使用字符串类型""或''(交叉嵌套)
布尔值属性：属性值为true或false
//true
key(常用)
key=value:键值对 //key键:属性名 value值:属性值
key='key'
key='true'
key=true
//false 不写/通过js控制
六、语法
1、空白：在文档中无论出现多少个空白或换行，浏览器都解析为一个空格
解决措施：pre标签(body里)：段落标签：保留用户所输入的格式(怎么输入就怎么显示)
2、字符实体：标签不显示，因为没有样式
解决措施：使用&开头 中间写实体名称 使用;结尾
空格
< <
> >
" "
© 圈C
® 圈R
×； ×
3、注释：<!--注释内容-->
提升代码的可读性，便于代码的维护和管理
html中的注释不能嵌套使用(在内部注释结尾处完)
七、标签(有默认样式)、内外边距
div(一般用)+span (搭架子、布局)(html中无意义的元素)(最外层会有一个div地皮)
body:上下左右8px的外边距margin
p: 段落标签(填内容)——不能嵌套块级元素
pre: 段落标签，保留用户所输入的格式
br: 换行
hr： 水平线
私有属性：
color：水平线颜色
size：水平线高度
width：水平线宽度
align：水平线位置(left，center，right)
sup:上标签
sub:下标签
img: 图片标签(引入图片)
src:引入图片地址(可写相对路径，也可写绝对路径)(别忘了加.JPG)
相对路径：
./ 当前文件的文件夹内
../ 当前文件的上一层目录类
../../ 当前文件的上一层目录的上一层目录
绝对路径：http://www.baidu.com 或 从电脑盘幅开始写
alt:替换图片内容(当图片找不到了，即src找不到图片时用alt代替，否则不显示)
style里可设置：
width：设置图片的宽度(单位默认为px)
height：设置图片的高度(单位默认为px)
display:inline-block(将元素显示为行内块状元素)
display:block(将元素显示为块级)
display:inline(将元素显示为行内)
特殊的行内元素(替代元素：替换成了图片)
能和其它元素共享一行，又能设置宽高
强调标签(加粗/斜体)(后期可用css实现)：
//加粗标签：现在好像已经没有区别了
strong (更推荐)，除改变加粗样式外，浏览器的搜索引擎会把它当做关键字存在(可搜到)
b (只做样式改变)
//斜体标签
em
i (只做样式改变)
del 删除线
u 下划线
标题标签(块级元素)：h1-h6(字体大小依次递减)，标签样式也会依次递减
(axure里是h1-h3，是用来设置标题的)
a标签：超链接(行内元素)
href：设置链接地址(默认有下划线，是蓝色字体；按下是红色；点完后变成紫色；默认在当前页面打开)
1.标准url
2.锚点(像一个迅速定位器一样是一种页面内的超级链接)
通过id属性设置锚点位置 #id属性值
3.邮箱地址 mailto：邮箱地址
target：设置页面打开方式(怎么打开，从当前页面打开，还是新的链接里打开)
_blank:打开新页面
_self:在当前页面中打开(默认)
_top:在顶级框架中打开 //用iframe嵌套网页进行测试
_parent:在父框架中打开 //用的不多，但笔试可能会考到
去掉文本超链接的下划线a{text-decoration:none}——none，underline，overline，blink，line-through，inherit
1》table:表格
表格边框合并：border-collapse: collapse; //最终通过CSS实现
2》第二层可以不写(原则上是错误的，但是浏览器能解析出正确的)
子元素：caption:标题
colgroup(挑几列进行设置，写在所有tr之上)
col：列 私有属性span:number(控制几列)
例子：<colgroup>
<col span="2" style="background-color:red">
<col>
<col>
</colgroup>
thead：设置表格头部
tbody：设置表格体部 这三个可不写，省略后默认是tbody的孩子
tfoot：设置表格脚部
3》tr：行
4》td/th(表头，加粗居中)：列
私有属性：rowspan：跨行合并数
colspan：跨列合并数 colspan=3 跨3列合并(先格式，后字)
私有属性：当学完CSS就不要用这些属性了
align：表格在文档中对齐，left，center，right
border：取整数 给table设，最外层变粗了
//使用前删掉：表格边框合并：border-collapse: collapse;
cellpadding：设定内容与单元格之间的距离
cellspacing：设定单元格与单元格之间的距离 //上下一般一起写，cell：单元格
列表标签(块级元素)：无序列表
ul
li：列表项
有序列表(默认从1开始)——私有属性：start:number，reversed:反转(布尔属性)
ol
li
标题列表
dl
dt：标题
dd：列表项
//下面全是form表单的内容
form(表单)：客户端和服务器端发生数据交互时会用到表单
私有属性：action：表单提交地址
target：页面打开方式
_self：当前页面中打开(默认)
_blank：打开新页面
_top：顶级框架中打开 //用iframe嵌套网页测试
_parent：父框架中打开
method：表单提交方式
enctype：表单内容类型
子标签：<input type="text"(单行文本框)>
password(密码框)
radio(单选框)——设置相同的name值，产生互斥
checkbox(多选框)——checked(默认选中)
button(普通按钮)、submit(提交按钮)
reset(重置按钮)、image(图片按钮)
hidden(隐藏域，开发人员使用)
file(文件上传按钮)
autofocus(自动聚焦)
placeholder(提示用户输入，常用于搜索框)
required(必填项)
size(文本框宽度，默认20px)
maxlength(最大输入字符长度)
readonly(只读)、disabled(禁用组件)
name：设置前后台交互数据的属性名
value：按钮(修改按钮名)
—————————————新增属性————————————————
data(年、月、日)、month(年、月)、week(周)、time
number、color
tel、url、email
range、search
子标签：textarea：多行文本框
私有属性：cols
rows
wrap：off(不自动换行)
select：下拉框
私有属性：size：每次展示的项数
multiple：是否可多选
子标签：option
——selected：匹配所有选中的option
新增子标签：progress：常用于进度条(value max)
meter：规定范围内的数量值(min low value high max)
optimum：最佳值
datalist：需和input配合使用，规定了<input>的可能选项列表
和select不同的是——>输入会有“选项提示”
例子：<form action="">
<input list="浏览器">
<datalist id="浏览器">
<option value="谷歌"></option>
<option value="火狐"></option>
</datalist>
</form>
八、iframe标签(内联框架)
iframe标签：src：默认链接地址
name：名字
width
height
使用：target=name属性值
例子：
.frame_left div{
float:left;
padding:20px;
margin-left:40px;
}
.frame_right{
margin-top:100px;
width:100%;
height:500px;
float:left;
border:1px solid #000;
}
<div class="frame_left">
<div><a href="https://www.taobao.com" target="demo">淘宝</a></div>
<div><a href="https://www.baidu.com" target="demo>百度</a></div>
</div>
<div class="frame_right">
<iframe src="http://baidu.com" name="demo" height="500" width="100%" frameborder=0 ></iframe>
</div>
1278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
