在html中列表是块元素还是,HTML基础知识4-列表及表单的写法、块级元素和内联(行内)元素的区别...
一、有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如何嵌套?
1、简单例子如下:
Document
div.div1
{
background-color:#bbb;
color: red;
}
div.div2{
background-color:#ccc;
color: green;
}
div.div3{
background-color:#ddd;
color: blue;
}
- 打开冰箱门
- 把大象放入冰箱
- 关闭冰箱门
- 苹果
- 香蕉
- 梨子
- 国内杀毒软件
- 360杀毒
- 金山毒霸
- 国外杀毒软件
- 卡巴斯基
- 比特梵德
2、语义区别及使用情况如下:有序列表表示列表项间有先后顺序;无效列表则表示各项间无先后顺序,其可随意调换位置(以后使用最多);自定义列表则表示 dt(列头)对dd(列表内容)概括或具有父子属性关系等;
3、嵌套时应从大类写起,大类写完后再逐步补充子项目;自己写了个嵌套示范代码如下:
Document
新上线
百度商桥
在线沟通助力精准营销
百度H5
可视化 H5 页面制作工具
度秘
每个人贴心的秘书
搜索服务
百度软件中心
PC软件资源下载
网页
搜索海量网络资料、资源
视频
搜索海量网络视频
导航服务
hao123
网址导航
网站导航
百度网址大全
百度口碑
传播最真实的评论
二、如何去除列表前面的点或者数字?
在style中加入list-style: none即可;
代码实例
Document
ol.no
{
list-style: none;
}
- 有数字
- 有数字
- 有数字
- 有数字
- 无数字
- 无数字
- 无数字
- 无数字
三、class 和 id 有什么区别?什么时候用 class 什么时候用 id?
区别:
1、一个id选择器在一个HTML中只能出现一次,不能重复使用,class 可被多次使用;
2、id选择器可被javascript中的GetElementByID函数所调用,而 class不支持javascript ;
3、ID样式优先级高于class;
一般情况下优先使用class(因其可被使用多次),但遇到javascript时一般采用id;
四、块级元素、行内元素是什么?有什么区别?分别对应哪些常用标签?
块级元素(block element)又名块元素,和其对应的是行内元素(inline element又称内联元素),都是html规范中的概念。大多数HTML 元素被定义为块级元素或行内元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)。而行内元素只占据它对应标签的边框所包含的空间,且可一并排显示;块级元素需占用一行,其为垂直显示;
五、display: block、display: inline、display: inline-block分别有什么作用?
display:block: 此元素将显示为块级元素,此元素前后会带有换行符;
display:inline :此元素将显示为行内(内联)元素,此元素前后不带换行符;
display:inline-block : 此元素对象将显示为行内元素特性,其对象内容具有块级元素特性;(其为CSS2.1 新增的值,IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表象)
以下自己编写的代码可作为佐证:
Document
a.abiaoqian
{
display: block;
}
a.inlineblock
{
display: inline-block;
margin-top: 30px;
}
p
{
display: inline;
}
a标签产生换行现象
/啊a标签产生换行现象了
p标签不产生换行行为
/啊p标签不产生换行行为了
将该元素对象视作行内元素看待,但元素对象内容具有块级元素的特性
试试是否在一行
六、下面代码是做什么的?抄写一遍下面的代码,注意class和id的使用及命名方式
.wrap
{
width: 900px;
margin: 0 auto;
}
- 导航1
- 导航2
- 导航3
以上代码将页面总体分为三个部分:头部、内容部、底部。这三个部分采用不同的id独立命名,而其内部则采用class的方式命名,以便统一管理样式。
** 七、如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节**
个人理解为编写代码时应规范严谨,使用合适的标签及恰当的命名从而使得搜索引擎、浏览器及维护代码等相关人员均能够很好的理解代码中的相应的含义,有时即使样式丢失或去掉样式,也能够以一种文档格式显示网页内容;
平时写代码时,比如图片记得使用alt标签,命名class或id时采用相关且恰当的字母或单词以便于识别等等;跟语义化不相关的网页设计应注意的细节可见https://www.zhihu.com/question/25535246/answer/31037613
** 八、form表单有什么作用?有哪些常用的input 标签,分别有什么作用?**
其作用为将用户输入表单的信息提交至后台;
常见的input标签有如下示例:
文本输入用
密码输入用
复选用
单选用
暂存数据或做安全校验用
上传文件用
提交表单数据用
提交表单数据用
重置之前所填的表单数据
自定义图片形式的提交按钮
注:使用时,一定要和src属性及alt属性结合使用。
** 九、post 和 get 方式的区别?**
1、post传递数据时不会在url体现出来,而get则会体现,因此使用get时不应该使传递敏感的数据比如密码等;
2、post传递的数据大小根据服务器而定,但get最多只能够传输1k数据;
3、post对数据类型无限制,包括二进制;get只允许 ASCII 字符;
4、post不能够被缓存,get能够被缓存;
5、post在网页后退或刷新时会重新提交数据而get无影响;
6、post编码类型可为application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。而get编码类型只有application/x-www-form-urlencoded;
其他可见:http://www.w3school.com.cn/tags/html_ref_httpmethods.asp
** 十、在input里,name 有什么作用?**
作用是对提交到后台的数据进行标识,或在客户端通过javascript引用表单数值。
十一、提交、提交、 三者有什么区别?
提交 其只提交“提交”(就IE浏览器而言,其他浏览器则提交value值);【button间除了可放置文本以外还可放置多媒体内容,但其唯一禁止使用的元素是图像映射】
提交 只是一个链接,点击后其只是刷新而已,其不会传递数据;
其会将表单内容传递至后台
其实还有 其虽然也可生成“提交”按钮,但点击后无反应(不提交数据),需绑定js;
** 十二、radio 如何 分组?**
当其属性相同时应分为一组(使用同一个name即可),比如 苹果、梨子、香蕉可分为一组;
** 十三、placeholder 属性有什么作用?**
可提示用户输入相应数据,但当其获得焦点时则会消失;
十四、type=hidden隐藏域有什么作用? 举例说明。
其作用为暂存数据或用于安全校验使用;比如:
Document
hidden有什么作用?
以上代码运行使用chrome开发者工具可以看到向后台传递了“安全校验/hidden.php”这组信息。
安全校验.png
十五、代码题
写出如下form表单,性别和取向是单选,爱好是多选
0_1462783789100_upload-4d6e7226-5bc4-4337-bbc7-d3a17f2af7d9
代码详见如下:
Document
form{
line-height: 40px;
}
textarea
{
width: 300px;
height:300px;
}
姓名:
密码:
性别: 男
女
取向: 男
女
爱好: dota
旅游
宠物
评论:
我的car:
萨博
奥迪
宝马
奔驰
**本文版权归本人即简书笔名:该账户已被查封 所有,如需转载请注明出处。谢谢! *
在html中列表是块元素还是,HTML基础知识4-列表及表单的写法、块级元素和内联(行内)元素的区别...相关推荐
- python 列表 元祖 字典 集合_python基础知识之列表、元祖、字典、集合、字符串。...
1.可变类型之列表 列表用 [ ]来定义是可变的,可以通过索引值来去查询里面的字段可以可以追加,删除等 ```python names='zhangyang guyun xiangpeng xulia ...
- 行内元素和块级元素:内联(行级)元素不能设置margin-top
内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-righ ...
- 行转换html,块级、行内、行内元素相互转换
块级.行内.行内元素相互转换 html> 块级.行内.行内块元素相互转换 *{margin: 0px;padding: 0px;} body{background: url(images/5.j ...
- CSS显示:内联vs内联块[重复]
本文翻译自:CSS display: inline vs inline-block [duplicate] Possible Duplicate: 可能重复: What is the differen ...
- 开发过程中js遇到的问题及一些基础知识恶补
Supermarket 开发过程中js遇到的问题及一些基础知识恶补 函数相关问题 DOM元素相关操作 变量操作 异常捕获 开发过程中关于条形码识别 开发结束关于前端板块思路 函数相关问题 (funct ...
- linux基础知识-链接列表
linux基础知识-链接列表 1. 安装centos 7 1.1 Linux的初识 1.2 centOS 7安装教程 1.3 centOS 7配置ip和网络问题排查 1.4 PuTTY和Xshell远 ...
- 元素(块、行内、行内块
块元素的特点 1.支持所有样式 2.块级元素 独占一行 3.块级元素默认宽度和父元素一样 常用块元素块级元素 一般 div p ol ul h1-h6 li dl dt dd 等都是 初始化(样式重置 ...
- 行内,行内块元素同行显示问题
行内块,行内元素同行显示会有间隔 解决方法 不换行,代码中同行元素写在同一行中 <input type="text"><input type="text ...
- CSS之 块、行内、行内块元素
块元素 独占一行 如h1-h6.p.div.ul.ol.li等: 宽高内外边距可以调: 宽度默认是父级宽度100%: 都是容器盒子,里面可以放行内或块级元素. 注意点:文字类元素如p. ...
最新文章
- 容器监控实践—Heapster
- 1.12 Java数组使用binarySearch()方法查找指定元素
- 解决神州数码校园上网客服端软件不能在Windows 7 (5956版)安装的问题
- Odd Grasshopper 奇偶找规律
- 计算机网络技术俄罗斯方块,《The Tetris Effect》:这本新书讲述了俄罗斯方块的传奇故事...
- 安装指定版本的Ionic或Cordova
- 三菱fx5u modbus tcp fb块用法_2020江苏三菱PLCFX3GA14MT回收回收上门提货西门子软启动器...
- KinectV2+Ubuntu 14.04+Ros 配置
- 征途服务管理器显示不出启动服务器,征途服务器管理器连接数据库
- 实训汇编语言设计——将bcd码转化为二进制数
- rails/ruby/gem/RubyOnRails环境搭建-Windows
- java中utf8转成gbk,java中GBK转UTF-8乱码的解决方法
- C语言:查找打印质数(素数)
- NLP句子表征,NLP 的巨人肩膀(下):从 CoVe 到 BERT (转载)
- ADFS 概念与基本开发介绍
- 四位数码管IIC-TM1637
- 防近视护眼台灯哪个牌子好?无蓝光无频闪的护眼台灯推荐
- python画饼图函数_python的matplotlib饼状图
- 刷题日记 acwing 2058笨拙的手指 位运算的运用,迭代器的使用,秦九稍(别的进制转化为10进制)
- 如何写出优雅的 Go 语言代码
热门文章
- 新版iTunes Connect如何删除一个已上传的built。重新上传
- 一篇项目走进生存分析(Survival Analysis)的世界【Python版
- 多项式回归 Polynomial Regression
- f分布表完整图a=0.01_使用 Infer.NET 评价竞争对手
- ESP32设备驱动-MAX30100心率监测传感器驱动
- swift 隐藏状态栏_swift 屏幕的翻转 + 状态栏(statusBar)的隐藏
- 计算机屏幕无信号咋回事,电脑开机后屏幕显示无信号是怎么回事
- Excel如何快速批量转换英文大小写
- ux许可服务器关机或未响应,ug11许可证错误解决方法96 nx许可证错误-96 ug打开错误代码96 ug12安装第二次时出现96错误 ug12提示许可证错误96 ug11许可证96...
- 10款响应式自适应网站模板(二)