前端学习第二天

一、标签

1.有序标签

<ol> <li> </li> <ol>

属性type选项有其他种类的序列表达； 

标签可嵌套：

 2.无序列表

 <ul> <li> </li> <ul>

属性type选项有其他种类的序列表达：disc、circle、square、none； 

便捷方式：ul>li*2

3.表格 

表格：<table>

行：<tr>

单元格： <td>

快捷方式：table>tr*3>td{单元格文本信息}

属性border：添加边线；

表格单元格合并：

水平合并：colspan

垂直合并：rowspan

4.Form表单

用于填写用户信息，使网页有交互功能；

表单是由容器和控件组成

<form action="url"  method="get | post" name="myform"></form>

属性说明：

action：服务器地址

name：表单名称

method中get和post区别

1.数据提交方式，get把提交的数据url可以看到，post看不到

2.get一般用于提交少量数据，post用来提交大量数据 

表单元素

<form>
    <input type="text">
    <input type="submit">
</form>

文本框

文本域通过 <input type="text">标签来设定，当用户要在表单中填入内容时，会用到文本域；

<form>
    First name:<input type="text" name="firstname">
    Last name:<input type="text" name="lastname">
</form>

 密码框

 密码框通过<input type="password">

 提交按钮

提交按钮标签<input type="submit" value="替换文本">

二、块元素和行内元素（内联元素）

内联元素和块级元素的区别

块级元素	内联元素
块元素会在页面中独占一行（自上而下垂直排列）	行内元素不会独占页面中的一行，只占自身的大小
可以设置width，height属性	行内元素设置width，height属性无效
一般块级元素可以包含行内元素和其他块级元素	一般行内元素包含行内元素，不包含块级元素
常用元素：div、form、h1～h6、hr、p、table、ul	常用元素：a、b、em、i、span、strong

 行内块级元素（特点：不换行、能够识别宽高）

button、img、input等

 三、HTML5新增标签

在HTML5出现之前，一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取，所以增加了新的语义化标签来解决问题。

之前的页面布局

<div id="header"></div>
<div id="nav"></div>
<div id="article">
    <div id="section"></div>
</div>
<div id="silder"></div>
<div id="footer"></div>

新增标签后的布局

<header></header>
<nav></nav>
<article>
    <section></section>
</article>
<aside></aside>
<footer></footer>

H5新标签

header 头部

nav 导航

section 定义文档中的节，比如章节、页眉、页脚

aside 侧边栏

footer 脚部

article 代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子，一篇博客等