html-4

2016-09-01  本文已影响0人  kingBirds
一，有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？

答：
有序列表通常用来表示内容之间的顺序或者是重要性关系，每一个列表都分为多个子项，每一个子项都有相应的编号。
无序列表仅仅用于表示内容之间存在有并列关系，也是分为多个子项，但是子项之前没有相应的编号，只有一个原点用于标识。
定义列表通常用于表示名词或者是概念的定义，每一个子项有两个部分组成，第一部分是名词或者是概念，第二部分是相应的解释和描述。

列表的简单举例

<!doctype html>
<HTML>
  <head>
  <meta name="hkeywords" content"ol,ul,dl" charset="utf-8"/>
  </head>
  <body>
    <!--无序列表-->
     <ul>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    </ul>
    <!--有序列表-->
     <ol>
       <li>我是有序列表1</li>
       <li>我是有序列表2</li>
       <li>我是有序列表3</li>
     </ol>
    <!--自定义列表-->
     <dl>
        <dt>我是自定义列表项目</dt>
        <dd>这是项目内容</dd>
         <dd>这是项目内容</dd>
        <dt>web前端</dt>
          <dd>HTML</dd>
          <dd>CSS</dd>
          <dd>JavaScript</dd>
        <dt>编程语言</dt>
          <dd>Java</dd>
          <dd>C++</dd>
     </dl>
  </body>
</HTML>

无序列表 unorder list 默认列表项前是小圆点

无序列表

有序列表排序的类型共五种：默认阿拉伯数字，“a”小写字母，"A"大写字母，"I"大写罗马数字排序，"i"小写罗马数字排序.
start 排序的其实位置如果type="a" start="5" 那么从字母e开始.
reversed="true" 倒序排列.

有序列表

自定义列表表达对名词或概念的解释或者描述

自定义列表

list-style-type:list-style-type属性是用来定义li列表的项目符号的，即列表前面的修饰,是一个可继承的属性。
list-style-image:list-style-image用来定义使用图片代替项目符号。它也是一个可继承属性。
list-style-position属性是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性，语法结构如下：
list-style-position:inside/outside
inside：项目符号放置在文本以内。 outside：项目符号放置在文本以外。

<HTML>
  <head>
  <meta name="hkeywords" content"ol,ul,dl" charset="utf-8"/>
  </head>
  <body style="background-color:#ccc  color:#333">
    <p>综合性大学</p>
    <!--无序列表-->
    <ul>
    <li>外国语学院</li>
    <li>工商管理学院</li>
    <li>计算机学院</li>
<!--嵌套有序列表-->
      <ol>
       <li>计算机网络技术</li>
       <li>计算机编程技术</li>
       <li>web前端开发</li>
<!--嵌套自定义列表-->
     <dl>
        <dt>web前端</dt>
          <dd>HTML</dd>
          <dd>CSS</dd>
          <dd>JavaScript</dd>
     </dl>
        <li>操作系统与系统架构</li>
        <li>数据库编程与开发</li>
     </ol> 
       <li>化工学院</li>
       <li>医学院</li>
    </ul>
  </body>
</HTML>
代码效果

参考资料：css控制UL LI 的样式详解(推荐)

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

答：将列表属性值设置为：list-style-type:none。即可。

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

答：
class：用于概念上相似的元素，可以出现在同一页面上的多个位置。
id：具有唯一性，用于不同的唯一的元素。

例如样式表可以加入.content1 { color: red; background: #ff80c0 } 使用方法：class="content1"
id属性用于定义一个元素的独特的样式。如一个CSS规则#content2 { font-size: larger } 使用方法：id="content2"

id是一个标签，用于区分不同的结构和内容，就象你的名字，区分你和别人。
class是一个样式，可以套在任何结构和内容上，就象一件衣服；
概念上说就是不一样的：
id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
参考资料,还有这里.

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

答：
常用块级元素如下：
块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行内元素：span, strong, em, br, img , input, label, select, textarea, cite, 。

行内元素与块级函数的三个区别
1.行内元素与块级元素直观上的区别：
行内元素会在一条直线上排列，都是同一行的，水平方向排列块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上行内元素设置width无效，height无效(可以设置line-height)，margin左右有效，上下无效，padding左右有效，上下无效。
4.块级元素和行内元素的相关属性是display,其中块级元素对应于display:block,行内元素对应于display:inline.我们可以修改dispaly属性切换块级元素和行内元素。
5.<input>和<img>都是行内元素，但是它们是可以设置宽和高的。这里就涉及到可替换元素和不可替换元素。可替换元素一般都是行内元素。

附录：

所有的块级元素和行内元素
块级元素（block element）

内联元素(inline element)

可替换元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。

参考资料1
参考资料2

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

答：
1.display：block将元素定义为块级元素。元素占满整行100%，可设置width,height、margin和padding属性
2.display：inline将元素定义为行内元素，对width,height无效，line-height有效，margin和padding属性水平方向有效，垂直方向无效。一行排满才会换行，宽度随元素内容而变化。
3.display: inline-block的作用是行内快元素。元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。

一目了然

参考资料1;参考资料2;参考资料3.

六，下面代码是做什么的？抄写一遍下面的代码，注意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>

答：网页实现了一个简单的页面布局。主要分为三大区块，分别为头部的header区，中间部分的content区（又分为侧边栏aside和主体区域main），以及底部区域footer。
网页中统一的样式布局全部用class（.wrap）来定义。id作为区域划分的标签使用。使页面的布局和样式清晰明了。

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

答：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。

写HTML代码时应注意什么？

参考资料：这里还有这里

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

答：<form> 标签用于为用户输入创建 HTML 表单,表单向服务器传输用户数据。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset和 label 元素 等。
<form>标签属性：

附录：常见的input类型
有哪些常用的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 程序。

所有的input可以添加属性 disabled来禁用输入
参考资料1，参考资料2,参考资料2,参考资料3。

九，post 和 get 方式的区别？

答：

  1. GET提交，请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，多个参数用&连接；例 如：login.action?name=jierengu&password=idontknow&verify=%E4%BD%A0 %E5%A5%BD。如果数据是英文字母/数字，原样发送;如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如： %E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。
    POST提交：把提交的数据放置在是HTTP包的包体中。上文示例中红色字体标明的就是实际的传输数据
    因此，GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变

拓展阅读：参考资料1,参考资料2，参考资料3

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

答：

  1. name属性用于规定input元素的名称，
十一，<button>提交</button> / <a class="btn" href="#">提交</a> / <input type="submit" value="提交">三者有什么区别？

答：
<button>提交</button>是一个单纯的按钮，点击以后页面没有任何动作。
<a class=“btn” href="#">提交</a>是一个伪装成按钮的超链接，点击以后可以进入另外的页面。
<input type=“submit” value=“提交”>，是表单的按钮，用来向服务器提交表单数据。

十二，radio 如何 分组?

答：设置 name 属性，名称相同的为一组。
placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

十三，placeholder 属性有什么作用?

答：placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
姓名：<input type="text" name="姓名" placeholder="姓名"/>
密码：<input type="password" name="密码" placeholder="密码"/>
<input type="submit" />
</form>

</body>
</html>
效果
十三，type=hidden隐藏域有什么作用? 举例说明

答：
隐藏域的功能是用来储存一些表单资讯，而不想要直接显示在页面表单上。例如一些特定的参数，填写时间戳记，登入记录...等，有许多种的应用都可以使用隐藏栏位来记录。当表单提交的时候，隐藏域的值也会传递给后端的程序，每一个表单可以安插许多不同名称的隐藏域，传递各种表单信息。

<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<input type="text" size="25" value="Enter your name here!">
<input type="hidden" name="Language" value="English">
<input type="submit" name="submit" value="提交">



</div>
</form>
</body>
</html>


![效果](https://img.haomeiwen.com/i2784414/eb70a8b7c85b6c07.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
上一篇下一篇

猜你喜欢

热点阅读