html+css笔记（待补充）随手记录

• CSS+HTML         

                                                           ps:仅供本人记忆

text-align:文本水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

!!!! 是让盒子里面的内容水平居中， 而不是让盒子居中对齐

 

 

color	颜色	我们通常用 十六进制 比如 而且是简写形式 #fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住 添加 下划线 underline 取消下划线 none

font-style 记住倾斜是 italic 不倾斜 是 normal

font-weight 记住加粗700 或者 bold 不加粗 是 normal 或者 400 注意数字不要跟单位

水平线标签hr  <hr/>

换行标签br  <br/>   都是单标签

div span 是没有语义的,

• div标签 用来布局的，但是现在一行只能放一个div
• span标签 用来布局的，一行上可以放好多个span

标签名	定义	说明
<hx></hx>	标题标签	作为标题使用，并且依据重要性递减
<p></p>	段落标签	可以把 HTML 文档分割为若干段落
<hr />	水平线标签	没啥可说的，就是一条线
<br />	换行标签
<div></div>	div标签	用来布局的，但是现在一行只能放一个div
<span></span>	span标签	用来布局的，一行上可以放好多个span

表格Table使用，主要用来显示数据

<table>

<caption>我是表格标题</caption>  //显示表格标题的元素必须紧跟table标签

  <tr>

    <td>单元格内的文字</td>

    ...

  </tr>

  ...

</table>

1. table用于定义一个表格标签。
2. tr标签 用于定义表格中的行，必须嵌套在 table标签中。
3. td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容

一般表格第一行或第一列要加粗居中，这时候可以用表头单元格<th></th>来做

 

 

难点合并单元格

• 跨行合并：rowspan="合并单元格的个数"
• 跨列合并：colspan="合并单元格的个数"

根据 先上 后下   先左  后右的原则找到目标单元格    然后写上 合并方式 还有 要合并的单元格数量  比如 ： <td colspan="3">   </td>

 

 

对于比较复杂的表格可以用thead,tbody,tfoot来标注， 这样更好的分清表格结构

1. <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！
2. <tbody></tbody>：用于定义表格的主体。放数据本体 。
3. <tfoot></tfoot>放表格的脚注之类。
4. 以上标签都是放到table标签中。

 

列表和表单

标签名	定义	说明
<ul></ul>	无序标签	里面只能包含li 没有顺序，布局中最常用的列表
<ol></ol>	有序标签	里面只能包含li 有顺序， 使用情况较少
<dl></dl>	自定义列表	里面有2个兄弟， dt 和 dd

<dl>

  <dt>名词1</dt>

  <dd>名词1解释1</dd>

  <dd>名词1解释2</dd>

  ...

  <dt>名词2</dt>

  <dd>名词2解释1</dd>

  <dd>名词2解释2</dd>

  ...

</dl>

 

 

表单

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了

label 标签为 input 元素定义标注（标签）

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

或者

<label for="sex">男</label>

<input type="radio" name="sex"  id="sex">

 

textarea控件(文本域) 和 select下拉列表

<textarea >

  文本内容

</textarea>  显示多行文本

 

<select>

  <option>选项1</option>

  <option>选项2</option>

  <option>选项3</option>

  ...

</select>

1. <select> 中至少包含一对 option
2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

Form表单域

<form action="url地址" method="提交方式" name="表单名称">

  各种表单控件

</form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。