资讯专栏INFORMATION COLUMN

HTML 3-列表、表单、语义化

gaara / 939人阅读

摘要:有序列表无序列表自定义列表在语义上的区别有序列表列表有顺序编号默认列表前加,,,编号,适用于有逻辑顺序的排列项目,而且次序不能乱。另外,在类型中,一致时代表选项为一组。提交是表单的提交按钮,将表单中的数据发送给后台服务器

有序列表、无序列表、自定义列表在语义上的区别

1.有序列表ol>li;列表有顺序编号(默认列表前加1.,2.,3.,...编号),适用于有逻辑顺序的排列项目,而且次序不能乱。
2.无序列表ul>li;列表无顺序(默认列表前加"."),适用于并列显示的项目,项目无先后顺序
3.自定义列表dl>dt表头>dd表内容,dt为项目名称,dd项目名称的描述,一个项目名称可以有多个项目描述。自定义列表更简单,精准
如何嵌套:把一个元素放在另外一个元素中称为"嵌套",在列表中,可以把一个ol或者ul作为某个li的内容,这样就在列表中嵌套了另一个列表。
示例:




  
  html4-001

  
    
  1. 有序列表0001
  2. 有序列表002
    • 嵌套无序列表001
    • 嵌套无序列表002
  3. 有序列表0003
  4. 有序列表004
    自定义列表001
    自定义列表项目描述

去除列表前面默认样式
ul{list-style:none;}

CSS 标签中 class 和 id 的区别

id在页面上是唯一标识,class在页面上标识某一类型的样式,具有普遍性,可以重复使用。某元素的class名可以写成class="intro other",即可以有多个class名,代表叠加两个类名称对应的样式。id名不能这样写。ID名常用在页面布局(标记大框架),class一般在局部页面布局中使用,用于样式定义,因为class可以重复,所以为多个元素赋予同一class简化代码量。

块级元素、行内元素的区别

块级元素:独占一行可设置宽,高,margin,padding。块级元素是其他元素的容器元素,可以容纳其他块元素或者行内元素;行内元素只能够容纳文本内容或者其他的行内元素。常见块级元素:div,p,h1..h6,table,tr,ul,li,dl,dt,form
行内元素:占用空间是他自身的宽度。对于行内元素,手动设置宽高是无效的,它本身的高度是由自身决定的。行内元素可以通过line-height来设置高度。常见行内元素:a,span,img,input,button,em,textarea
块级元素中宽高和内外边距都可以设置的;行内元素设置宽高是无效的,它本身内容的宽度就决定了它的宽高,不能手动设置,行内元素的左右margin和padding是有效的,上下的margin和padding是不占据空间的,但是加边框后能看见其范围。注意上下方向设置margin,padding元素范围是增大了,但是对元素周围的内容是没影响的。a元素为行内元素,改变上下padding时元素范围增大(边框可看出),但对周围元素无影响。

display: block、display: inline、display: inline-block的区别

display:none;将元素设置成不显示,脱离文档流,但在dom树中还存在
display:table-cell;将元素设置成表格单元格,可通过vertical-align=middle设置垂直居中(vertical-align仅对行内元素和表格单元格元素生效)
display:block; 将元素设置成块级元素
display:in-line;将元素设置成成行内元素
display:inline-block;将元素设置成行内块元素,既像行内元素水平排列,又能像块级元素设置宽高,设置上下左右padding,margin。inline-block:IE8以下浏览器不支持

HTML CSS 语义化

选择正确合适的标签,合理的标签命名,使用合理的代码结构,语义化使页面结构更清晰,代码更加便于阅读和维护,同时便于爬虫和浏览器更好的解析。标签语义化明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等。书写代码时注意的细节:命名要有含义,单词组用中横线连接,大小写规则统一。在网页上要展示出来的页面内容一定要放在body标签中。

常用的input 标签

form表单的作用是把用户输入的数据提交到后台。其name属性为表单提交的名称,action属性为提交到的网址(如不写默认提交到当前页面),method属性为提交方式get/post。
常见input标签

单行文本区
密码区


汽车
游戏
旅游


提交
重置

input标签中 post 和 get 方式的区别

get(GET用于信息获取):把要提交的数据拼装成url,提交的数据信息可见。get一般用于提交少量数据,浏览器限制最多提交1K(浏览器地址栏装不下超过1K的信息啊)。get提交的数据会保存在浏览器历史记录中,不安全。
post(向服务器传送数据,是可能修改服务器上的资源的请求):提交的数据不是url,所以数据内容不可见,可提交大量数据,浏览器无限制,文件大小受服务器限制.

如果想在表单之外调用服务器端的应用程序,而且包括向其传递参数的过程,就要采用 GET 方法,因为该方法允许把表单这样的参数包括进来作为URL的一部分。而另一方面,使用POST样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程,其中传输的内容不能作为传统 标签的内容.

在input标签中的name属性

input标签设置了name属性,才能在提交表单时传递属性和value值。另外,input在checkbox,radio类型中,name一致时代表选项为一组。

自行车
小车

love[ ]为数组形式,当可选项太多时,用这种数组方式便于js获取数组对应的值

input标签中radio分组

单选按钮radio元素,当radio元素的name值一样时,这些input标签归为一组。即同一组的单选按钮,name 取值一定要一致,比如下面例子输入性别的时候,name属性为同一个名称“sex”,这样同一组的单选按钮才可以起到单选的作用。如果name不一致,那么两个选项就都能选,这样就失去了单选按钮的意义。

男;
女;
input标签中的placeholder 属性

在输入框的提示信息
单行文本区

input标签中的type=hidden隐藏域的作用

隐藏域(暂存数据用户不可见,可用作后台预埋密钥信息以验证用户提交数据是否为伪造,只有当服务器接收到的hidden和服务器预埋在页面的信息一致时,才能成功提交表单数据)
示例:type="hidden"的元素用户不可见,但提交表单时,hid的值test已提交后台。


按钮的常见样式及区别


普通按钮,需要绑定js事件后点击后才有效

提交
应用了自定义按钮样式的a链接,点击后跳转到某个页面,让a链接应用按钮的样式是因为鼠标悬停a链接时有手势,让用户觉得是可点的。


是form表单的提交按钮,将form表单中的数据发送给后台服务器
*

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113338.html

相关文章

  • HTML 3-列表表单语义

    摘要:有序列表无序列表自定义列表在语义上的区别有序列表列表有顺序编号默认列表前加,,,编号,适用于有逻辑顺序的排列项目,而且次序不能乱。另外,在类型中,一致时代表选项为一组。提交是表单的提交按钮,将表单中的数据发送给后台服务器 有序列表、无序列表、自定义列表在语义上的区别 1.有序列表ol>li;列表有顺序编号(默认列表前加1.,2.,3.,...编号),适用于有逻辑顺序的排列项目,而且次序...

    Xufc 评论0 收藏0
  • HTML基础知识

    摘要:标签用于定义文档的头部,它是所有头部元素的容器。头部元素有等标签。遵循的原则是先确定语义的,再选合适的。并且依据重要性递减。锚点定位难点通过创建锚点链接,用户能够快速定位到目标内容。 1 什么是HTML? HTML 指的是超文本标记语言 (Hyper Text Markup Language)。不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML 使用标记标签来描述网页...

    leeon 评论0 收藏0
  • ife 零基础学院 day 2

    摘要:的一些规则新特性应该基于以及。将支持某些特性。作用声明帮助浏览器正确地显示网页。标签位于文档的头部,不包含任何内容。标签的属性定义了与文档相关联的名称值对。每个列表项始于标签。第二天:给自己做一个在线简历吧 最后的验证,提出了几个问题,尝试解答一下 HTML是什么,HTML5是什么 HTML的定义摘抄自w3school的HTML 简介 HTML 是用来描述网页的一种语言。 HTML 指...

    qpal 评论0 收藏0
  • 标签语义

    摘要:主要总结标签语义化方面的内容。的标签都是有语义的。为什么要使用语义化标签由于很强大,无论有没有按照语义选择标签,都可以实现需要的设计。如何确定你的标签是否语义良好去掉样式,看网页结构是否组织良好有序,是否仍然有良好的可读性。 主要总结标签语义化方面的内容。 HTML的标签都是有语义的。 下面列出一些常见的标签及其语义: showImg(https://segmentfault.co...

    darkbaby123 评论0 收藏0

发表评论

0条评论

gaara

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<