HTML5标签

html内容

一.列表

1. 无序列表

   <!-- type属性值:dist, h5已经弃用属性-->
   <ul type="序号类型">
       <li></li>
       <li></li>
   </ul>
   

2. 有序列表

   <!-- type属性值:1(默认),a,A,i-->
   <ol type="序号类型" start='起始值'>
       <li></li>
       <li></li>
   </ol>
   

3. 嵌套列表

二.表格

<table width="400px" height="250px" border="1" align="center">
        <!-- caption标签表格标题 -->
        <caption>员工信息表</caption>
        <thead class="top">
            <tr>
                <!-- th标签>表格头部内容,默认居中和加黑 -->
                <th id="num">编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>电话</th>
            </tr>
        </thead>
<!-- tbody身体表格内容 -->
        <tbody>
            <tr>
                <td>0001</td>
                <td>0001</td>
                <td>0001</td>
                <td>0001</td>
            </tr>
        </tbody>
    </table>

table属性:

1. border:表格边框
2. align: 对齐方式

td属性:

1. rowspan:跨行合并(属性值–number)
2. colspan: 跨列合并

三.表单

1.input控件

<!-- 表单内容被包含在form标签中 -->
<form action="跳转路径" method="请求方式">
	<input type="属性值" name="" id="" value="">
</form>

from属性:

1. action: 跳转路径
2. method:跳转方式
   • get
   • post
   • delete

type属性值:

• text: 输入文本

• password: 密码框

• radio–单选框

• checkbox—复选框,可多选

• number—数字

• date—日期

• image—图片

• submit—注册

• button—按钮

  button属性与button的不同:

  1. button会提交表单内容

• reset—重置

• hidden—隐藏表单域,隐藏id

name属性值:

1. 对应相应value的属性值
2. 复选框/单选框的多个name值相同

举例:
<input type="checkbox" name="hobby" value="bsk" id="">篮球
<!-- 地址栏hobby=bsk-->

2.下拉菜单select

<!-- 
            下拉菜单:
                1.selectde的name属性值接受对应选项option的value属性值
                2.select选项设置默认值使用selected属性值,区别于checked
-->
<select name="city" id="">
            <option value="1">南京</option>
            <option value="2" selected>上海</option>
            <option value="3">成都</option>
</select>

3.文本区域textarea

<textarea name="" rows="5" cols="30" id=""></textarea

属性:

1. rows—文本区域行数(属性值: number)
2. cols—列数

4.标注label

<label for="标注内容的id值">内容</label>

举例:
<!-- for属性值===控件的id属性值 -->
<input type="radio" name="sex" id="msex" value="m" checked><label for="msex">男</label>

CSS内容

一.定义:

层叠样式表,一种修饰html文件里元素的计算机语言;

<!--引用方式-->
<style>
  选择器{
    属性:属性值;
  }
</style>

二.选择器类型

1. 标签选择器: p,a,img…

2. 类选择器:

   <!--.top就是类选择器-->
   <thead class="top"></thead>
   

3. id选择器:

   <!--#top就是id选择器-->
   <thead id="top"></thead>
   

三.字体属性

font-style:指定文本字体样式(值:normal,italic)
font-variant:指定文本是否为小型的大写字母
font-weight:指定文本字体的粗细(值:normal(400),bold,bolder(700).light,lighter)
font-size:指定文本字体尺寸
line-height:指定文本字体的行高
font-family:字体类型
color:字体颜色
 1.单词颜色表示
 2.rgb(num1,num2,num3)
 3.十六进制表示---例子:#0000ff

四.文本样式

/* 字母间隔 */
letter-spacing: 3px;
/* 单词间隔 */
 word-spacing: 5px;
/* 行高 */
line-height:num;
/*去除文本下划线*/
 text-decoration: none;

五.文本对齐方式

text-align:left|center|right;