HTML4

作者: 婷楼沐熙 | 来源:发表于2016-06-28 19:08 被阅读121次

最近还莫名其妙的生病了，好受打击，希望能顺顺利利的学完我的前端。加油！

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

有序列表 ol（ordered list）
有序列表，顾名思义，就是有顺序的列表，项目列表使用数字进行标记，适用于有前后循序的列表。有序列表始于<ol>标签，每个列表项始于<li>标签。

<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

无序列表 ul（unordered list）
无序列表就是没有顺序的列表，项目列表使用原点进行标记，适用于前后没有明确顺序的列表。无序列表始于<ul>标签，每个列表项目始于<li>标签。

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

自定义列表 dl（defined list）
自定义列表不仅仅是列表，更是项目及其注释的组合。自定义列表始于<dl>标签，每个列表项始于表头<dt>，列表项的说明始于表内容<dd>。

<dl>
    <dt>表头</dt>
    <dd>内容</dd>
    <dd>内容</dd>
</dl>

总的来说，列表无论用上面三种的哪一种都可以实现，关键要看列表要怎么展示出来，然后选择最适合的方式。有序列表适用于明显的排列顺利，而且次序不能乱；无序列表最常见，适用于简单的列出，表示并列关系；自定义列表有的时候可能会更简单，更精准，语义化更好。
列表是可以嵌套的，下面写个简单的实例，其中也含有列表嵌套：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="U-XA-Compatible" content="IE=Edge chrome=1">
    <title>列表</title>
    <style type="text/css">
      ol[class="daily life"]{
      color: rgba(255,200,10,0.5);

    }
    .plan{
        color: blue;
    }
    .steps{
        color: #0ff;
    }
    .hobby{
        color: rgb(255,0,0);
    }
    </style>
</head>
<body>
    <ol class="daily life">
        <li>刷牙</li>
        <li>洗脸</li>
        <li>吃饭</li>
    </ol>
    <ul class="about study">
    <li class="plan">
            <h3>规划</h3>
            <ul>
                <li>制定出每天要完成的任务</li>
                <li>每天一小步，一步步去实现</li>
            </ul>
        </li>
        <li class="steps">
            <h3>学习步骤</h3>
            <ol>
                <li>先看视频</li>  
                <li>把问题整理成博客</li>
                <li>对于重要的知识点，自己要再去多查阅资料，善于总结</li>
            </ol>
        </li>
    </ul>
    <dl class="hobby">
        <dt>兴趣爱好</dt> 
        <dd>旅游</dd>
        <dd>交朋友</dd>
    </dl>
</body>
</html>

效果预览地址：预览
ps:如果class名称为多个单词，除了使用上面的命令[class="A B"]外，还可以使用[class=A][class=B]。

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

要去除列表前面的点或者数字，使用list-style: none;就可以实现。

去除列表的点和数字

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

class和id的区别
对于css来说：
- id和class都是选择器，不同的是id优先级高于class
- 在css里面，id前缀要加“#”，class“.”
对于html来说：
- id具有唯一性，class具有普遍性，可以重复使用
- id具有锚点功能，如果浏览器有个地址#xxxx，页面会自动跳到id=xxxx的元素上面
从概念上来说，id是先找到结构或者内容，然后才是定义样式，而class是先定义好某种样式，再来给多个结构或者内容。
什么时候用id什么时候用class
id是identity的缩写，形象化来说，比如说我是学生，class代表我的班级，id代表我的学号。班级里的所有人都可以称为是这个班级的，但是每个人的学号是唯一的。
因为id的唯一性，所以尽量在结构内部使用，通常来说用于页面布局；id多用于Javascript操作DOM。
class可以重复，一般在结构内部使用，用于样式定义；class可以通过给多个元素赋予同一class，批量操作来设置css。

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

块元素就像是一个段落，是其他元素的容器元素，可以容纳其他块元素或者行内元素；行内元素，也叫内联元素或者内嵌元素，则可以比作一个单词，只能够容纳文本内容或者其他的行内元素。
块级元素（block element）会占据一整行空间，块级元素之间会另起一行显示；行内元素（inline element）只占用自身的内容宽度，可以并排显示。形象的来看，利用审查元素，当你鼠标放置在块级元素上面时，选中的是元素所在的一整行；而放置在行内元素时，只选中了元素所在内容的那一部分。
对于行内元素，手动设置宽高是无效的，它本身的高度是由自身决定的；
行内元素的margin和padding的上下方向不占据空间（若元素加了边框，边框会上去，但本身不占据空间），margin和padding的左右方向会有效果。

行内元素的宽高和内外边距
块级元素常用标签：p,div,dl,ol,ul,h1-h6,table等
行内元素常用标签：a,img,span,input等

提到块级元素和行内元素，就必须要提到display，它可以改变元素的展示形式，比如说把块级元素变成行内元素，这就是下面要提到的内容。

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

display: block
表示把此元素作为块级元素显示，具有块级元素的性质。
display: inline
表示把此元素作为行内元素显示，具有行内元素的性质。
display: inline-block
表示此块级元素既有行内元素的性质，可以水平排列，又具有块级元素的性质，可以设置上下左右的边距，但缺点是IE8以下不能使用。当然要实现这样的效果也可以使用浮动来实现。
display: none
隐藏，脱离文档流。

ps：text-align用于块级元素，一个div或者段落上，对内部行列元素（文字或者图片等）生效。

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

上面的代码主要是把页面分为三个部分：头部、内容、底部。头部里面有三个导航栏，内容有侧边栏和中心区块，底部就是footer。三大块由不同的id命名，即id用来划分大的区块，内部使用class区分，这里命名要注意语义化，命名风格要保持统一。在内部结构中，三个区块结构里面共用了一个class，也就是wrap，在样式设置中设置了它的宽度（防止撑满一行）和外边距（水平居中）。

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

语义化就是要根据情况选择正确的标签，恰当的利用好标签的作用。
命名要有一定的含义，让人一看到就能知道是什么，这样便于维护和阅读。
命名风格要保持统一，比如说使用下划线就坚持使用。

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

form表单是用来把用户输入的数据提交到后台。
其中：name:表单提交时的名称；action提交到的地址，如果不写action，信息就会提交到当前页面；method提交方式（get和post），如果不写，默认的是get

    <form name="myForm" action="/test/6.php" method="post">

常见的input标签
type="text"，用于输入文本。placeholder属性（可选）展示的是输入框里的提示，maxlength（可选）限制最大输入长度。

<input name="username" type="text" placeholder="用户名" maxlength=10 />

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

<input name="password" type="password" placeholder="密码" />

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

<input name="upfile" type="file" >

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

<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女

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

<input type="checkbox" name="bike" checked/>自行车
<input type="checkbox" name="car" />汽车

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

<textarea name="maneywords" maxlength=10 placeholder="ddd"></textarea>

type="hidden"，隐藏域，用户看不到，用于暂存数据或者安全性校验。

<input name="url_delete" type="hidden" value="/delete.php" />
<input name="csrf_token" type="hidden" value="123" />

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

<input name="submit" type="submit" value=“提交” >

下拉列表框

  我的car:
              <select name="mycar">
              <option value="volvo">Volvo</option>
              <option value="audi">audi</option>
              <option value="opel" selected>opel</option>

九.post 和 get 方式的区别？

比较的方面	post	get
提交数据的方式	提交的数据看不到	会把提交的数据组装成URL，可以看得到
数据的大小	用于大量数据的提交	用于少量数据的提交
限制	post理论上无限制，受服务器限制	get最多提交1k数据，浏览器的限制
历史记录	提交的数据不会在历史记录当中	提交的数据会存在在历史记录当中
刷新	数据会被重新提交	没有影响
编码	没有限制	只允许 ASCII 字符
安全方面	更安全，因为数据不会组装成 URL，不会存在与浏览器历史记录当中	不安全，提交的数据会组装成URL，而且会有历史记录

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

name是表单提交时的名称，如果它的值相同，则表示它们是一组，可以实现单选。复选框当中，可以把name值设置成一个数组，比如：

爱好：
<input type="checkbox" name="love[]" value="dota" checked />dota
<input type="checkbox" name="love[]" value="travel" checked />旅游

这样在命名的时候比较方便，后台也会给对应的变量选择对应的输入数据。需要注意的是，input都要有name属性。

十一.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？

<button>提交</button>
是一个普通的提交按钮，需要绑定JS事件，button里面可以加一些比如文字、图像等内容。
<a class="btn" href="#">提交</a>
把一个链接放在提交按钮里面，点击提交会跳转到另一个页面，但是不会向后台提交数据。
<input type="submit" value="提交">
可以提交一个表单的数据。

十二.radio如何分组?

通过设置name值实现分组，如果name值相同，则表示它们是一组，可以实现单选。

<input type="radio" name="major" value="communication engineering" />通信工程
<input type="radio" name="major" value="network engineering" />网络工程

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

placeholder是用于显示在输入框提示的信息。

评论：
<textarea name="comment" maxlength="30" placeholder="评论"></textarea>

placeholder

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

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

隐藏域

虽然用户看不到，但向后台提交的数据中其实包含了check=1234。

十五.iframe

iframe 也是html的一个标签，在一个页面中嵌入另一个网页，创建包含另外一个文档的内联框架。iframe的属性有以下几种：

frameborder：可用值为1和0，规定是否显示框架周围的边框
width：frame的宽度
height：frame的高度
src：引入的资源（页面、图片等）url

<body>
    <iframe src="http://baidu.com" name="myPage"></iframe>
    <p><a href="http://www.w3cschool.cc" target="myPage">百度</a></p>
    <p><a href="http://book.jirengu.com" target="myPage">饥人谷</a></p>
</body>

效果图

十六.代码

写出如下form表单，性别和取向是单选，爱好是多选。

要实现的界面
效果预览地址：预览效果
代码的github链接：Github

HTML4

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

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

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

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

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

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

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

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

九.post 和 get 方式的区别？

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

十一.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？

十二.radio如何分组?

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

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

十五.iframe

十六.代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客

HTML4

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

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

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

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

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

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

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

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

九.post 和 get 方式的区别？

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

十一.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？

十二.radio如何分组?

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

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

十五.iframe

十六.代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客

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