行内元素与块级元素,表格与表单

1.行内元素(内联元素)具有以下特点:

  • 和其他元素都在一行上,直到一行排不下才会换行,宽度随元素内容变化;
  • 高,行高及外边距和内边距不可改变;(设置宽度width无效,高度height无效,但可以设置line-height,设置margin只有左右有效,上下无效,设置padding左右有效,上下无效)
  • 宽度就是他的文字或图片的宽度,不可改变;
  • 内联元素只能容纳文本或者其他内联元素;
  • 行内元素大多为描述性标记;

行内元素有:

  • a - 锚点
  • abbr - 缩写
  • acronym - 首字
  • b - 粗体 ( 不推荐 )
  • bdo - bidi override
  • big - 大字体
  • br - 换行
  • cite - 引用
  • code - 计算机代码 ( 在引用源码的时候需要 )
  • dfn - 定义字段
  • em - 强调
  • font - 字体设定 ( 不推荐 )
  • i - 斜体
  • img - 图片
  • input - 输入框
  • kbd - 定义键盘文本
  • label - 表格标签
  • q - 短引用
  • s - 中划线 ( 不推荐 )
  • samp - 定义范例计算机代码
  • select - 项目选择
  • small - 小字体文本
  • span - 常用内联容器,定义文本内区块
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • textarea - 多行文本输入框
  • tt - 电传文本
  • u - 下划线
  • var - 定义变量

2.块级元素具有以下特点:

  • 独占一行,所以总是在新行上开始;
  • 高度,行高及内外边距都可以改变;(即使设置了宽度width仍然是独占一行)
  • 除非设定一个宽度,否则宽度缺省是它的容器的100%;
  • 它可以容纳内联元素和其他块元素;
  • 块级元素大多为结构性标记;

块级元素有:

  • address - 地址
  • blockquote - 块引用
  • center - 举中对齐块
  • dir - 目录列表
  • div - 常用块级容易,也是 css layout 的主要标签
  • dl - 定义列表
  • fieldset - form控制组
  • form - 交互表单
  • h1-大标题
  • h4 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • isindex - input prompt
  • menu - 菜单列表
  • noframes - frames可选内容,(对于不支持 frame 的浏览器显示此区块内容
  • noscript - )可选脚本内容(对于不支持 script 的浏览器显示此内容)
  • ol - 排序表单
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表
  1. 块级元素与行内元素的区别
  • 块级元素会独占一行,行内元素不会,相邻行内元素会排在同一行,排不下后换行;
  • 块级元素可以包含行内元素和块级元素;行内元素不能包含块级元素;
  • 行内元素设置width,height,margin-top,margin-bottom,padding-up,padding-bottom无效。
转化为行内元素:
display:inline;
转化为块级元素:
display:block;
转化为行内块元素:
display:inline-block;
  1. 学习目标中,常见的:链接对应--->a,文本对应--->p,b,i,em,center等;标题对应 ---> h1~h6;段落对应--->p;图片对应--->img等;可嵌入元素对应--->img,video,audio等;列表元素对应--->ul,ol,li;表格元素对应--->table,th,tr,td等;表单元素对应--->form,action,method,name,target,novalidate等。
    表格有哪些重要属性,分别的值和作用是什么?

5.表格具有以下属性:

  • HTML table属性<table>
    table元素可以有tr,th,td,thead,tbody,tfoot,colgroup元素
    table标签的基本属性如下:
    border:可以的取值为1和0,1代表有边框,0代表没有边框。
    bordercolor:可以设置边框的颜色,值为颜色值。
    bgcolor:设置表格的背景颜色
    background:设置背景图片

  • tr属性<tr>
    用来定义表格的一行。由于HTML表格是面向行的,所以必须分别表示每一行
    tr元素可以在table,thead,tbody和tfoot元素内使用
    tr元素内可以包含一个或者多个td或th元素
    它的align,bgcolor等属性已过时,如果要设置属性,请使用CSS设置

  • td属性<td>
    用来定义表格单元格,可以同colspan,rowspan,headers局部属性使用
    (1)colspan: 列跨度,该属性规定了单元格可横跨的列数,该属性的值必须是整数
    (2)rowspan:行跨度,该属性规定了单元格可横跨的行数,该属性的值必须是整数
    (3)headers:该属性的值是一个或多个单元的ID属性值,将单元格与列标题相关联,可用于使用屏幕阅读器
    每个表格必须包含以上三个元素

  • th属性<th>
    用来定义标题单元格,使我们有效区分数据及其描述
    它同 <td> 元素具有相同的局部属性,两者有如下区别:
    <th>是表示头标记,通常位于首行或者首列。而且<th>中的文字默认会被加粗,而<td>是不会的
    <td>是数据标记,表示单元格的具体的数据
    valign属性可以设置th和td,可以取值Top或者Bottom。
    callpadding:内容与单元格边框的间距
    cellspacing:防止文本超出边框
    如果要使单元格实现跨行或者跨列功能,使用属性colspan和rowspan.

  • thead属性<thead>
    用来定义表格的页眉,表头的包装器。可以定义一行或多行,这些行是 table 元素的列标签
    没有thead元素,所有的tr被假定为属于表的主体

  • tbody属性<tbody>
    用来定义表格的主体

  • tfoot属性<tfoot>
    用来定义标记表格的页脚

  1. 表单的类型有:
  • type=text
    输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,住址等等。当然这也是Input的默认类型。
    参数name:同样是表示的该文本输入框名称。
    参数size:输入框的长度大小。
    参数maxlength:输入框中允许输入字符的最大数。
    参数value:输入框中的默认值。
    特殊参数readonly:表示该框中只能显示,不能添加修改。

  • type=password
    输入类型是password,在此输入框输入信息时显示为保密字符。参数和“type=text”相类似。

  • type=file
    提供了一个文件目录输入的平台,选择上传文件,参数有name,size。

  • type=hidden
    通常称为隐藏域。如果一个非常重要的信息需要被提交到下一页,但又不能或者无法明示的时候。在页面中看不到hidden在哪里。最有用的是hidden的值。

  • type=button
    让按钮跳转到某个页面上还需要加入写JavaScript代码。

  • type=checkbox
    多选框,参数有name,value及特别参数checked(表示默认选择) 提交到处理页的也就是value,name值可以不一样。

  • type=radio
    单选框,出现在多选一的页面设定中。参数同样有name,value及特别参数checked。不同于checkbox的是,name值一定要相同,否则就不能多选一。提交到处理页的也是value值。

  • type=image
    可以作为提交式图片按钮,通常采用这种按钮效果更美观。

  • type=submit and type=reset
    分别是“提交”和“重置”两按钮,submit主要功能是将Form中所有内容进行提交action页处理,reset是快速清空所有填写内容的功能。

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