049 HTML+CSS的总结

时间:2022-11-14 21:17:42
9、加入强调语气,使用<strong>和<em>标签 <em> 表示强调,<strong> 表示更强烈的强调
10、<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。
11、<q>标签,短文本引用 注意这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。
12、<blockquote>标签,长文本引用 居中长文本引用
13、使用<br>标签分行显示文本
14、为你的网页中添加一些空格 &nbsp;
15、认识<hr>标签,添加水平横线
16、<hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。
17、<address>标签,为网页加入地址信息 加入一行代码的标签为<code> pre原样输出
18、使用ul,添加新闻信息列表
19、给div命名,使逻辑更加清晰 caption标签,为表格添加标题和摘要
20、<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)
21、使用mailto在网页中链接Email地址 https://www.imooc.com/code/317
22、网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
23、1、type:
   当type="text"时,输入框为文本输入框;
   当type="password"时, 输入框为密码输入框。
    2、name:为文本框命名,以备后台程序ASP 、PHP使用。
    3、value:为文本输入框设置默认值。(一般起到提示作用)
24、当用户需要在表单中输入大段文字时,需要用到文本输入域。textarea
25、当用户需要在表单中输入大段文字时,需要用到文本输入域。
    语法:
     <textarea  rows="行数" cols="列数">文本</textarea>
    1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。
    2、cols :多行输入域的列数。
    3、rows :多行输入域的行数。
    4、在<textarea></textarea>标签之间可以输入默认值。
26、在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:
    语法:
    <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
    1、type:
       当 type="radio" 时,控件为单选框
       当 type="checkbox" 时,控件为复选框
    2、value:提交数据到服务器的值(后台程序PHP使用)
    3、name:为控件命名,以备后台程序 ASP、PHP 使用
    4、checked:当设置 checked="checked" 时,该选项被默认选中
27、注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。
28、label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
    语法:
    <label for="控件id名称">
    注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
29、外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
    <link href="base.css" rel="stylesheet" type="text/css" />
    注意:
    1、css样式文件名称以有意义的英文字母命名,如 main.css。
    2、rel="stylesheet" type="text/css" 是固定写法不可修改。
    3、<link>标签位置一般写在<head>标签之内。
30、包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。
31、包含(后代)选择器
包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:
    .first  span{color:red;}
    这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。
请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
32、更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
33、我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。
34、现在一般网页喜欢设置“微软雅黑”,如下代码:
body{font-family:"Microsoft Yahei";}

body{font-family:"微软雅黑";}
注意:第一种方法比第二种方法兼容性更好一些。
35、.oldPrice{text-decoration:line-through;}删除线
36、文字缩进:p{text-indent:2em;}
37、在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
38、什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
39、内联元素特点:
    1、和其他元素都在一行上;
    2、元素的高度、宽度及顶部和底部边距不可设置;
    3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
40、元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码:
    div{padding:20px 10px 15px 30px;}
    顺序一定不要搞混。
41、元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:
    div{margin:20px 10px 15px 30px;}
42、CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
    在网页中,元素有三种布局模型:
    1、流动模型(Flow)
    2、浮动模型 (Float)
    3、层模型(Layer)
43、层模型有三种形式:
    1、绝对定位(position: absolute)
    2、相对定位(position: relative)
    3、固定定位(position: fixed)
44、如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
45、如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
46、小伙伴们学习了12-6小节的绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:relative来帮忙,但是必须遵守下面规范:
    1、参照定位的元素必须是相对定位元素的前辈元素:
    <div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
    </div>
    从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。
    2、参照定位的元素必须加入position:relative;
    #box1{
        width:200px;
        height:200px;
        position:relative;        
    }
    3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
    #box2{
        position:absolute;
        top:20px;
        left:30px;         
    }

    这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以*设置了)。

欢迎关注公众号:phpstory