浏览器访问网页的原理:先将需要访问网页的内容缓存到本地中,然后浏览器根据自己的内核渲染出来给用户看.
浏览器请求数据的过程:按下回车键后浏览器发送请求报文,服务器处理请求,然后通过发送响应报文返回数据给浏览器.
请求报文:请求行+请求头+空行+请求体(会显示在浏览器上面)
响应报文:响应行+响应头+响应体
HTML的作用:专门描述文本语义的.就是用一些文本来规范另外一些文本的显示方式.而不是用来修改样式的.
比如问题:H1标签的作用:
–错误回答:H1可以修改文字大小,并且可以将文字加粗
–正确回答:告诉浏览器那些是标题,用于给指定的文字添加标题的语义
dta文档的声明:有三大类:html5 和html和xhtml
HTML5的声明:<!doctype html>
html strict的声明,它比html5还要严格点,比如< font>< /font>标签是控制文字的样式的,所以在声明为html strict标签时就不能使用font标签,还有比如< u>< /u>标签都不能使用
html transitional的声明:它是一半的,不是很严谨,所以前面的样式标签都可以使用
html frameset的声明:这是带框架的,后面框架时补充说明
xhtml比html更加严格,比如区分大小写之类的
xhtml strict
xhtml transitional
xhtml frameset
开始学习标签
-
一般开发中,一个网页中只能有一个h1标签(seo有关)
-
在webstorm中ctrl+d是复制光标所在的行
-
在webstorm中ctrl+x是删除光标所在的行
-
如何在webstore中让标签包裹一段内容,也就是在一段内容前后加上标签:ctrl+alt+t,然后按下回车就行
-
ctrl+/是注释
快速移动选中的代码,CTRL+shift+↑(方向键上或方向键下)
CTRL+加号/减号:将代码展开或者折叠起来 (展开和折叠的是一个标签)
CTRL+shift+加号/减号:将代码展开或者折叠起来(展开和折叠的是选中的所有标签)
shift+回车:是快速新启一行(比如光标在代码中间,这个快捷键就直接新启一行,我们不用麻烦的将光标放到末尾然后再按enter键 -
img标签里面,如果想指定图片的显示大小,但是又不想图片变形,就只指定图片宽度和高度其中的一个即可.img的title属性是鼠标停留时的提示信息.alt属性是找不到图片时的提示信息
-
如果通过a标签的href属性给指定一个url地址,那么就必须在地址前面加上http://或https://
a标签的target属性的取值:
_self:在当前打开页面跳转到a标签的链接(默认值)
_blank:在新的页面中打开a标签的链接 -
< base target="_blank" >就是将这个页面的所有a标签的打开方式都改成在新的页面打开.base标签要写在head里面
-
假链接
方式:1:# 2:JavaScript: //注意这里有个冒号
区别:#的假链接点击会自动回到网页的顶部,而JavaScript的假链接是不会自动回到网页的顶部的 -
瞄点:就是跳转到网页的其他部分或者其他页面或者其他页面的指定位置
跳转到网页的其他部分
1:先给指定的部分用id属性给它一个身份
2:在a标签中的href属性中就改成< a href="#id(id是要跳转到的标签的id)>< /a>
注意点:通过a标签跳到指定的位置是没有动漫效果的,是一下子就跳过去的.
跳转其他页面
< a href=“其他页面的路径” >< /a>
跳转其他页面的指定位置
< a href=“其他页面的路径#指定位置标签的id”>< /a> -
列表标签:
作用:给一堆数据添加列表的语义,就是告诉搜索引擎,告诉浏览器这一堆数据是一个整体
分类:
无序列表(用最多)(unordered list)
有序列表(用最少)(ordered list)
定义列表(其次)(definition list)
无序列表:
格式
< ul>
< li>< /li>
< /ul>
注意点:一定记住ul标签是用来给一堆数据添加列表语义的,而不是用来给他们添加小圆点的
应用场景
1:新闻列表
2:商品列表
3:导航条
有序列表
格式:
< dl>
< dt>< /dt>
< dd>< /dd>
< /dl>
dt是英文defintion title的缩写,所以它就是用来定义列表的标题
dd是英文defintion description的缩写,所以它是用来定义标题对应的描述的
应用场景
1.做网站尾部的相关信息
2.做图文混排
注意点
一个dt可以没有对应的dd,也可以有多个对应的dd,但是有和没有dd都不推荐使用,推荐的是一个dt对应一个dd,大型的网站都是这样,要丰富内容就在dd里面增加其他标签丰富内容
- 表格标签
其实在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表
1.什么是表格标签?
表格标签作用: 用来给一堆数据添加表格语义
其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式
2.格式:
3.注意点
3.1表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
3.2表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
表格的属性
1.宽度和高度的属性
可以给table标签和td标签使用
1.1表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
1.2如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度
2.水平对齐和垂直对齐的属性
其中水平对齐可以给table标签和tr标签和td标签使用
垂直对齐只能给tr标签和td标签使用
2.1给table标签设置align属性, 可以控制表格在水平方向的对齐方式
2.2给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式
2.3给td标签设置align属性, 可以控制当前单元格中内容在说方向的对齐方式
注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
2.4给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式
2.5给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式
注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
3.外边距和内边距的属性
只能给table标签使用
3.1.外边距就是单元格和单元格之间的距离, 我们称之为外边距
默认情况下单元格和单元格之间的外边距的距离是2px
3.2 内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距
默认情况下内边距是1
注意: 以上讲解的内容仅仅作为了解, 以后在企业开发中所有控制样式的都是通过CSS
制作细线表格
在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的, 其实它是将2条线合并为了一条线, 所以看上去很不舒服
细线表格的制作方式:
1.给table标签设置bgcolor
2.给tr标签设置bgcolor
3.给table标签设置cellspacing = “1px”
注意点:
table标签和tr标签以及td标签都支持bgcolor属性
其他属性
1.表格标题
在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中
2.caption标签的注意点:
2.1caption一定要写在table标签中, 否则无效
2.2caption一定要紧跟在table标签后面
3.标题单元格标签
3.1.在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字
3.2.到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的
表格合并
1.水平方向上的单元格合并
可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)
例如:
注意点:
1.由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示
2.一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并
2.垂直方向上的单元格合并
可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)
例如:
- 表单标签
1.什么是表单?
表单就是专门用来收集用户信息的
2.什么是表单元素?
2.1什么是元素?
在HTML中 标签/标记/元素都是指HTML中的标签
例如: < a> a标签/a标记/a元素
表单元素其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能
3.表单的格式:
< form>
<表单元素>
< /form>
4.常见的表单元素
input标签, input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同
5.注意:
表单元素一定要写在表单中
表单的type的不同取值:
文本框:type=“text”
密码框 :type=“password”
单选框 type=“radio”
注意点:
1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值
2.要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性
3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐大家不要省略取值
多选框 type=“checkbox”
1.当多选框想定一个默认值是,就增加属性:checked=“checked”
普通按钮 type=“button”
定义一个普通按钮
作用:配合JS完成一些操作
图片按钮 type=“image”
< input type=“image” src=“images/register.jpg” οnclick=“alert(‘lnj’)”>
定义一个图片按钮
作用:配合JS完成一些操作
重置按钮 < input type=“reset” value=“清空”>
作用:清空表单中的数据
注意点:
重置按钮有默认的按钮标题, 默认叫做 重置
也可以通过value属性来修改默认标题
提交按钮 < input type=“submit”>
作用:将表单中的数据提交到远程服务器
注意点:
要想把表单中的数据提交到远程服务器,必须满足两个条件
1.告诉表单需要提交到哪个服务器
可以通过form标签的action属性来告诉表单,需要提交到那个服务器
2.告诉表单,表单中的哪些数据需要提交
只要是表单中带有name属性的标签,标签中的数据都是要提交的,而且是以key-value的键值对形式提交的.
隐藏域 < input type=“hidden” name=“cc” value=“it666”>
作用: 用于悄悄咪咪的收集用户的一些数据, 隐藏域是不会出现在界面中的,它是在后台提交一些数据给服务器的,比如这里写死的name和value数据
label标签
1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签
3.绑定的格式:
3.1将文字利用label标签包裹起来
3.2给输入框添加一个id属性
3.3在label标签中通过for属性和输入框中的id进行绑定即可
例如:
方法一: < label for=“account”>账号:< /label>< input type=“text” id=“account”>
方法二:< label>账号:< input type=“text”>< /label> //方法二就是将输入框全部放在label标签里面,这样也可以做到文字和输入框进行绑定,但是这样做是有局限的,如果文字和输入框不是相邻的就做不到了.
datalist标签(比较多的浏览器不支持这个标签)
1.作用: 给输入框绑定待选项
2.datalist格式:
< datalist>
< option>待选项内容< /option>
< /datalist>
3.如何给输入框绑定待选列表
1.搞一个输入框
2.搞一个datalist列表
3.给datalist列表标签添加一个id
4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
表单标签新增的type类型(大多数的浏览器都不支持,所以看一下就行)
表单标签的select标签
作用: 用于定义下拉列表
格式:
< select>
< optgroup label=“分组名称”>
< option>列表数据< /option>
< /optgroup>
< /select>
注意点:
1.下拉列表不能输入内容, 但是可以直接在列表中选择内容
2.可以通过给option标签添加一个selected属性来指定列表的默认值
3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类
textarea标签
作用: 定义一个多行输入框
格式:
< textarea>
< /textarea>
注意点:
1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
4.默认情况下输入框是可以手动拉伸的
补充
1.在单选框和多选框中,所有的项目的name必须一致,这样才能正确地将信息提交到服务器
2.在表单标签中,除了按钮标签以外的标签,都可以通过value来指定需要提交到服务器的数据
3. 在表单中想增加表单的边界,就可以在紧接着form标签写fieldset标签,边界的标题可以通过legend标签实现,格式如下:
< fieldset>
< legend>标题< /legend>
< /fieldset>
- video标签
第一种格式
1.什么是video标签?
作用: 播放视频
格式:
< video src="">
< /video>
video标签的属性
src: 用于告诉video标签需要播放的视频地址
autoplay: 用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否需要显示控制条
poster: 用于告诉video标签视频没有播放之前显示的占位图片
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:静音
width/height: 和img标签中的一模一样
第二种格式
1.格式:
< video>
< source src="" type=“video/webm”>< /source> //webm格式视频
< source src="" type=“video/mp4”>< /source> //MP4格式视频
< source src="" type=“video/ogg”>< /source> //ogg格式视频
< /video>
2.第二种格式存在的意义:
由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的
这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
video标签的第二种格式存在的意义就是为了解决浏览器适配问题
video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
3.注意点:
3.1当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
3.2在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现
- audio标签
1.什么是audio标签?
作用: 播放音频
格式:
< audio src="">
< /audio>
< audio>
< source src="" type="">
< /audio>
注意点:
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster
- 详情和概要标签
1.什么是详情和概要标签?
作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息
默认情况下是折叠展示, 想看见详情必须点击
格式:
< details>
< summary>概要信息< /summary>
详情信息
< /details>
- marquee标签
1.什么是marquee标签?
作用: 跑马灯
格式:
< marquee>内容< /marquee>
属性:
direction: 设置滚动方向 left/right/up/down
scrollamount: 设置滚动速度, 值越大就越快
loop: 设置滚动次数, 默认是-1, 也就是无限滚动
behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
注意点:
marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好
- HTML中被废弃的标签
1.为什么HTML中有一部分标签会被废弃?
因为当前的HTML中的标签只有一个作用, 就是用来添加语义
而早期的HTML标签中有一部分标签是没有语义的,
有一部分标签是用来修改样式的
所以这部分标签就被淘汰了
< br> < hr> < font>
< b> < u> < i> < s>以上标签都是没有语义的,都是用来修改样式的
b(bold) 加粗文本, 没有任何语义的
u(underline) 给文本天津下划线, 没有任何语义的
i(italic) 将文本倾斜, 没有任何语义的
s(strikethourgh) 给文本添加删除线, 没有任何语义的
注意点:
以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签
如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用
strong == b
ins == u
em == i
del == s
strong语义: 定义重要性强调的文字
ins语义(inseted): 定义插入的文字
em语义(emphasized): 定义强调的文字
del语义(deleted): 定义被删除的文字
- 字符实体
1.在HTML中对空格/回车/tab不敏感, 会把多个空格/回车/tab当做一个空格来处理
2.什么是字符实体?
在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体
& nbsp; 空格, 一个& nbsp;就是一个空格, 有多少个& nbsp;就有多少个空格
& lt; 小于符号 <
(less than)
& gt; 大于符号 >
(greater than)
& copy; 版权符号
3739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
