1.块元素
搭建页面框架 box
特性:
独占一行空间
默认宽:父元素的100%,默认高:由子元素或内容决定
可以指定宽高
各块元素默认的属性
div 无意义的块元素
h1~h3 标题
->margin, font-size,font-weight
p 段落
-> margin
ul/li 无序列表
-> margin,padding,list-style
ol/li 有序列表
-> margin,padding,list-style
dl/dt/dd 表格
->dl/dd ->margin
html
body主体
-> margin
h5新增的语义化标签(样式与div类似)
header <div class="header"> </div>
nav <div class="nav"> </div>
footer <div class="footer"> </div>
address
article <article class="container"> </article>
section
aside
2.行内元素
填充,装饰
特性:
- 多个行内元素共享一行空间
- 默认宽高:都由内容决定
- 不可以指定宽高
- 行内元素中不可以嵌套块元素
元素:
- span 无意义的行内元素
- a 超级链接(默认事件)open link
-> herf=“”跳转的路径/锚点(当前页面的跳转->回到顶端)
->锚点
url -> http://ip:port/path
相对路径 -> ./1-box.html
绝对路径 -> d://briup/2htmlcss/day02/1-box.html
mailto 打开邮箱系统。。。
邮箱账户和密码 邮箱客户端 团队 QQ邮箱 - img 图片
src ->与a标签中href属性类似
url->相对路径,绝对路径,地图(自行拓展)
alt -> 图片找不到时的文本替换 - 装饰类型的行内元素(逐步淘汰):
strong(加粗),b(加粗),em(斜体),i(斜体),del(删除线),ins(下划线),sub/sup(下标/上标)。。。。
3.元素使用策略
总体策略:先使用块元素搭建页面框架,再使用行内元素填充页面。
列表性质用:ul,ol,dl
标题性质用:h1~h3
段落: p
不知道用什么的时候使用div
4.功能性标签
表格(展示数据列表)
- table ->属性:width border cellspacing cellspading
- caption 标题
- thead 表头 -> 属性:align
tr(行)、td/th(加粗,居中) - tbody 表体
tr(行)
td(列)-> 属性:rowspan,colspan - tfoot 表底
注意:
表格中每一行的列在计算后列数应该相等
5.表单(获取用户输入)
注意:
1.所有的表单元素(input),都必须添加name属性
2. 不可输入但是可以选择的表单元素,一定要添加value值;可输入的表单元素的value为用户输入的值
<form action="http://192.168.0.100:8080/sms/register.action" type="" enctype="">
</form>
form的属性:
-
action 后台接口地址
-
type http协议请求方式
-
get 参数拼接在浏览器的地址栏 url?k=v&k=v
请求报文格式:
GET /sms/register.action?name=terry&password=123
Content-size:12
user-agent:mac safari -
post 参数放到请求报文请求体中进行传递
请求报文格式:GET /sms/register.action?name=terry&password=123 Content-size:12 user-agent:mac safari name=terry&password=123 <input type="text" name="name">
name terry
password 123321 ---------传递后台【约定,协议】------>
查询字符串:
浏览器自动
1)username=terry&passwd=123321&gender=1&status=1
通过js编程
2)json
‘{“use rname”:“terry”, “password”:123321}’
3) xml
<data>
<username>terry</username>
<passwd>123321</passwd>
</data>
几种常见的表单应用
<!--单行文本框-->
用户名<input type="text" name="username"> <br>
<!--密码框-- >
密码 <input type=" password" name=" password"> <br>
<!--单选按钮组-->
性别
<label>
<input type=" radio" name="gender" value="male"> 男
</label>
<label>
< input type=" radio" name="gender" value=" female"> 女
</label><br>
<!--附件按钮-->
头像<input type="file" name="file"> <br>
<!--复选按钮-->
爱好
<label>
< input type=" checkbox" value="basketball" name="hobby">篮球
</label>
<label>
<input type=" checkbox" value="football" name="hobby">足球
</label>
<label>
<input type=" checkbox" value="read" name="hobby">阅读
</label>
<!--注册按钮-->
<input type="submit" value="注册">
总结
-
无意义的标签
块元素:div
行内元素:span -
img标签
src:图片的地址
alt:如果图片没有加载出来所提示的文字
width:图片的宽
height:图片的高 -
a标签
(1) .href的路径
a.url:http://…
b.绝对路径:/…
c.相对路径:…/./…
(2) .锚点
a.<a href = '#test'><a> <p id = 'test'></p>
b.另一页面中
<a href="2.html#test"</a>
c.打开邮箱
<a href="mailto:chengyl@briup.com">
- 一级标签: body
二级标签: div
三级标签: p
一般行内元素里不使用块级元素
5. 列表
(1)有序列表(存在外边距和内边距)
<ol>
<li></li>
<li></li>
<li></li>
</ol>
reversed 项目符号倒序排列(布尔属性)
(2)无序列表(存在外边距和内边距)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
type:circle 空心圆
type:square 方形
(3)自定义列表
<dl>
<dt></dt>标题
<dd></dd>
</dl>
6.空元素/单标签
<hr />分割线
<br />换行
7.核心属性
class=“header”
class=“Header”
id 唯一,不能重复
class(html不区分大小写,不用驼峰命名,用-)
style
title
8.实体
空格
<
小于号<
>
大于号>
©
版权号©
×
删除(叉)`×
9.<pre></pre>