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>