2020-03-08

一 列表

1 无序列表 ul li

2 有序列表 ol li

3 定义列表 dl dt表示被定义的内容 dd表示对定义内容的描述

dl ul ol 之间可以互相嵌套

二 表格标签

<table></table>

    表格标签,用于在效果中定义一个表格

<tr></tr>

    表格的行标签,用于定义一个表格行

<td></td>

    表格的单元个标签,用于定义一个表格行中的单元格

<th></th>

    表格的表头单元格标签,用于在效果中定义一个表格红中的单元格

<th><td>唯一区别:<th>居中加粗

单元格合并

<td>或者<th>都有两个单元格合并属性:

colspan:跨列合并单元格

rowspan:跨行合并合单元格

合并步骤:    

    1 确定合并哪几个单元格,确定是跨行合并还是跨列合并

    2 在第一个出现的单元格上书写合并单元格属性

    3 合并几个单元格,属性就写几

    4 被合并的单元格必须删掉

行  列  单元格  表头  数据

表格是为了更好的格式化显示数据

三 内联与块标签

<span></span>

    内联标签,一行上定义多个元素,进行内容显示

    有多少个内容,就会占用多大空间

span不会自动换行

<div></div>

块标签,一行上定义一个块,默认沾满一行,进行内容显示

    适用于大量数据展示,或者用来布局

四表单标签

    <from></from>

    用于在效果中定义一个表单

    作用:用于提交用户填写的数据,提交给服务器的程序

    文本框供用户输入,类是Java的Scanner

action 将数据提交到何处

        默认提交到本页

        本机内网路径

                相对路径:常用

                绝对路径:不建议使用

        互联网路径:https://www.12306.com/xxx

method 将数据一何种方式提交

        默认为get

        提交方式课定义为get或者post

get方式提交特点:把数据拼接到地址栏上

post方式提交特点:没有把数据拼接到地址栏上而是在请求体

get和post提交方式区别:

1 get提交的参数列表拼接到地址栏后面;post方式不会拼接到地址栏后面

2 get提交数据,敏感信息不安全,post方式提交的数据相对安全

3 get方式提交的数据是有限的,post方式从理论上提交的数据是无限大的

尽量使用post方式提交表单

五 输入项标签

<input></input>

        表单输入项标签,用户可以在该标签上,通过填写和选择,进行数据的输入

type设置该标签的种类

text密码框,内容非明文

password单选框,在同一组内有单选效果

chechbox复选框,在同一组内有复选效果

submit提交按钮,用于控制表单提交数据

reset 充值按钮,用于表单输入项恢复到默认状态

file附件框,用于文件上传

hidden隐藏于,一般用作提交服务器需要拿到,单用户不需要看到的数据

button普通按钮,需要和js时间一起用

name 单选框,复选框进行数据的分组,设置该标签对应的参数名,要提交数据给后台,必须写name

value设置该标签对应的参数值/作为按钮的名字

checked设置单选框/复选框的默认选中状态

readonly设置该标签的参数值只读,用户无法手动更改,数据是可以正常提交的

disabled设置该标签不可用,参数值无法更改,并且无法提交

六 表单点击提交按钮,提交数据时

    url?参数列表

    参数列表格式:参数1=参数值&参数2=参数值&参数3=参数值......

    ?gender=on  on表示选中

    ?gender=male&age=18......

单选框,用户只能选择,不能输入,需要制定value属性

文本框,用户可以自由输入,不一定指value属性,指定的话表示默认值,placeholder表示提示文字

七选择框标签

    <select></select>标签,定义一个下拉选择框

        name设置该标签对应的参数名

        multiple设置选项全部显示,并且可以进行多选提交,不屑此属性默认为单选

        <option></option>标签,选项标签,为一个选择框添加一个选项

        value设置需要提交的参数值

        selected设置选项的默认选中状态

注意事项:

        option的内容体一般是用来展示的

        参数值应该时option的value属性值

八文本域标签

<textarea></textarea>标签

         文本域,多行文本框

        name设置该标签对应的参数名

    文本与和文本框区别

            1 文本框不能换行,文本域可以

            2 文本框参数值是value属性,文本域参数值是标签的内容体

九 提交表单注意事项

        正常提交?pwd=123&uname=zhangsan

        非正常?pwd=123#asd&qwe&sdf&uname=zhangsan

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>注册网站</title>

</head><body>

<form action="NewFile1.html">

<!--用户名ID? -->

<input type="hidden" name="uid" vlaue="123">

照片<input type="file" name="photo"><br><br>

用户名<input type="text" name="username" value="李玉贤"><br><br>

密码<input type="password" name="password" placeholder="提示数字"><br><br>

性别<input type="radio" name="gender" value="male" checked="checked">男

<input type="radio" name="gender" value="female">女<br><br>

年龄<input type="radio" name="age" value="wcn">未成年

<input type="radio" name="age" value="cn" checked="checked">成年<br><br>

所在省份<select name="sf">

<option value="hn">河南省</option>

<option value="hb">河北省</option>

<option value="sx">山西省</option>

<option value="jl">吉林省</option>

<option value="hlj">黑龙江省</option>

<option value="js">江苏省</option>

<option value="zj">浙江省</option>

<option value="ah">安徽省</option>

<option value="ln">辽宁省</option>

</select><br><br>

手机号<input type="phone" name="phone">

<input type="button" value="获取验证码"><br><br>

输入验证码<input type="yzm" name="yzm"><br><br>

爱好<input type="checkbox" name="hobby" value="yx" checked="checked">游戏

<input type="checkbox" name="hobby" value="mn" checked="checked">美女

<input type="checkbox" name="hobby" value="dy">电影

<input type="checkbox" name="hobby" value="eat">吃<br><br>

你喜欢的明星

<select name="star">

<option value="cwt">陈伟霆</option>

<option value="qbl">乔碧萝</option>

<option value="cxk">蔡徐坤</option>

<option value="ch" selected="selected">陈赫</option>

</select><br><br>

自我介绍<textarea name="info"></textarea><br><br>

<input type="submit" value="注册">

<input? type="reset" name="">

<input type="button" value="按钮"><br><br>

<button type="submit">提交</button>

<button type="reset">重置</button>

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

</form>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 第2天上课内容 我们今天学习了超链接标签,列表,表格,内联...
    哈哈哈额哈哈哈阅读 286评论 0 0
  • 作业 day 02 </ a>超链接标签 1.用于定义一个可以点击跳转的连接 2 herf:...
    常樂_b00d阅读 195评论 0 0
  • 一、列表 1.无序列表ul li 2.有序列表ol li 3.定义列表dl dt dl.ul.ol<之间可以互相嵌...
    刘哲_1d91阅读 193评论 0 0
  • 列表标签:展示列表项 有序列表: ol li 无序列表: ul li 表单标签:用于采集用户数...
    H_5a8d阅读 169评论 0 0
  • day 02 超链接标签 1.用于定义一个可以点击跳...
    李霜_9191阅读 323评论 0 0