关于前端:HTML和CSS的第二天

HTML 标签, 表格和表单

一. 通用属性
id: 给标签取一个惟一名称
class: 给标签取一个类名
title: 鼠标挪动到标签，呈现的提醒幸喜
style: 设置行内款式

二. 自定义标签 (用于传值和图片懒加载
格局：data-*

<img data-src="图片名" alt="提醒文本"/>
<p data-id="test1">...</p>

三. 表格

1. 创建表格

table>tr*2>td{内容 $}*3=
<table>
    <tr>
       <th> 学号 </th>(th 为表头，对下列内容起阐明作用，会主动加粗和居中显示）<th> 姓名 </th>
       <th> 地址 </th>
    </tr>
    <tr>
       <td>007</td>
       <td> 张三 </td>
       <td> 北京 </td>
    </tr>
</table>

成果：

2. 表格属性
border: 设置表格边框（px)
width：设置表格宽度（px)
align：设置表格对齐(left(默认），right,center)
cellpadding：设置单元格间距
cellspacing: 设置像素间隙

3. 跨行与跨列
跨行：

<table>
    <tr>
       <td rowspan="2"> 内容区 01</td>
       <td> 内容区 02</td>
       <td> 内容区 03</td>
    </tr>
    <tr>
       <td> 内容区 02</td>
       <td> 内容区 03</td>
    </tr>
    <tr>
       <td> 内容区 01</td>
       <td> 内容区 02</td>
       <td> 内容区 03</td>
    </tr>
</table>

成果：

跨列：

<table>
    <tr>
       <td rowspan="2"> 内容区 01</td>
       <td colspan="2"> 内容区 02</td>
    </tr>
    <tr>
       <td> 内容区 02</td>
       <td> 内容区 03</td>
    </tr>
    <tr>
       <td colspan="3"> 内容区 01</td>
    </tr>
</table>

成果：

4. 表格组成
caption(题目）,thead（表头）,tbody(表体),tfoot(表尾）

table[border=1 width=600 align=center]>(caption{学生信息表})+(thead>tr>th*4)+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=1])=
<table border="1" width="600" align="center">
        <caption> 学生信息表 </caption>
        <thead>
            <tr>
                <th> 学号 </th>
                <th> 姓名 </th>
                <th> 家庭地址 </th>
                <th> 备注 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>Tom*</td>
                <td>aaaaaaaaaa</td>
                <td> 该生为“三好学生”</td>
            </tr>
            <tr>
                <td>002</td>
                <td>Mickle</td>
                <td>bbbbbbbbb</td>
                <td></td>
            </tr>
            <tr>
                <td>003</td>
                <td>Mary</td>
                <td>cccccccc</td>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="1"> 附注：* 为优秀学生。</td>
            </tr>
        </tfoot>
    </table>

成果：

5. 表单及表单标签
表单：用于提交用户输出的数据

表单标签
name：表单名称
action：表单数据提交的中央（通常为后盾文件名（.jsp/.php/.asp/.aspx/.py)，或网址，# 代表提交到以后文件下）
method：前端提交数据到后端的办法（次要是 get 或 post（都是提交数据，但 post 更平安以及提交的数据量更大）, 默认为 get, 但尽量应用 post 形式提交)

<form name="..." action="..."  method="get">
...
</form>

6. 表单元素
1）input 类：用来输出或收回指令
type:text/password/radio/checkbox/file/button/image/submit/reset

·text:”type=text” 可不写，默认值
属性：placeholder(提醒）,name(命名）,minlength 和 maxlength(起码 / 多输出的字符）,disabled(生效）,readonly(只读),value(默认值）,pattern(正则表达式）

·password: 明码框，属性同 text

·radio: 单选钮，通常两项以上，属性：name(必须有）,value,checked,disabled,readonly

<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女

·checkbox: 复选框，抉择 0 项，1 项，多项，属性：name(必须有),value,checked,disabled,readonly

·file: 文件上传按钮

·button: 一般按钮，通常用来调用脚本代码，属性：value(按钮题目）,disabled

·image: 图片按钮，同 button(src 代替 value)

·submit: 提交按钮，将数据提交到后盾

·reset：重置按钮，将所有组件的内容清空

2）textarea 类：文本域，用于输出大批量内容
属性：name,id,cols(列数）,rows（行数），placeholder,minlength,maxlength，required(必须输出）

3）select 类: 下拉列表框，默认单选，属性：multiple（可多选），size(最多显示行数）

<select id="course" >
        <option value="语文"> 语文 </option>
        <option value="数学"> 数学 </option>
        <option value="计算机"> 计算机 </option>
        <option value="其余"> 其余 </option>
</select>

成果：

<select id="course" multiple>
        <option value="语文"> 语文 </option>
        <option value="数学"> 数学 </option>
        <option value="计算机"> 计算机 </option>
        <option value="其余"> 其余 </option>
</select>

成果：

4）button 类：一般按钮，具备提交的作用。可独自应用，不写在 form 中；写在 form 中，有提交性能
独自应用：

<button id="bth01"> 确认 </button>（这里 button 用于调用 js 代码)

7.iframe 框架集
理论开发中，不倡议应用