任务7-HTML4

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


    Paste_Image.png
    • 有序列表:<ol>开始,</ol>结束,每一个列表都包含在<li>之中,前面默认的是数字1,2,3...
    • 无序列表:<ul>开始,</ul>结束,每一个列表项都包含在<li>之中,前面默认的是黑点。
    • 自定义列表:<dl>开始,</dl>结束,包含了<dt><dd>标签。一个<dt>可以包含好几个<dd>,<dd>可以理解为对<dt>的解释。

    在哪些情况下使用哪种:若需求要求有序列表就用有序列表,需求需要无序列表就用无序。若需求是列表内容并列使用无序列表或自定义列表。

    嵌套:


    Paste_Image.png
  • 如何去除列表前面的点或者数字?
    答:使用list-style: none

    Paste_Image.png
  • class 和 id 有什么区别?什么时候用 class 什么时候用 id?
    答:

    • 区别:

      • id是唯一的,class不唯一。
      • 优先级id高于class。
      • 样式里id用# class用.
    • 什么时候用 class 什么时候用 id?

      • 头部,内容区域,尾部等主体内容用id,有时js特效类需要唯一性,这个时候需要一定使用“id”,而主体内容的子容器或可复用的样式用class。
  • 块级元素、行内元素是什么?有什么区别?分别对应哪些常用标签?
    答:

    • 块级元素、行内元素是什么?
      • 块级元素:单独占一行,默认宽度自动填满父元素宽度。
      • 行内元素:不会单独占一行,跟文档流相同。
    • 区别
      • 块级元素可以设置width、height属性,设置后宽度还是独占一行;但是行内元素设置宽和高后是没有变化的。
      • 块级元素可以设置margin和padding属性,而行内元素水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果,
      • 但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
      • 对应的相关display属性是不同的:块级元素display:block; 行内元素display:inline;
    • 分别对应的标签
      • 块级元素div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
      • 行内元素:span, strong, em, br, img , input, label, select, textarea, cite
  • display: block、display: inline、display: inline-block分别有什么作用?
    答:

    • display: block——显示为块级元素
    • display: inline——显示为行内元素
    • display: inline-block——显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性。
    • 通常将<ul>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。
  • 下面代码是做什么的?抄写一遍下面的代码,注意class和id的使用及命名方式

    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <style>
        .wrap{
          width: 900px;
          margin: 0 auto;
        }
      
      </style>
    </head>
    <body>
      <div id="header">
        <div class="wrap">
          <a id="logo" href="#"><img src=""></a>
          <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
          </ul>
        </div>
     </div>
      <div id="content">
        <div class="wrap">
          <div class="aside">侧边栏</div>
          <div class="main">中心区块</div>
        </div>
      </div>
    <div id="footer">
      <div class="wrap">这里是 footer</div>
    </div>
    </body>
    </html>
    
Paste_Image.png

这是一个上中下结构的网页分成三部分,头部header、内容区域content、脚部footer。这三部分用id作为区域划分标签使用。样式布局全部用class定义。

  • 如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
    答:
    根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。
    • 写HTML代码时应注意什么?
      • 尽可能少的使用无语义的标签div和span;
      • 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
      • 不要使用纯样式标签,如:b、font、u等,改用css设置。
      • 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
      • 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
      • 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
      • 每个input标签对应的说明文本都需要使用label标签,并且通过为 input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
  • form表单有什么作用?有哪些常用的input 标签,分别有什么作用?

  • form表单的作用:

    • form表单用于把用户输入的数据提交至后台。
  • 有哪些常用的input 标签,分别有什么作用?

    • <input type="text">用于输入文本,可以加入placeholder属性来写框内的提示内容,还有maxlength用来限制文本框里的字数,value用来填写里面的默认内容。
    • <input type="password">里面输入密码显示文字为星号。
    • <input type=“raido”>是单选框但是只在里面name相同的情况下是单选,不相同的话是多选。
    • <input type="checkbox">复选框,加入checked使之成为默认选项。
    • <input type="textrea">文本域,用于输入大量文本。
    • <input type="select">下拉选择列表,加入selected使之成为默认选择。
    • <input type="submit">定义提交按钮,向服务器发送表单数据,里面的内容根据value决定。
    • <input type="reset" > 定义重置按钮。重置按钮会清除表单中的所有数据。
    • <input type="image" >定义图像形式的提交按钮。
    • 必须把标签的 src 属性和Alt属性与其结合使用。
    • <input type="hidden">定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值,它们的值也可以由 JavaScript 进行修改。
    • <input type="file" >用于文件上传。
    • <input type="button" >定义可点击的按钮,但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。
  • post 和 get 方式的区别?
    答:

    • get不安全,数据保存在浏览器记录中
    • get是向服务器索要数据的一种请求,post是向服务器提交数据的一种请求。
    • get一般用于提交少量数据,post用于提交大量数据。
    • get提交数据最多1k数据,受到浏览器的限制;post提交数据理论上无限制,收到服务器的限制。
  • 在input里,name 有什么作用?
    答:设定input的元素名,用于对提交到服务器后的表单数据进行识别,或者在客户端通过 JavaScript 引用表单数据。

  • <button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别?
    答:

    • <button>提交</button>:是一个单纯的按钮。
    • <a class="btn" href="#">提交</a>:一个连接,到href指向的地方。
    • <input type="submit" value="提交">:表单的提交按钮,将表单中的数据提交至服务器。
  • radio 如何 分组?
    答:通过name命名和value值配合,同一个组内的name值一定要一样

  • placeholder 属性有什么作用?
    答:默认显示的内容。

Paste_Image.png
  • type=hidden隐藏域有什么作用? 举例说明
    答:隐藏域的功能是用来储存一些表单资讯,而不想要直接显示在页面表单上。例如一些特定的参数,填写时间戳记,登入记录...等,有许多种的应用都可以使用隐藏栏位来记录。当表单提交的时候,隐藏域的值也会传递给后端的程序,每一个表单可以安插许多不同名称的隐藏域,传递各种表单信息。
<input type="hidden" name="123" value="test">
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容

  • 1.有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
    墨月千楼阅读 248评论 0 0
  • 一、有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
    鸿鹄飞天阅读 656评论 0 0
  • 课程目标 熟悉列表的使用场景和用法 理解HTML语义化 理解行内元素、块级元素概念 熟悉常见input表单的使用方...
    饥人谷_江君阅读 258评论 0 0
  • 一、有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
    咩咩咩1024阅读 455评论 0 0
  • 过去的几年里,我常常由衷地感慨,三文鱼真是人类忠实的好朋友啊——它们太好吃了。 今天,我想给大家推荐一下我最常用的...
    庄一丁阅读 1,474评论 0 2