鸿鹄飞天
鸿鹄飞天

7.HTML4

一、有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？

  • 有序列表 ol（ordered list）
    有序列表，字面上讲，就是有顺序的列表。有序列表使用编号来记录项目的顺序，默认情况下在每项前面显示1,2,3…，它适用于要求有顺序排列的项目，有序列表使用
      标签，每个列表项使用
    1. 标签。


  1. 起床

  2. 穿衣

  3. 洗脸洗口

Paste_Image.png

另外在html5中

    标签添加了四个新的属性:

    7.HTML4_第1张图片
    Paste_Image.png


  1. 我的列表

  2. 我的列表

  3. 我的列表

Paste_Image.png


  1. 我的列表

  2. 我的列表

  3. 我的列表

Paste_Image.png


  1. 我的列表

  2. 我的列表

  3. 我的列表

Paste_Image.png
  • 无序列表 ul（unordered list）
    无序列表就是没有顺序的列表，项目列表默认用圆点，适用于并列不分前后顺序的项目。无序列表用
      标签，每个列表项目使用
    • 标签


  • 香蕉

  • 苹果

  • 桃子

Paste_Image.png

另外它有两个属性，一般在css中使用
7.HTML4_第2张图片
Paste_Image.png


  • 我的无序列表

  • 我的无序列表

  • 我的无序列表
    • <

Paste_Image.png
  • 自定义列表 dl（definition list）
    根据定义解释：自定义列表不仅仅是一列项目，也是项目及其注释的组合。自定义列表始于
    标签，每个列表项始于表头
    ，列表项的说明始于表内容
    。
    个人理解：使用
    写出项目名称，
    描述项目名称，一个项目可以有多个项目名，多个描述。


表头

内容

颜色

红绿蓝等

Paste_Image.png
  • 三者语义上的区别及适用场景
    在用div布局整个页面时，而用这三种列表可以运用在一些网页的局部，因为他们是语义化表签，所以更容易理解，而且能够嵌套，这跟div布局相同，都是由大到小，而且能够节省css中的命名。
    有序列表适用于明显的排列顺利，而且次序不能乱，因此经常使用无序列表和自定义列表，因为他们没有顺序可以并列；这两个列表相比的话，自定义列表更简单，精准，也更好理解。
  • 如何嵌套






Examples





这里是嵌套



  • 课程目标

    • 熟悉列表的使用场景和用法

    • 理解HTML语义化



  • 学习建议

    • 语义化、行内元素块级元素、POST 和 GET 的区别这是面试必问的知识点



  • 预习视频

    • 课程视频-HTML-列表|块级元素|行内元素

    • 课程视频-HTML-Form表单



  • 课程任务

    问答



    • 有序列表、无序列表、自定义列表如何使用

    • 如何去除列表前面的点或者数字？







7.HTML4_第3张图片
Paste_Image.png

二、如何去除列表前面的点或者数字？

使用list-style：none；


7.HTML4_第4张图片
Paste_Image.png

三、class 和 id 有什么区别？什么时候用 class 什么时候用 id？

  • 区别:
    1.id是identity的缩写,是身份标识号码的意思,是一个编码，它是唯一的，在页面上只能使用一次。class就是类的意思，表示一类型的样式，具有普遍性，可以重复使用。
    2.从概念上说id是先找到结构或者内容，再给它定义样式；class是先定义好一种样式，再套给多个结构或者内容。
    3.class和id都是选择器，它们之间有权重的区别，当同一个标签同时有class和id属性，但在写CSS样式时，id优先级高于class
    4.class可以写成class="intro other"，可以有多个class名，id名不能这样写
  • 什么时候用 class 什么时候用 id
    因为id具有唯一性，所以通常在结构外围使用，通常用于页面布局。id多用于Javascript操作DOM；class可以重复，一般在结构内部使用，用于样式定义；class可以通过给多个元素赋予同一class，批量操作来设置css。

四、块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？

7.HTML4_第5张图片
Paste_Image.png

说明：1、块级元素是其他元素的容器元素，可以容纳其他块元素或者行内元素;行内元素只能够容纳文本内容或者其他的行内元素。
　　　2、对于行内元素，手动设置宽高是无效的，它本身的高度是由自身决定的。利用审查元素，当你鼠标放置在块级元素上面时，选中的是元素所在的一整行；而放置在行内元素时，只选中了元素所在内容的那一部分。
7.HTML4_第6张图片
Paste_Image.png

块级元素常用标签: div、p、h1-h6、table、tr、ol、ul、li、dl、dt、form
行内元素常用标签: a、span、img、input、button、em、textarea

五、 display: block、display: inline、display: inline-block 分别有什么作用?

display: block将元素设置为块级元素
display: inline将元素设置为行内元素
display: inline-block将元素设置为行内块元素，既有行内元素的性质，可以水平排列，又具有块级元素的性质，可以设置宽高和上下左右的边距,，但缺点是IE8以下不能使用。也可以通过浮动来实现相同的效果。
display: none；隐藏，脱离文档流。

六、下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式






Examples









侧边栏

中心区块





上面的代码把页面分成了三部分：头部，内容，底部。然后三部分的内部又分别分成几个小部分，几个小部分用同样的类名wrap进行包裹，设置相同的宽和内容水平居中的样式。因为id是唯一的，它是区分结构和内容的，所有三部分使用id，里面的a标签是图片链接，是独一无二的，所以也使用了id，然后三大部分内部使用class划分小区块。这里命名要注意语义化，命名风格要保持统一，如nav就是导航的缩写，aside就是侧边的意思。

七、如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节？

  • HTML 标签可以分为有语义的标签，和无语义的标签。比如table表示表格，form表示表单。无语义标签典型的有div等。
    所以语义化就是要根据情况选择正确的标签，恰当的利用好标签的作用。
  • 命名要有一定的含义，让人一看到就能知道是什么，这样便于维护和阅读。
  • 命名风格要保持统一，比如命名中包含2个以上单词用“-”链接。

八、form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

  • form表单是用来把用户输入的数据提交到后台
    7.HTML4_第7张图片
    Paste_Image.png

    提示：name:表单提交时的名称；action提交到的地址，如果不写action，信息就会提交到当前页面；method提交方式（get和post），如果不写，默认的是get。
  • 常用的input 标签
    ①type="text",用于输入文本。placeholder属性展示的是输入框里的提示，maxlength，限制最大输入长度。

②type="password"， 用于输入密码,叫做密码域，输入的内容显示为星号。

③type="radio"， 单选圆圈按钮。注意：name要相同，这样表示它们是一组，才能实现单选，value要有值，否则后台无法显示对应的输入值。

男
女

④type="checkbox"，复选框。加checked属性会默认选上。提交时，如果选中（如bike），那么bike=on。

自行车
小车

⑤type="submit"，用于提交表单数据。

⑥type="textarea"，文本域，用于输入多行文本。

⑦下拉列表框

⑨type="file",用于上传文件。

参考w3cschool

九、post 和 get 方式的区别？

7.HTML4_第8张图片
Paste_Image.png

十、在input里，name 有什么作用？

  • 作用是对提交到后台的数据进行标识，或在客户端通过javascript引用表单数值。
    只有设置了 name 才能在提交表单时传递value值，所以input必须设置name属性。
  • 当name的值相同时表示一组，可以实现单选。复选框中，可以把name值设置成一个数组，比如：
自行车
小车

这样在命名的时候比较方便，后台也会给这些变量选择对应的输入数据。

十一、、提交、 三者有什么区别？


  • 是普通按钮，需要绑定JS事件，button里面可以加一些比如文字、图像等内容。
  • 提交
    是一个文本链接，点击提交会跳转到另一个页面，但是不会向后台提交数据

  • 可以提交一个表单数据
    参考：w3cschool

十二、radio如何分组？

使用设置name值进行分组，如果name值是一样的，就是一组，分组后组内的选项是单选的。

教科书：数学
       英语

十三、placeholder 属性有什么作用？

作用是在输入框中提示用户应该输入的内容。

十四、type=hidden隐藏域有什么作用? 举例说明。

隐藏域，用户看不到，用于暂存数据及后台进行安全性校验


    密码:
Paste_Image.png

Paste_Image.png

提示：只有当服务器接收到的hidden和预存的信息一致时，才能成功提交表单数据，与生俱来的安全性

十三、iframe

  • iframe 元素会创建包含另外一个文档的内联框架（行内框架），即在页面中嵌入另外一个页面，形成一个画中画的效果。
  • iframe 可用作链接的目标（target）,链接的 target 属性必须引用 iframe 的 name 属性。



    
    
饥人谷

    
淘宝

7.HTML4_第9张图片
Paste_Image.png

参考：
w3cschool
iframe

next:8.CSS选择器
pre;6.HTML3

你可能感兴趣的:(7.HTML4)

  • 7.HTML4 鸿鹄飞天
    一、有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？如何嵌套？有序列表ol（orderedlist）有序列表，字面上讲，就是有顺序的列表。有序列表使用编号来记录项目的顺序，默认情况下在每项前面显示1,2,3…，它适用于要求有顺序排列的项目，有序列表使用标签，每个列表项使用标签。起床穿衣洗脸洗口Paste_Image.png另外在html
  • 深入浅出Java Annotation(元注解和自定义注解） Josh_Persistence Java Annotation元注解自定义注解
    一、基本概述     　　 Annontation是Java5开始引入的新特征。中文名称一般叫注解。它提供了一种安全的类似注释的机制，用来将任何的信息或元数据（metadata）与程序元素（类、方法、成员变量等）进行关联。   　　更通俗的意思是为程序的元素（类、方法、成员变量）加上更直观更明了的说明，这些说明信息是与程序的业务逻辑无关，并且是供指定的工具或
  • mysql优化特定类型的查询 annan211 java工作mysql
    本节所介绍的查询优化的技巧都是和特定版本相关的，所以对于未来mysql的版本未必适用。 1 优化count查询 对于count这个函数的网上的大部分资料都是错误的或者是理解的都是一知半解的。在做优化之前我们先来看看 真正的count()函数的作用到底是什么。 count()是一个特殊的函数，有两种非常不同的作用，他可以统计某个列值的数量，也可以统计行数。 在统
  • MAC下安装多版本JDK和切换几种方式 棋子chessman jdk
    环境： MAC AIR,OS X 10.10,64位   历史： 过去 Mac 上的 Java 都是由 Apple 自己提供，只支持到 Java 6，并且OS X 10.7 开始系统并不自带（而是可选安装）（原自带的是1.6）。 后来 Apple 加入 OpenJDK 继续支持 Java 6，而 Java 7 将由 Oracle 负责提供。   在终端中输入jav
  • javaScript （1） Array_06 JavaScriptjava浏览器
    JavaScript 1、运算符 　　运算符就是完成操作的一系列符号，它有七类： 　　赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位
  • 国内顶级代码分享网站 袁潇含 javajdkoracle.netPHP
           现在国内很多开源网站感觉都是为了利益而做的                  当然利益是肯定的,否则谁也不会免费的去做网站      &
  • Elasticsearch、MongoDB和Hadoop比较 随意而生 mongodbhadoop搜索引擎
      IT界在过去几年中出现了一个有趣的现象。很多新的技术出现并立即拥抱了“大数据”。稍微老一点的技术也会将大数据添进自己的特性，避免落大部队太远，我们看到了不同技术之间的边际的模糊化。假如你有诸如Elasticsearch或者Solr这样的搜索引擎，它们存储着JSON文档，MongoDB存着JSON文档，或者一堆JSON文档存放在一个Hadoop集群的HDFS中。你可以使用这三种配
  • mac os 系统科研软件总结 张亚雄 mac os
    1.1 Microsoft Office for Mac 2011      大客户版，自行搜索。      1.2 Latex （MacTex）:      系统环境：https://tug.org/mactex/     &nb
  • Maven实战（四）生命周期 AdyZhang maven
    1. 三套生命周期     Maven拥有三套相互独立的生命周期，它们分别为clean，default和site。 每个生命周期包含一些阶段，这些阶段是有顺序的，并且后面的阶段依赖于前面的阶段，用户和Maven最直接的交互方式就是调用这些生命周期阶段。 以clean生命周期为例，它包含的阶段有pre-clean, clean 和 post
  • Linux下Jenkins迁移 aijuans Jenkins
    1. 将Jenkins程序目录copy过去      源程序在/export/data/tomcatRoot/ofctest-jenkins.jd.com下面            tar -cvzf jenkins.tar.gz ofctest-jenkins.jd.com &
  • request.getInputStream()只能获取一次的问题 ayaoxinchao requestInputstream
    问题：在使用HTTP协议实现应用间接口通信时，服务端读取客户端请求过来的数据，会用到request.getInputStream()，第一次读取的时候可以读取到数据，但是接下来的读取操作都读取不到数据   原因： 1. 一个InputStream对象在被读取完成后，将无法被再次读取，始终返回-1； 2. InputStream并没有实现reset方法（可以重
  • 数据库SQL优化大总结之 百万级数据库优化方案 BigBird2012 SQL优化
    网上关于SQL优化的教程很多，但是比较杂乱。近日有空整理了一下，写出来跟大家分享一下，其中有错误和不足的地方，还请大家纠正补充。 这篇文章我花费了大量的时间查找资料、修改、排版，希望大家阅读之后，感觉好的话推荐给更多的人，让更多的人看到、纠正以及补充。 1.对查询进行优化，要尽量避免全表扫描，首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where
  • jsonObject的使用 bijian1013 javajson
            在项目中难免会用java处理json格式的数据，因此封装了一个JSONUtil工具类。 JSONUtil.java package com.bijian.json.study; import java.util.ArrayList; import java.util.Date; import java.util.HashMap;
  • [Zookeeper学习笔记之六]Zookeeper源代码分析之Zookeeper.WatchRegistration bit1129 zookeeper
    Zookeeper类是Zookeeper提供给用户访问Zookeeper service的主要API，它包含了如下几个内部类     首先分析它的内部类，从WatchRegistration开始，为指定的znode path注册一个Watcher，   /** * Register a watcher for a particular p
  • 【Scala十三】Scala核心七：部分应用函数 bit1129 scala
    何为部分应用函数？ Partially applied function: A function that’s used in an expression and that misses some of its arguments.For instance, if function f has type Int => Int => Int, then f and f(1) are p
  • Tomcat Error listenerStart 终极大法 ronin47 tomcat
    Tomcat报的错太含糊了，什么错都没报出来，只提示了Error listenerStart。为了调试，我们要获得更详细的日志。可以在WEB-INF/classes目录下新建一个文件叫logging.properties，内容如下 Java代码  handlers = org.apache.juli.FileHandler, java.util.logging.ConsoleHa
  • 不用加减符号实现加减法 BrokenDreams 实现
            今天有群友发了一个问题，要求不用加减符号(包括负号)来实现加减法。         分析一下，先看最简单的情况，假设1+1，按二进制算的话结果是10，可以看到从右往左的第一位变为0，第二位由于进位变为1。    
  • 读《研磨设计模式》-代码笔记-状态模式-State bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* 当一个对象的内在状态改变时允许改变其行为，这个对象看起来像是改变了其类 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况 把状态的判断逻辑转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化 如果在
  • CUDA程序block和thread超出硬件允许值时的异常 cherishLC CUDA
    调用CUDA的核函数时指定block 和 thread大小，该大小可以是dim3类型的（三维数组），只用一维时可以是usigned int型的。 以下程序验证了当block或thread大小超出硬件允许值时会产生异常！！！GPU根本不会执行运算！！！ 所以验证结果的正确性很重要！！！ 在VS中创建CUDA项目会有一个模板，里面有更详细的状态验证。 以下程序在K5000GPU上跑的。
  • 诡异的超长时间GC问题定位 chenchao051 jvmcmsGChbaseswap
    HBase的GC策略采用PawNew+CMS, 这是大众化的配置，ParNew经常会出现停顿时间特别长的情况，有时候甚至长到令人发指的地步，例如请看如下日志： 2012-10-17T05:54:54.293+0800: 739594.224: [GC 739606.508: [ParNew: 996800K->110720K(996800K), 178.8826900 secs] 3700
  • maven环境快速搭建 daizj 安装mavne环境配置
    一 下载maven 安装maven之前，要先安装jdk及配置JAVA_HOME环境变量。这个安装和配置java环境不用多说。 maven下载地址：http://maven.apache.org/download.html，目前最新的是这个apache-maven-3.2.5-bin.zip，然后解压在任意位置，最好地址中不要带中文字符，这个做java 的都知道，地址中出现中文会出现很多
  • PHP网站安全，避免PHP网站受到攻击的方法 dcj3sjt126com PHP
    对于PHP网站安全主要存在这样几种攻击方式:1、命令注入(Command Injection)2、eval注入(Eval Injection)3、客户端脚本攻击(Script Insertion)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、SQL注入攻击(SQL injection)6、跨网站请求伪造攻击(Cross Site Request Forgerie
  • yii中给CGridView设置默认的排序根据时间倒序的方法 dcj3sjt126com GridView
    public function searchWithRelated() {         $criteria = new CDbCriteria;         $criteria->together = true; //without th
  • Java集合对象和数组对象的转换 dyy_gusi java集合
        在开发中，我们经常需要将集合对象（List，Set）转换为数组对象，或者将数组对象转换为集合对象。Java提供了相互转换的工具，但是我们使用的时候需要注意，不能乱用滥用。 1、数组对象转换为集合对象     最暴力的方式是new一个集合对象，然后遍历数组，依次将数组中的元素放入到新的集合中，但是这样做显然过
  • nginx同一主机部署多个应用 geeksun nginx
    近日有一需求，需要在一台主机上用nginx部署2个php应用，分别是wordpress和wiki，探索了半天，终于部署好了，下面把过程记录下来。 1.   在nginx下创建vhosts目录，用以放置vhost文件。 mkdir vhosts   2.   修改nginx.conf的配置， 在http节点增加下面内容设置，用来包含vhosts里的配置文件 #
  • ubuntu添加admin权限的用户账号 hongtoushizi ubuntuuseradd
    ubuntu创建账号的方式通常用到两种：useradd 和adduser . 本人尝试了useradd方法，步骤如下： 1:useradd    使用useradd时，如果后面不加任何参数的话，如：sudo useradd sysadm 创建出来的用户将是默认的三无用户：无home directory ,无密码,无系统shell。 顾应该如下操作：  
  • 第五章 常用Lua开发库2-JSON库、编码转换、字符串处理 jinnianshilongnian nginxlua
      JSON库   在进行数据传输时JSON格式目前应用广泛，因此从Lua对象与JSON字符串之间相互转换是一个非常常见的功能；目前Lua也有几个JSON库，本人用过cjson、dkjson。其中cjson的语法严格（比如unicode \u0020\u7eaf），要求符合规范否则会解析失败（如\u002），而dkjson相对宽松，当然也可以通过修改cjson的源码来完成
  • Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 yaerfeng1989 timerquartz定时器
    原创整理不易，转载请注明出处：Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 代码下载地址：http://www.zuidaima.com/share/1772648445103104.htm 有两种流行Spring定时器配置：Java的Timer类和OpenSymphony的Quartz。 1.Java Timer定时 首先继承jav
  • Linux下df与du两个命令的差别？ pda158 linux
    　一、df显示文件系统的使用情况，与du比較，就是更全盘化。 　　最经常使用的就是 df -T，显示文件系统的使用情况并显示文件系统的类型。 　　举比例如以下： 　　[root@localhost ~]# df -T 　　Filesystem                   Type &n
  • [转]SQLite的工具类 ---- 通过反射把Cursor封装到VO对象 ctfzh VOandroidsqlite反射Cursor
    在写DAO层时，觉得从Cursor里一个一个的取出字段值再装到VO(值对象)里太麻烦了，就写了一个工具类，用到了反射，可以把查询记录的值装到对应的VO里，也可以生成该VO的List。   使用时需要注意： 考虑到Android的性能问题，VO没有使用Setter和Getter，而是直接用public的属性。 表中的字段名需要和VO的属性名一样，要是不一样就得在查询的SQL中
  • 该学习笔记用到的Employee表 vipbooks oraclesql工作
        这是我在学习Oracle是用到的Employee表，在该笔记中用到的就是这张表，大家可以用它来学习和练习。 drop table Employee; -- 员工信息表 create table Employee( -- 员工编号 EmpNo number(3) primary key, -- 姓
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他