HTML/CSS知识要点总结

最新推荐文章于 2022-10-28 21:41:06 发布

微风拂过树梢_夏

最新推荐文章于 2022-10-28 21:41:06 发布

阅读量403

点赞数

分类专栏：工作事务文章标签： html 网页设计语言性能 xhtml

本文链接：https://blog.csdn.net/honest1120110/article/details/54572574

版权

工作事务专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML/CSS要点

1. HTML

　　html:超文本标记语言，是广泛用于网页设计的一种语言。
　　
　　一般html语句格式如下：
　　
　　一般语句格式如下
　　

1.1 ！DOCTYPE声明

　　一般！DOCTYPE有以下4种格式：

//(推荐)过渡的(Transitional)
//可能会提升性能，实在没有办法时可以用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



//严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



//框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">



//简便DOCTYPE声明方法
//做新网站最常用

<!DOCTYPE html>

　　DTD意思相当于电脑文件的后缀，它是对后面所有内容的语法框架的一个声明，就像给定C#，你后面的语法结构就不能出现java。给定严格的DTD就可能会不支持一些html或者js、Jquery的一些用法。
　　第四个声明方法就表示支持所有html的用法，所以兼容性较好。做网站一般用这个。
　　

1.2 head标签的用法

　　head包含标签meta,title,link,base,script等常用标签。
　　
　　title标签-title是网页唯一标题标签：
　　

　　
　　 base标签-base是网页默认打开方式声明标签:
　　　　

主要是给定固定的主目录，如下图中img路径直接选取到了http://static.cnblogs.com/images/logo_gray.gif

　　
　　
　　link标签-link是一个链接标签，包括外部css文件引用、js文件引用、favicon.ico图标引用等作用:
　

//link标签只能放在head里面
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

　　link里面有多个属性，常用的是上面的三个，rel表示指定被链接文件的与当前文件的关系(上述代码上指定的是样式表)，type是文件语言类型，href是链接到需要的文件。
　　
　　
　　meta标签-meta包含广泛的内容标签，如网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签
　　
　　meta标签属性有name、http-equiv、content、scheme，name和http-equiv要和content连用，如：
　　

//定义一组关键字，使用keywords就代表后面content里面所有的内容
<meta name="keywords" content="HTML,ASP,PHP,SQL">

　　http-equiv的使用和name一样，不过两者能够定义的属性不一样。详细见（http://www.w3school.com.cn/tags/tag_meta.asp）
　　
　　

　　style标签-style直接嵌入网页的js或css文件标签。
　　style标签是在head中定义一些样式：
　　

<style type="text/css">
h1 {color:red}
p {color:blue}
</style>

　　
　　script标签-script来用引用其他位置的js文件：
　　script标签可以放在head里面，也可以放在body里面。放在body里面时是写一些javascript语句，放在head里面时多用于引用其他位置的js文件：
　　

<script type="text/javascript" src="jsname.js"></script>

引用js文件用script标签，其他引用都用link标签
图片等大文件或js文件用scr引用，其他用href引用

1.3 body内重要标签介绍

　　
　　body是一个页面的主体，页面需要显示的东西基本都在这里面，这里重要的标签、属性有form、input、select、checkout、label、radio、textarea、a、p、table等标签和属性，下面一一介绍：
　　
　　form表单标签
　　
　　form标签一般会和input等控件标签一起用，作用是定义事件、指定数据传输方式等：

　　<form action="" method="get” target=“aframe”> </form>
　　

　　数据传输有post/get，get一般是将传输值设置到url中传输不保密，传输数据不能太长。
　　post直接将值传到后台，并不显示在url中，像填用户密码时。次者，其长度可以非常长。

　　
　　 input标签
　　
　　input标签一般用来显示各种控件，有如下一些属性：

    button        
    checkbox
    file
    hidden
    image
    password
    radio
    reset
    submit
    text

　　示例如下：
　　

<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

　　
　　
　　select标签
　　
　　该标签是下拉框控件，示例如下：
　　

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

　　
　　
　　checkbox多选框
　　
　　设置一系列name一样的checkbox控件，即是一个多选框控件。
　　同理，多个name一样的radio控件是一个单选框控件。

<form action="" method="get"> 
您喜欢的水果？<br /><br /> 
<label><input name="Fruit" type="checkbox" value=“1" />苹果 </label> 
<label><input name="Fruit" type="checkbox" value=“2" />桃子 </label> 
<label><input name="Fruit"  type="checkbox" value=“3" />香蕉 </label> 
<label><input name="Fruit" type="checkbox" value=“4" />梨 </label> 
</form>

　　
　　
　　lable标签
　　
　　lable标签除了显示一个文本外还可以用for关联某个控件，如：
　　

<input name="sex" id="man" type="radio" value="" /> 
<label for="man">男</label>

　　上面lable的字‘男’和radio控件绑定了，点击‘男’字相当于点击radio控件。
　　
　　
　　textarea标签
　　
　　大文本框，就是一个可以设置高和宽的text，高和宽都是以字数计算。
　　

<textarea name="DIVCSS5" cols="30" rows="4">   </textarea>

　　
　　br和p标签
　　
　　br是换行标签，p是段落标签，两个p之间也有换行，不过和br的却别还是很大的。p之间的换行带行距，而br换行是按默认行距。一般p换行排版会比较好看。
　　
　　
　　Table标签
　　
　　表格标签，内部需要tr、td标签支持，可以设置高宽，边框等属性。
　　
　　
　　ID属性和Class属性
　　

 <style type="text/css">
    #header{ background-color:#A8A8A8;} 
    .abc{font-weight:bold;} 
    .def{width:100px;}
    .cdf{color:Red;}
 </style>

　　#号开头表示id，.开头表示class，引用时分别用id=‘ ’，class=‘ ’引用即可。
　　

2. CSS

　　
　　css是样式表，是控制网页中内容的颜色、字体、文字大小、宽度、边框、背景、浮动等样式来实现各式各样、花样百出的网页样式的统称。
　　css的用法有两种，分别是用style标签内嵌css代码，再者是用link链接外部css代码。
　　

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="theme.css" />
    <style type="text/css">
    #header{ background-color:#A8A8A8;} 
    .abc{font-weight:bold;} 
</style>
</head>

　　
　　css选择器
　　除了设置固定的id，class作为样式外，css选择器提供了更加丰富的样式表现形式。

标签选择器：
p{font:12px;} 
id选择器：
#menubar{  color:#c00;  }  
类（class）选择器：
.da1{  color:#f60; }  
群组选择器：
.www_52css_com,#mainpspan{color:#f60;}
后代选择器：
#sider h3{...}

　　如上代码，#号表示id选择器，.号表示类选择器，空格表示后代选择器，多个一起的是群组选择器。通过定义选择器，方便在其他标签或内容中直接选择想要的样式。其语法如下：
　　

 <style>
    div {font-size:12px;}
    .bigfont{font-size:16px;}
    #t1{ color:Red;}
    .x1, .x2{ border:solid 1px blue;}
    div span .b1{background-color:Red;}
    div.b2{background-color:Yellow;}
    a{color:#000000;text-decoration:none; }  
    a:hover{color:#BA2636;text-decoration:underline;} 
    a.a1{color:red;text-decoration:underline; }  
    a.a1:hover{color:blue;text-decoration:none;} 
    </style>
 <div>
        我是12px
        <div class="bigfont">
        我是16px
        </div>
        <div id="t1" class="x1">
        我是红的
        </div>
        <div class="x2">
            我有蓝框<br />
            <span class="b1">我是b1  <span class="b1"> 我也是b1</span></span>
        </div>
        <span class="b2">我是b2</span>
        <div class="b2">我也是b2</div>
        <a href="de.aspx">我一个链接</a> <a class="a1" href="de.aspx">我也一个链接</a>
    </div>

　　运行结果如下图
　

　　多个样式冲突时，优先级顺序为，自定义最优先，次者id选择器，再者类选择器，末者标签选择器。
　　
　　
　　 文字属性　
　　

　　font-family：设置css字体：设定时，需考虑浏览器中有无该字体。
　　
　　font-size： 设置css字体大小：font-size:12px;
　　
　　font-weight： css字体粗细-css加粗样式：除了normal（正常）、bold（粗体）、bolder（特粗）、lighter（细体）外，还有9种以像素为度量为单位的设置方式。 
　　
　　line-height： css行高：行距。注意，行距只能以是字体大小值为 
　　
　　text-decoration： 修饰：用于控制链接文本的显示形态，css下划线（underline）、无下划线（overline）、css删除线（line-through）、闪烁（blink）和无（none，使上述效果均不会发生）等5种修饰方式。
　　
　　text-align：文本对齐:共有左对齐（left）、右对齐（right）、居中（center）和均分（justify）等4种选择
　　
　　text-indent： 文字缩进：控制块的缩进程度。
　　
　　white-space：空白间距(空格)：在HTML中，空格是被省略的；在CSS中则使用属性（white-space）控制空格的输入。共有正常（normal）、保留（pre）和不换行（nowrap）等3种选择。

　　背景属性
　

　　background-color- 背景颜色：设置背景颜色。
　　
　　background-image-背景图像：设置网页背景图像。 
　　
　　background-repeat - 背景重复：控制背景图像的平鋪方式，有不重复（no-repeat）、重复（repeat，沿水平、垂直方向平铺）、横向重复（repeat-X，图像沿水平方向平铺）和纵向重复（repeat-Y，沿图像垂直方向平铺）等4种选择。 
　　
　　background-attachment - 附加：用于控制背景图像是否会随页面的滚动而一起滚动。有固定（fixd，文字滚动时，背景图像保质固定）和滚动（scroll，背景图像随文字内容一起滚动）两种选择。
　　
　　background-position - 水平位置/垂直位置：确定背景图像的水平、垂直位置。共有左对齐（left）、右对齐（right）、顶部（top）、底部（bottom）、居中（center）和值（自定义背景图像的起点位置，可使用户对背景图像的位置做出更精确的控制）等6种选择。

　　
　　
　　高度和宽度属性
　　
　　设置一个本文的宽度有两种方法，一是直接设置固定的长度，一是给出网页宽度的百分比，示例如下：

<style type="text/css"> 
body{ margin:0 auto; text-align:center;} 
.yangshi1{ width:200px; border:1px solid red; margin:0 auto;} 
.yangshi2{ width:80%; border:1px solid #003; margin:0 auto;} 
</style>

　　高度和宽度有区别，因为网页基本有下拉，所以定义百分比没有意义，实习代码中也没有作用，只有通过设置固定长度来确定高度。
　　
　　
　　内外间距
　　
　　外间距是指一个控件自己四边与其父控件的距离，是在该控件中设置。属性是：margin，设置4个距离的顺序为顺时针方向。
　　内间距是指一个控件自己四边与其子控件的距离，在该空间中设置。属性是padding，设置4个距离的顺序是顺时针方向。
　　还有一个相似的属性，边框(border)，就是设置一个框把文本等控件框起来，设置4个距离也是顺时针方向
　　
　　
　　float浮动块
　　
　　设置float属性后，被设置该属性的控件组成一个块。float属性有right和left两个，表示靠左还是靠右。
　　
　　其他属性
　　
　　

　　text-overflow参数值和解释：
　　clip : 　不显示省略标记（...），而是简单的裁切
　　ellipsis : 　当对象内文本溢出时显示省略标记（...）

　　white-space:nowrap  强制文本不换行

　　z-index层重叠顺序
　　 .divcss5-1{z-index:10;background:#000;left:10px;top:10px} 
    .divcss5-2{z-index:20;background:#F00;left:20px;top:20px} 
    .divcss5-3{z-index:15;background:#00F;left:30px;top:30px}

    display属性
    //display:none和visibility:hidden隐藏的效果不同，前者去掉了被隐藏元素的原始位置，后者保留。
    1、div{display:block} 有换行作用。
    2、div{display:none } 隐藏对象及对象内容。
    3、div{display:inline } 在一排显示

微风拂过树梢_夏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML/CSS知识要点总结

HTML/CSS要点1. HTML　　html:超文本标记语言，是广泛用于网页设计的一种语言。　　　　一般html语句格式如下：　　　　　　1.1 ！DOCTYPE声明　　一般！DOCTYPE有以下4种格式：//(推荐)过渡的(Transitional)//可能会提升性能，实在没有办法时可以用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
复制链接

扫一扫