HTML第二帖

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.行内元素

填充，装饰

特性：

1. 多个行内元素共享一行空间
2. 默认宽高：都由内容决定
3. 不可以指定宽高
4. 行内元素中不可以嵌套块元素

元素：

1. span 无意义的行内元素
2. a 超级链接（默认事件）open link
   -> herf=“”跳转的路径/锚点（当前页面的跳转->回到顶端）
   ->锚点
   url -> http://ip:port/path
   相对路径 -> ./1-box.html
   绝对路径 -> d://briup/2htmlcss/day02/1-box.html
   mailto 打开邮箱系统。。。
   邮箱账户和密码 邮箱客户端 团队 QQ邮箱
3. img 图片
   src ->与a标签中href属性类似
   url->相对路径，绝对路径，地图（自行拓展）
   alt -> 图片找不到时的文本替换
4. 装饰类型的行内元素（逐步淘汰）：
   strong（加粗），b（加粗），em（斜体），i（斜体），del（删除线），ins（下划线）,sub/sup（下标/上标）。。。。

3.元素使用策略

总体策略：先使用块元素搭建页面框架，再使用行内元素填充页面。
列表性质用：ul，ol，dl
标题性质用：h1~h3
段落： p
不知道用什么的时候使用div

4.功能性标签

表格（展示数据列表）

1. table ->属性：width border cellspacing cellspading
2. caption 标题
3. thead 表头 -> 属性：align
   tr（行）、td/th（加粗，居中）
4. tbody 表体
   tr（行）
   td（列）-> 属性：rowspan，colspan
5. tfoot 表底

注意：

表格中每一行的列在计算后列数应该相等

5.表单（获取用户输入）

注意：

1.所有的表单元素(input),都必须添加name属性
2. 不可输入但是可以选择的表单元素，一定要添加value值；可输入的表单元素的value为用户输入的值

<form action="http://192.168.0.100:8080/sms/register.action" type="" enctype="">
</form>

form的属性：

1. action 后台接口地址

2. type http协议请求方式

3. get 参数拼接在浏览器的地址栏 url?k=v&k=v

   请求报文格式：

   GET /sms/register.action?name=terry&password=123
   Content-size:12
   user-agent:mac safari

4. 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="注册">

总结

1. 无意义的标签
   块元素：div
   行内元素：span

2. img标签
   src：图片的地址
   alt：如果图片没有加载出来所提示的文字
   width：图片的宽
   height:图片的高

3. 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">

4. 一级标签： 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>