前端之body

基本标签

 1 <b>加粗（这是b标签）</b> <br>
 2 <i>斜体（这是i标签）</i> <br>
 3 <s>打折（这是s标签）</s> <br>
 4 <u>字体下面加下划线（这是u标签）</u> <br>
 5 <p>这是p标签</p>
 6 <h1>这是h1标签</h1>
 7 <h2>这是h2标签</h2>
 8 <h3>这是h3标签</h3>
 9 <h4>这是h4标签</h4>
10 <h5>这是h5标签</h5>
11 <h6>这是h6标签</h6>
12 <br>
13 <p>换行是br标签</p>
14 <hr>
15 <p>水平线是hr标签</p>
16 <p>&nbsp空&nbsp格&nbsp是&nbsp & n b s p</p>
17 <p>&lt 小于号(low)是& l t</p>
18 <p>&gt 大于号是& g t</p>
19 <p>&amp 也就是and符号是& a m p</p>
20 <p>￥ 符号是& y e n</p>
21 <p>&copy 版权符号是&c o p y</p>
22 <p>&reg 注册符号是&r e g</p>
基本标签

 

基本标签对应的效果图

 

无序列表

 1 <ul type="disc">
 2     <li>第一项</li>
 3     <li>第二项</li>
 4     <li>第三项</li>
 5 </ul>
 6 <p>disc是实心圆</p>
 7 
 8 
 9 <ul type="circle">
10     <li>第一项</li>
11     <li>第二项</li>
12     <li>第三项</li>
13 </ul>
14 <p>circle是空心圆</p>
15 
16 
17 <ul type="square">
18     <li>第一项</li>
19     <li>第二项</li>
20     <li>第三项</li>
21 </ul>
22 <p>square是实心正方形</p>
23 
24 
25 <ul type="none">
26     <li>第一项</li>
27     <li>第二项</li>
28     <li>第三项</li>
29 </ul>
30 <p>没有样式，相当于空格</p>
31 <p>以上4个都是无序列表，只是更换了type类型</p>
32 
33 <p>有序就是在显示的时候前面的标识是有顺序的，有序是ol，更改的是type里面的类型，无序是显示的时候前面是没有顺序的全是实心圆这样，是用ul排序的，也是type改类型</p>
无序列表

 

对应的效果图片

 

有序列表

 1 <ol type="1">
 2     <li>Devil May Cry</li>
 3     <li>Devil May Cry</li>
 4     <li>Devil May Cry</li>
 5 </ol>
 6 <p>1是数字排序</p>
 7 
 8 <ol type="A">
 9     <li>Devil May Cry</li>
10     <li>Devil May Cry</li>
11     <li>Devil May Cry</li>
12 </ol>
13 <p>A是大写字母排序</p>
14 
15 <ol type="a">
16     <li>Devil May Cry</li>
17     <li>Devil May Cry</li>
18     <li>Devil May Cry</li>
19 </ol>
20 <p>a是小写字母排序</p>
21 
22 <ol type="i">
23     <li>Devil May Cry</li>
24     <li>Devil May Cry</li>
25     <li>Devil May Cry</li>
26 </ol>
27 <p>i是小写罗马排序</p>
28 
29 <ol type="I">
30     <li>Devil May Cry</li>
31     <li>Devil May Cry</li>
32     <li>Devil May Cry</li>
33 </ol>
34 <p>I是大写罗马排序</p>
35 
36 <p>以上5个是有序排序的类型</p>
37 <p>有序就是在显示的时候前面的标识是有顺序的，有序是ol，更改的是type里面的类型，无序是显示的时候前面是没有顺序的全是实心圆这样，是用ul排序的，也是type改类型</p>
有序列表

 

对应的效果图片

 

 

标题列表

 1 <dl>dl1
 2     <dt>dt1
 3         <dd>dd1</dd>
 4         <dd>dd1</dd>
 5         <dd>dd1</dd>
 6     </dt>
 7     <dt>dt2
 8         <dd>dd2</dd>
 9         <dd>dd2</dd>
10         <dd>dd2</dd>
11     </dt>
12     <dt>dt3
13         <dd>dd3</dd>
14         <dd>dd3</dd>
15         <dd>dd3</dd>
16     </dt>
17 </dl>
18 <dl>dl2
19     <dt>dt1
20         <dd>dd1</dd>
21         <dd>dd1</dd>
22         <dd>dd1</dd>
23     </dt>
24     <dt>dt2
25         <dd>dd2</dd>
26         <dd>dd2</dd>
27         <dd>dd2</dd>
28     </dt>
29     <dt>dt3
30         <dd>dd3</dd>
31         <dd>dd3</dd>
32         <dd>dd3</dd>
33     </dt>
34 </dl>
35 <p>dl最外面是标题列表，dt是一个标题，dd是内容</p>
标题列表

 

 

对应的效果图片

 

 

 表单

 1 <table border="1" cellpadding="5" cellspacing="5" >
 2     <thead>
 3         <tr>
 4             <th>姓名</th>
 5             <th>性别</th>
 6             <th>级别</th>
 7         </tr>
 8     </thead>
 9     <tbody>
10         <tr>
11             <td>Virgil</td>
12             <td rowspan="2">man</td>
13             <td rowspan="2">god</td>
14         </tr>
15         <tr>
16             <td>Dante</td>
17         </tr>
18         <tr>
19             <td>Trish</td>
20             <td rowspan="2">woman</td>
21             <td>Demon Hunter</td>
22         </tr>
23         <tr>
24             <td>Lady</td>
25             <td>Human</td>
26         </tr>
27     </tbody>
28 </table>
29 <p>rowspan是列，colspan是行，需要注意的是引号里面的数字是所占用的行数或列数</p>
表单

 

对应的效果图

 

 总结知识点（大白话）:

 

什么是前端

　　任何跟用户直接交互的界面都可以称之为前端

 

web本质

　　浏览器输入网址，朝服务器发送请求

　　服务器接收请求

　　服务器返回响应的请求

　　浏览器接收响应解析渲染展示到屏幕上

 

http协议

　　超文本传输协议，规定了信息基于网络传输的发送以及接收格式

 

http状态码

　　10X　　　　服务器已经接受了你的请求，正在处理，你可以继续提交数据

　　20X　　　　请求成功

　　30X　　　　内部重定向

　　40X　　　　请求错误

　　50X　　　　服务器错误

 

html

　　超文本标记语言，规定了前端页面的书写标准

 

html注释

　　单行注释

　　　　<!--这里写注释-->

　　多行注释

　　　　<!--

　　　　这就是多行注释

　　　　-->

 

html文档结构

　　<!DOCTYPE html>

　　<html>

　　　　<head></head>

　　　　<body></body>

 　　</html>

 

　　head内常用标签

　　　　title　　　　定义网页标题

　　　　link　　　　引入外部css文件

　　　　script　　　在该标签内部直接写js代码，也可以引入外部js文件

　　　　style　　　内部写css样式语句

　　　　meta　　　name = 'keywords' content = '............'

 

body常用标签

基本标签
　　h1~h6
　　p
　　a
　　img
　　b,u,i,s
　　br
　　hr
特殊符号
　　&nbsp
　　&gt
　　&lt
　　&reg
　　&amp
　　&copy
　　&yen
常用标签
　　div用于页面布局
　　span普通小文本
　　a标签：链接标签，锚点，可以通过target控制是否是当前页面跳转
　　img标签：
　　　　src:图片地址
　　　　alt:图片未加载完成显示信息
　　　　title:鼠标悬停时显示的文本

　　　　width:只要调整一个，另一个自动按比例缩放
　　　　height:
列表标签
　　无序列表
　　　　ul>li
　　　　　　type,disc,none,square,circle
　　有序列表
　　　　<ol type = "i">
　　　　　　<li>aaa</li>
　　　　　　<li>bbb</li>
　　　　　　<li>ccc</li>
　　　　</ol>
　　标题列表

　　　　　<dl>
　　　　　　　<dt>标题1</dt>
　　　　　　　　　<dd>内容1</dd>
　　　　　　　　　<dd>内容2</dd>
　　　　　　　　　<dd>内容3</dd>
　　　　　　　<dt>标题2</dt>
　　　　　　　　　<dd>内容1</dd>
　　　　　　　　　<dd>内容1</dd>
　　　　　　　　　<dd>内容1</dd>
　　　　　　　<dt>标题3</dt>
　　　　　　　　　<dd>内容1</dd>
　　　　　　　　　<dd>内容1</dd>
　　　　　　　　　<dd>内容1</dd>
　　　　　</dl>

　　表格标签

　　　　<table>

　　　　　　<thead></thead>

　　　　　　<tbody></tbody>

　　　　</table>

　　　　table内 tr标签标示一行，tr里面可以放td,thead

 

　　form表单

　　　　功能：前后数据交互，帮你提交任意的数据

　　input通过控制type属性来展示不同的获取用户输入的页面效果

　　　　type属性总结：

　　　　　　text：纯文本

　　　　　　password：日期 比如：用户输入不可见

　　　　　　date：日期　比如：获取用户生日

　　　　　　radio：单选 比如：获取用户性别

　　　　　　checkbox：多选 比如获取用户爱好

　　　　　　file：文件 获取用户上传文件

 

　　　　　　submit：提交　　　　注意：form表单中只有input的type属性是submit才能支持提交

　　　　　　reset：重置

　　　　　　button：按钮

 

　　select：下拉框，默认是单选，可以通过multiple属性指定为多选

　　textarea：大段文本

 

　　label标签

　　　　本身没有任何实际意义，主要是配合input标签

　　　　<label for = "">username:

　　　　　　<input type = "text">

　　　　</label>

　　　　<label for = "i1">username:

　　　　　　<input type = "text" id = "i1">

　　　　</label>

 

标签分类1

　　块儿级标签（独占一行）h1~h6,p,h,hr,br

　　　　1.块儿级标签，可以嵌套其他块儿级标签和行内标签

　　　　2.p标签虽然也是块儿级标签，但是它不能嵌套任何块儿级标签，只能嵌套行内标签

　　行内标签（自身文本多大就占多大）span,b,u,i,s,a,img

　　　　1.行内标签肯定不能嵌套块儿级标签，只能嵌套行内标签

　　　　2.行内标签，无法设置长宽

标签分类2

　　双标签<h1></h1>

　　自闭和标签<img/>

 

URL:网址（uniform resource locator）

　　专业一点：统一资源定位符

　　url的组成：

　　　　https://www.baidu.com

 

form表单中

　　action属性，控制数据往哪提交，不写默认就发送当前url地址

　　method属性，控制数据提交的方式，默认是get请求，可以通过method该属性指定其他提交

　　提交数据的input必须要有name参数

　　input框中value属性就是对应的值

 

　　如果要提交文件数据

　　　　1.修改提交数据编码格式enctype

　　　　2.提交方式必须是post

 

posted @ 2019-04-01 21:16  -Rye-  阅读(237)  评论(0)    收藏  举报