Html&CSS学习笔记2

最新推荐文章于 2024-10-12 22:37:25 发布

冰河星雨

最新推荐文章于 2024-10-12 22:37:25 发布

阅读量175

点赞数

分类专栏：前端文章标签： html5 html

本文链接：https://blog.csdn.net/baidu_26786335/article/details/107675955

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

table标签

标题
编号	姓名	地址
1
1	张三张三	北京
1	张三	北京

<table border="10" cellspacing="10" cellpadding="10" align="center" width="100%">
        <thead>
            <tr>
                <th>编号</th>
                <th width="100px">姓名</th>
                <th width="50%">地址</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td align="right" colspan="3">1</td>
                <!--
                <td>2</td>
                <td>3</td>
                -->
            </tr>
            <tr>
                <td rowspan="2">1</td>
                <td>张三张三</td>
                <td>北京</td>
            </tr>
            <tr>
                <!--<td>1</td>-->
                <td>张三</td>
                <td>北京</td>
            </tr>
        </tbody>
        <caption>标题</caption>
        
    </table>

< table >在Html文档中代表表格，通过二维数据表表示数据。

块级元素	行内元素
table 表格	th 常用与表头
thead 表头	td 列
tbody 表体
caption 标题
tr 行

•align
表格应该如何在文档中对齐，可以取值：
left,center,right
•border
设定表格边框特性，取整数为值，单位为px
•cellpadding
设定内容与单元格之间的距离
•cellspacing
设定单元格与单元格之间的距离
•width
设定表格的宽度
•bgcolor
设定表格的背景色

注意：当学习完CSS就不要使用这些属性了

colspan跨列数
rowspan跨行数
width宽度，当宽度太窄以至于无法正确显示单元格内容时，在页面显示的时候会适当的调整

Form表单

什么是Form？

Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成，这些表单元素是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，时候表单元素时一般要配合label标签，用于描述其目的。其可用属性如下。
action 用于处理表单信息的应用程序的地址。
method 浏览器用来提交表单的HTTP方法。
get 对应于Http协议的GET方法，表单数据被附加在uri上，使用"?"分隔
post 对应于Http协议的POST方法，表单数据包含在HTTP协议的请求报文的体部。
name 设定表单的名称
target 表示浏览器接收到form的提交信息后在哪里显示回应。

HTTP：应用层的协议
响应的状态码http status 200 404 500
请求方式method:get post
GET:显示的，大小有限制（小）浏览器的地址栏、超链接，表单
POST:隐式的，大小有限制（大）表单

表单数据的内容类型

通过enctype属性设定表单数据的内容类型

application/x-www-form-urlencoded
在发送前编码所有字符（默认）使用到的编码方式：
1）控件的名称和值都被转义，空白字符使用【+】替换，保留的字符一般都是用
来实现特定的目的，例如（: / ? ; @ = & 等）。非数字和字母的字符使用%HH（这里
HH表示两个十六进制数字，代表该字符的ASCII码）进行转换，
2）控件的"名称/值"对按照它们在文档数据流中出现的顺序列出来。“名称”“值"使
用”="分割，两个"名称/值"之间使用&隔开。
multipart/form-data
不对字符编码。在使用包含【文件上传控件】的表单时，必须使用该值。数据分
成多个部分，每个部分代表一个结构良好的控件，作为文档数据流的一部分，每一
个部分都按照它们在文档数据流中出现的顺序依次发送到服务器端，并且，每一部
分的边界不会出现在数据中。每一部分有一个content-desposition标题头，它的值的
格式是： Content-Disposition:form-data;name=“myControl”
text/plain
空格转换为 “+” 加号，但不对特殊字符编码。

请求报文：
请求行： method url HTTP/1.1
请求头：客户端和服务端约定的系统属性、自定义的属性、令牌
请求体：

GET请求报文：
GET http://ww.baidu.com/baidu/index.html?wd=12&k1=v1 HTTP/1.1\r\n
Host:http://ww.baidu.com\r\n
User-agent:safri…\r\n
Connection:keep-alive\r\n
\r\n
Null

POST请求报文：
POST http://www.baidu.com/baidu/index.html HTTP/1.1\r\n
Host:http://ww.baidu.com\r\n
User-agent:safri…\r\n
Connection:keep-alive\r\n
\r\n
Wd=123&k1=v1&k2=v2

响应报文：
响应行：HTTP/1.1 200 OK\r\n
响应头：
Content-Type:text/html;charset=utf-8\r\n
Content-Length:大小\r\n
…\r\n
\r\n
响应体：0101010101

块级元素：form
行内元素：input
value:选项的时候会写value
用户填写好数据时，不会写value
默认值的时候可以写value
placeholder-html5的属性：提示

<form action="login.jsp" method="get"
      enctype="application/x-www-form-urlencoded">
        信息的录入
        单行文本框：<input type="text" name="username" value="李四"/><br>
        密码框：<input type="password" name="pwd"><br>
        随意：<input type="text" placeholder="汉字"/><br>
       <!-- <button>普通按钮</button>-->
        提交按钮：<input type="submit" value="登录" />
        重置按钮：<input type="reset" value="清空" />
    </form>

Input表单组件

type组件其可用属性如下

type	用于设定组件类型
text	单行文本框
password	密码框，输入的内容将会被遮挡。
lcheckbox	复选框，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中。
lradio	单选按钮必须使用value属性来描述该组件所提交的值，使用checked属性默认选中。一个单选按钮组中所有组件都应该具有相同的name值，这样，每次只能选中按钮组中的某一个组件
submit	提交按钮
reset	重置按钮
file	文件按钮，该组件用于选中文件系统中的某个文件
hidden	隐藏域，该组件不显示在页面中，但是其值会被提交。
image	图像按钮，必须使用src来加载图片，使用alt来声明替换文本。
button	普通按钮

Input组件内其他属性如下


name	用于设定组件类型
value	用于设定初始化，可选。
checked	单选框，复选框默认选中属性
disabled	表示禁用组件，禁用组件的值也不能被提交
size	当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text, password，这时宽度是整数值，表示字符的数目，默认为20
maxlength	指定可以输入的字符的最大值。适用于控件类型为text,password。

button表单组件按钮控件内属性


type	指定控件类型值：button，submit，reset
name	按钮名称。
value	按钮所关联的值，会与name的值一同被提交

label表单组件

label 用于表示某一表单组件的标题
for 与为设定标题的表单组件的ID值一致

select表单组件

select用于表示下拉列表或列表，其可用属性如下


multiple	指定控件类型布尔类型的值，表示是否允许多选，如果select元素不包含属性size和属性multiple时，表单类型显示为菜单（组合框），如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框。
size	显示的行数当要表示一个可以滚动的列表时候，size表示同时展示的行数。默认值为0。表示非列表显示
disabled	表示禁用组件，禁用组件的值也不能被提交
name	用于指定该组件的名字，会与其option子元素的value值组成键值对随其他表单数据一齐被提交

option表单组件


option	用于表示选项，常包含在 < select >, < optgroup>中
disabled	表示禁用组件，禁用组件的值也不能被提交
value	定义控件的初始值。提交表单时，初始值会被提交给服务器。
selected	表示该选项默认被选中

optgroup表单组件


optgroup	用于表示包含option的选项组，常包含在 < select >中
disabled	表示禁用组件，禁用组件的值也不能被提交
label	表示选项组的名称
selected	表示该选项默认被选中

textarea文本框

textarea用于表示多行文本框，没有value属性，其值被包含在标签内


rows	定义文本框的行数
cols	定义文本框的列数
warp	表示是否自动换行 • off 不自动换行 • hard自动硬回车换行，换行元素一同被传送到服务器中• soft自动软回车换行，换行元素不会传到服务器中
disabled	表示禁用组件，禁用组件的值也不能被提交
readonly	表示该组件只读，其值依然会被提交
name	用于指定该组件的名字，会随着其值一同被提交到后台

<form action="kun/do" method="get">
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="time" value="3578799">
        <table>
            <tr>
                <td>编号1：</td>
                <td>
                    <input type="text" name="id1" 
                    value="9527" disabled>
                </td>
            </tr>
            <tr>
                <td>编号2：</td>
                <td>
                    <input type="text" name="id2" 
                    value="007" readonly>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <label>
                    <input type="radio" name="gender" value="male"/>
                    男
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <input id="female" type="radio" name="gender" value="female" checked/>
                    <label for="female">女</label>
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td>
                    <input type="checkbox" name="hobbits" value="basketball" checked/>篮球
                    <input type="checkbox" name="hobbits" value="football" checked/>足球
                    <input type="checkbox" name="hobbits" value="ping"/>乒乓球
                </td>
            </tr>
            <tr>
                <td>头像：</td>
                <td>
                    <input type="file" name="face">
                </td>
            </tr>
            <tr>
                <td>地址：</td>
                <td>
                    <select name="provice">
                        <option>江苏省</option>
                        <option value="jiangxi">江西省</option>
                        <option value="shanxi" selected>山西省</option>
                    </select>
                    <select name="city" multiple>
                        <option>太原市</option>
                        <option>大同市</option>
                        <option>长治市</option>
                    </select>
                    <select name="address" multiple>
                        <optgroup label="山西省">
                            <option value="1">太原市</option>
                            <option value="2">大同市</option>
                            <option value="3">长治市</option>
                        </optgroup>
                        <optgroup label="江苏省">
                            <option value="4">南京市</option>
                            <option value="5">无锡市</option>
                            <option value="6">昆山市</option>
                        </optgroup>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我介绍：</td>
                <td>
                    <textarea name="introduce"
                    rows="5" cols="10" wrap="hard"
                    >默认值<br>
                    默认值</textarea>
                </td>
            </tr>
            <tr>
                <td><input type="submit"></td>
                <td><input type="reset"></td>
            </tr>
        </table>
    </form>

H5新增表单元素

progress

progress表示任务的完成情况，常用于进度条


max	定义进度元素所要求的任务的工作量，默认值为1
value	定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。

<progress value="0.3" max="1"></progress>30%

oninput

oninput 表示用户动作产生的结果


name	定义元素的名称
for	其他元素的id列表，表明这些元素为计算提供了输入值(或其他影响)

<form oninput="result.value=n1.value">
        <input type="range" value="30" name="n1">
        <output name="result">30</output>
    </form>

meter

meter元素表示规定范围内的数量值。例如：磁盘使用量，某个候选者的投票人数占总投票人数的比例等


value	在元素中特地表示出来的实际值，该值在min与max之间，如果未指定，该值默认为1
min	指定规定范围时允许使用的最小值，默认为0
max	指定规定范围时允许使用的最大值，默认为1
low	规定范围的下限值必须小于或等于high属性的值
high	规定范围的上限值（表示较高危险的意思）
optimum	最佳值

<meter name="wendu"
     min="-40" max="120" 
     low="15" high="25"
     value="100"></meter>

datalist

datalist表示其他控件可用的值，其值通过< option >作为datalist的子元素存在

<input list="a1" type="text" name="address">
    <datalist id="a1">
        <option>太原市</option>
        <option>大同市</option>
        <option value="changzhi">长治市</option>
        <option value="jinzhong">晋中市</option>
    </datalist>

type

在H5中，对input的type进行了扩展，可以有更多的取值


date	日期控件（年，月，日，不包含时间）
datetime-local	日期时间控件
time	时间控件
month	日期插件（年，月）
week	日期插件（年，周）


number	数字控件（只能输入数字）
range	范围控件（通过控制条可以调整取值）
search	搜索控件，
tel	电话控件
url	地址控件
color	颜色控件
email	email控件

以上只能被chrome,opera支持

google下使用：
    time:<input type="time">
   date: <input type="date">
   number; <input type="number">
   email: <input type="email">
    color:<input type="color">


form	在H5中，可以将表单内的从属元素书写在页面上的任何地方，然后为该元素指定一个form属性，属性值为该表单的id。
formaction	一般用于提交按钮和图片按钮上，用于指定处理表单提交的后台程序，可以重写form中的action属性。
formenctype	一般用于提交按钮和图片按钮上，用于指定处理表单的内容类型。
formmethod	一般用于提交按钮和图片按钮上，用于指定表单的提交方式。
formnovalidate	一般用于提交按钮和图片按钮上，布尔类型，提交时表单不被验证。
formtarget	一般用于提交按钮和图片按钮上，用于指定表单提交后在哪里显示响应页面。
autofocus	当页面加载完毕的时候，默认聚焦。在页面中，只能有一个表单元素具有该属性，值为boolean类型，
list	取值为< datalist >元素的id，用于显示提示内容。
max/min	表单组件能够接受到的最大值/最小值。
placeholder	对用户的输入进行提示，常用于搜索框，不要出现回车换行。
pattern取值	为正则表达式，用于表单验证。
required	表示在表单提交之前必须表单组件中必须输入值。