Html&Css 基础总结（基础好了才是最能打的）二

Html&Css 基础学习回顾总结

two day~

---

---

前言

这是作者的第二天总结篇章， 有需要的小伙伴可以 在这里 找到第一篇文章
视频在这里~ @B站黑马程序员视频

视频共15天，作者会以天为粒度，来分散到不同文章中，有兴趣的小伙伴可以关注一下，谢谢你
书中错误在所难免，如果有小伙伴发现的话恳请斧正，在此先谢过咯~

---

基本标签

列表就如同字面意思所讲，将内容按照顺序排列，或横向或纵向；
列表标签大致三分类， 分为有序、无序、自定义列表

无序列表标签

在无序列表中， 标签是ul&li的配合，其中ul是无序列表， li是列表条目；

<ul>
<li> 我是item</li>
<li>我是item</li>
</ul>

有序列表标签

有序列表相对于无序列表是在列表条目的开始多了一个1，2，3这样的顺序说明
有序列表是，标签是ol配合li， ol是有序列表， li同样是列表条目；

<ol>
<li> 我是item</li>
<li>我是item</li>
</ol>

tips:有序列表ol跟无序列表ul， 只能包含li， 但是li可以包含任何内容；

定义列表标签

标签是dl， 嵌套dt和dd， dt是定义列表的标题， dd是定义列表的描述详情，
简单理解就是dl是最外面的， dt就是表头， dd是body；
其中，dt和dd可以包含任何内容，但是dl只能包含dt和dd；

<dl>
<dt> 我是item表头</dt>
<dd> 我是item</dd>
<dt> 我是item表头</dt>
<dd> 我是item</dd>
</dl>

表格标签

顾名思义， 表格就是跟我们平常用的excel表格是一致的，展示数据；
标签名称是 table， table嵌套 tr（t-row） tr嵌套th（t-head）和td（t-body）
在一般使用中， 第一行是th表头， 然后再来个tr， 就可以写具体数据了，

<table> 
	<tr>
		<th>我是表头</th>
		<td>我是表内容</td>
		<th>我是表头</th>
		<td>我是表内容</td>
	</tr>
</table>

一般配合js使用for循环展示，

tips： 表格中默认没有边框线， 但是在table中使用 border 属性可以为表格添加边框线

表格结构标签

目的是让 让表格结构更清晰， 语义更清晰 ， 是在刚才的代码中增加对应的包含关系，例如：

<table> 
	<tr>
		<thead>
			<th>我是标题1</th>
			<th>我是标题2</th>
			<th>我是表题3</th>
		</thead>
		<tbody>
			<td>我是表内容</td>
			<td>我是表内容</td>
		</tbody>
		<tfoot >
			<td>我是表内容</td>
			<td>我是表底部</td>
		</tfoot >
	</tr>
</table>

thead\body\foot 存在的意义是让代码分层阅读更清晰
thead\body\foot 存在的意思是让代码分层阅读更清晰，但是我觉得一般- -， 不过也是个知识点

合并单元格

将多个单元格合并成一个单元格，用以合并多个同类信息  

跨行合并& 跨列合并
单元格的合并是否不重要？
跨行合并，保留最上单元格， 属性rowspan 
跨列合并，保留最左的单元格， 属性colspan 
属性添加到对应的td中， 取值是数字，表示需要合并的单元格数量； 
不可以跨结构标签合并； 

表单

表单的主要作用是用于收集用户信息 ；

  <form>
	...
  </form>

input 标签

顾名思义又来啦， 其实input标签就是让用户输入的~
but
不同的属性值展示不同的形式，

<input> 是单标签，其中type属性指定了不同的形式
<input type="text...">
其属性值有：
        text 输入文本；
        password 密码框；
        radio 单选框；
        checkbox 多选框；
        file 上传文件； 

占位文本属性： plpachholder  相当于android的textview中的hint~ 

单选框（radio）

    <input type= "radio" name="xingbie">
    <input type= "radio" name="xingbie">

其中有个name属性， 同名的就是默认name是同一个组，也就可以让radio 造成单选的样子，
同组只能选中一个（单选）

还有个属性checked，默认选中， 属性名和属性值一样，可以简写；

    <input type= "radio" name="xingbie" checked="checked">
    <input type= "radio" name="xingbie">

file 上传文件

         <input type= "file" >

文件默认一次性只能上传一个文件， 使用属性 multipe 可以上传多个文件
例如： multipe 属性值和属性名都一样，所以可以简写
上传多个文件使用multipe ~

     <input type= "file" multipe>

checkbox 多选框， 有个属性是checked 表示默认选中 

Select 下拉菜单标签

简单理解： 标签 Select 嵌套option， select 是下拉菜单整体， Option 是每一项；

示例：

    <select>
        <option>北京 </option>
        <option>上海</option>
        <option>深圳 </option>
        <option>我家 </option>
        <option>你家 </option>
    </select>
	<select>
	
		<option selected >你家</option>
		<option >我家</option>
	</select>

其中 option 带有属性 selected 选择，可以让select 默认选中某一项，例如

    <option selected >北京 </option>

文本域标签

相对input text的形式，他将有多行输入文本的表单控件

标签名称：textarea 

<textarea> 我是文本域</textarea>

label 标签

经验： 用label 标签绑定文字和控件表单的关系， 增大表单控件的点击范围
用label标签绑定文字和空间的表单关系， 可以增加表单控件的点击范围， 首先输入框的id要树立一个值，
然后label 中的for字段，等于该id， 那么就可以点击到了

label 标签，增大点击范围：
方法1：
    <input type="radio" id="man">
    <label for="man">男</label>

    input type的id跟label for的id挂钩，使之点击关联； 

同样也可以直接包裹住， 使用label 标签包裹input标签，不需要属性即可生效；
方法2：
使用label 标签包裹input标签，不需要属性，即可生效

      <label > <input type="radio"></label>

支持使用label 标签增大点击范围的表单控件有：
    1.文本框， input text
    2.密码框；
    3.上传文件；
    4.单选框；
    5.多选框；
    6.下拉菜单；
    7.文本域；
        提升用户体验； 

按钮标签

比较常见的控件啦， button， 双标签，

 <button type=">我是按钮</button>

type属性值： 
    submit。提交，点击后提交数据到后台（默认）
    reset 重置， 恢复各项数据；
    button， 普通按钮，没有默认功能， 一般配合js使用
 reset重置时，需要外部包括form才可以进行表单数据的清除；

无语义的布局标签

作用： 布局网页（划分网页区域， 摆放内容）
div & span 
div 换行， span不换行，
两者都是双标签， 包裹内容； 
div被叫做大盒子
span被叫做小盒子

div换行，span不换行哦， 先暂时记住这个就ok啦，后续会针对dev细讲~

字符实体

在网页中显示预留字符；
&lt； 是小于号 <
&gt； 是大于号 >
&nsp； 空格 ~   你要展示多个空格的话， 直接回车浏览器是不认识的，所以要使用    &nsp； 

结束

今天的学习也到此为止了，希望大家都有所收获，再见