浏览器请求数据的过程
- 按下回车时浏览器根据URL地址发送请求报文
- 服务器接收请求报文,会对请求报文进行处理
- 服务器将处理完的结果通过响应报文返回给浏览器
- 浏览器解析返回的结果,将结果渲染到界面上
什么是URL(统一资源定位器)
-
1.在浏览器的地址栏中输入的地址其实就是URL
-
2.URL格式
- 127.0.0.1/index.html （浏览器会自动补全http:和：80）
- http://127.0.0.1/index.html （浏览器会自动补全：80）
- http://127.0.0.1:80/index.html （完整格式)
- 协议类型://ip地址:端口号/资源路径/资源名称
-
3.URL拆分
- 网络协议类型 http://
- 服务器IP地址 127.0.0.1
- 服务器端口号 :80
- 资源路径 网页在服务器上的路径
- 资源名称 index.html
列表标签
有序列表
<ul>
<li> </li>
</ul>
- ul应用场景:
* 导航条
* 商品列表等
* 新闻列表
无序列表
<ol>
<li> </li>
</ol>
-
ol应用场景:
- xxx排行榜
- 其实ol应用场景并不多, 因为能用ol做的用ul都能做
定义列表
<dl>
<dt>北京</dt>
<dd>国家的首都, 看升国旗的地方</dd>
<dt>上海</dt>
<dd>魔都, 遍地是黄金的地方</dd>
</dl>
- dl应用场景
- 网站底部相关信息
- 但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl
表格标签
- 格式
<table bgcolor="black" cellspacing="1px" width="800px" align="center">
<caption>
<h2>今日小说排行榜</h2>
</caption>
<tr bgcolor="#a9a9a9">
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>
</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
表格中的标签
- table定义表格
- tr定义行
- td定义单元格
- 表单中有两种类型的单元格, 一种是标准单元格td, 一种是表头单元格th
- th标签: 给每一列设置标题, 单元格中的内容会自动加粗，居中
- caption标签:给整个表格设置标题一定要嵌套在talbe标签内部才有效
表格的结构
-
thead标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小
-
tbody标签:一般用来存放页面中的主体数据, 如果不写会自动加上
-
tfoot标签:用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>数据</td>
</tr>
</tfoot>
</table>
表格中的属性
- border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度
- width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度
- height:默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度
- cellspacing: 外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙
- cellpadding: 内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距
- align: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right
- valign: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right
- bgcolor:规定表格的背景颜色
合并单元格
- 水平方向:colspan
- 垂直方向:rowspan
<table align="center">
<tr>
<td>单位:元</td>
<td>1月</td>
<td>2月</td>
<td>3月</td>
<td>4月</td>
</tr>
<tr>
<td>张三</td>
<td>4777</td>
<td rowspan="2">扣发</td>
<td>5465</td>
<td>3456</td>
</tr>
<tr>
<td>李四</td>
<td>4532</td>
<td>3432</td>
<td>3421</td>
</tr>
<tr>
<td>王五</td>
<td>3546</td>
<td>4354</td>
<td>3254</td>
<td>4657</td>
</tr>
<tr>
<td>赵六</td>
<td>2435</td>
<td colspan="3">2354</td>
</tr>
</table>
表单
类型
<input type="text"> <!--文本框-->
<input type="password"> <!--密码框-->
<input type="radio"> <!--单选框(name属性必须一致,提交必须有value)-->
<input type="checkbox"> <!--多选框(name属性必须一致,提交必须有value)-->
<input type="hidden"> <!--隐藏域-->
<input type="button"> <!--普通按钮-->
<input type="reset"> <!--重置按钮-->
<input type="submit"> <!--提交按钮-->
<select name="city" id=""> <!--下拉菜单-->
<option value="">北京</option>
<option value="">上海</option>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea> <!--文本域-->
<!-- H5表单类型 -->
<input type="email"> <!--邮箱-->
<input type="url"> <!--URL地址-->
<input type="number"> <!--数字-->
<input type="date"> <!--时间-->
<input type="color"> <!--颜色-->
<input type="search"> <!--颜色-->
label标签
<!--第一种(推荐)-->
<label for="username">账号:</label> <input type="text" name="username" id="username">
<label for="password">密码:</label> <input type="password" name="password" id="password">
<!--第二种-->
<label>账号: <input type="text" name="username" id="username"><br></label>
<label>密码: <input type="password" name="password" id="password"></label><br>
datalist标签(h5)
<input type="text" list="school">
<!-- 给输入框绑定待选项 -->
<datalist id="school">
<option>北京大学</option>
<option>北京师范大学</option>
<option>北京航空航天</option>
<option>北京理工大学</option>
<option>中国人民大学</option>
<option>中国农业大学</option>
<option>中央民族大学</option>
<option>上海交通大学</option>
<option>华东理工大学</option>
<option>华东师范大学</option>
<option>上海财经大学</option>
</datalist>
多媒体标签
video标签
<!--第一种-->
<video src="abd.mp4"></video>
<!--第二种,解决浏览器兼容-->
<video>
<source src="abd.ogg" type="video/ogg">
<source src="abd.mp4" type="video/mp4">
<source src="abd.webm" type="video/webm">
</video>
- 视频格式
- video标签的属性
audio标签
<audio src=""></audio>
<audio>
<source src="abd.ogg" type="audio/ogg">
<source src="abd.mp4" type="audio/mp3">
<source src="abd.wav" type="audio/wav">
</audio>
- 音频格式
- audio标签属性
概要和详情标签
目前只有 Chrome 和 Safari 6 支持 标签。
- 格式
<details>
<summary>北京大学</summary>
<p>北大是常为新的，</p>
<p>改进的运动的先锋，</p>
<p>要使中国向着好的，</p>
<p>往上的道路走。</p>
</details>
- 属性
open: 值open, 定义 details 是否可见。
marquee标签
- 格式
<marquee>......</marquee>
-
属性
- direction: 设置滚动方向 left/right/up/down
- scrollamount: 设置滚动速度 值越大速度越快
- loop: 设置滚动次数 默认-1(无限循环)
- behavior : 设置滚动类型 slide滚到边界就停止 alternate滚到边界就弹回
-
演示
<h4>滚动方向</h4>
<marquee direction="left">北京大学</marquee>
<marquee direction="right">北京大学</marquee>
<marquee direction="up">北京大学</marquee>
<marquee direction="down">北京大学</marquee>
<hr>
<h4>滚动速度</h4>
<marquee scrollamount="5">北京大学</marquee>
<marquee scrollamount="10">北京大学</marquee>
<marquee scrollamount="15">北京大学</marquee>
<marquee scrollamount="20">北京大学</marquee>
<hr>
<h4>滚动次数</h4>
<marquee loop="1">北京大学</marquee>
<marquee loop="5">北京大学</marquee>
<marquee loop="10">北京大学</marquee>
<marquee loop="-1">北京大学</marquee>
<hr>
<h4>滚动类型</h4>
<marquee behavior="slide">北京大学</marquee>
<marquee behavior="alternate">北京大学</marquee>
废弃标签
因为当前的HTML中的标签只有一个作用, 就是用来添加语义
而早期的HTML标签中有一部分标签是没有语义的,
有一部分标签是用来修改样式的
所以这部分标签就被淘汰了
br hr font b u i s以上标签都是没有语义的,都是用来修改样式的
无语义
- b(bold) 加粗文本, 没有任何语义的
- u(underline) 给文本天津下划线, 没有任何语义的
- i(italic) 将文本倾斜, 没有任何语义的
- s(strikethourgh) 给文本添加删除线, 没有任何语义的
有语义
- strong == b
strong语义: 定义重要性强调的文字 - ins == u
ins语义(inseted): 定义插入的文字 - em == i
em语义(emphasized): 定义强调的文字 - del == s
del语义(deleted): 定义被删除的文字
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
