首页 > > 网页制作 > css >

Html知识点

2018-06-27 09:03:45来源：博客园阅读 ()

1、企业应用计算模式主要有：CS模式（客户端/服务器）和BS模式（浏览器/服务器模式）

2、html:超文本标记语言。以标记和子标记描述网页元素。
　　http：超文本传输协议。

3、网页以*.html作为后缀名。
　　网页以<html>作为根元素，该元素中包含<head>和<body>两个子元素。
　　 <head>标记一般用于设置网页标题、设置网页编码、书写或导入样式、书写或导入JS等。
　　<body>标记用于描述网页内容。

4、<meta charset="utf-8">设置网页编码集

5、网页注释：
css注释：/* */
js注释：//单行 /* */多行

6、标题标记：<h1>~<h6>
　　段落标记<p>
　　无序列表：
　　<ul>
　　　　<li>第一选项</li>
　　　　<li>第二选项</li>
　　</ul>
　　有序列表：
　　<ol>
　　　　<li>第一选项</li>
　　　　<li>第二选项</li>
　　</ol>

7、在网页中有些符号必须以特殊的符号代替：
　　空格： 
　　小于：<
　　大于：>

8、超链接<a href="……"></a>
　　href表示需要跳转的页面路径。相对于本网页而言，如果跳转页面和本网页在同一目录，则直接写文件名。
　　如果跳转页面在本网页所在目录的子目录下，则书写为html/aa.html。
　　如果跳转页面在本网页的上级目录，则书写为../aa.html。

9、图片：<img src="" width="" height=""> src属性链接图片路径。规则和超链接链接路径一样

10、表格<table>，<thead>表示表头，<tbody>表示表格内容。

11、框架网页iframe：
　　<iframe src="html/aa.html" width="x" height="x" name="main"></iframe> 其中src为框架网页链接路径，name为框架网页名称
　　<a href="html/bb.html" target="main">显示</a> 点击超链接时，改变名称为main的框架网页内容。

12、块级元素和内嵌元素：
　　块级元素定义的文本是换行的，而内嵌元素定义的文本是不换行的。
　　常见的块级元素包括：div、blockquote、列表元素（dl、ol、ul）、fieldset、form、h1-h6、hr、p、pre、table等。
　　内嵌元素包括：span、a、img、label、所有的表单输入元素、iframe、object等。

13、表单<form action="" method="">：
　　action表示表单提交的服务器URL地址。
　　method表示提交方式。常用的是GET和POST。
　　GET方式会在地址栏显示提交的表单数据，POST不会显示相对安全。

14、表单元素：
　　<input type="text" name="userName" value="aaa">文本框
　　<input type="password" name="pwd">密码框
　　<input type="radio" value="1" name="sex">单选框，当name一致时，可以互斥。提交时，会将选中单选框的value值提交给服务器
　　<input type="checkbox" value="1" name="like">复选框，提交时，会将选中单选框的value值提交给服务器。
　　<input type="hidden" name="id">隐藏表单，页面上不显示，但表单提交时，会将该表单数据提交给服务器。
　　<input type="file" name="face">文件表单，可以选择本地文件
　　<select name="edu">
　　　　<option value="1">高中</option>
　　　　<option value="2">大专</option>
　　</select>
　　下拉框，提交时，会将选中项option的value值提交给服务器。
　　<textarea col="10" row="5"></textarea>多行文本框
　　<input type="submit"> 提交按钮，可以将表单数据提交给服务器
　　<input type="reset"> 重置按钮，将表单数据还原成初始值
　　<input type="image" src=""/>图片按钮，作用类似于submit。但可以将按钮做成图片方式
　　<input type="button"> 命令按钮，主要书写javascript事件

15、id和name的区别：
　　id表示网页元素在网页中的唯一标识，不能重复，可以用于任何网页元素，它的值不会随表单提交给服务器
　　name一般用于表单元素，可以重复，它的值会随表单提交给服务器。

16、readonly和disabled的区别：
　　readonly表示只读，只能用于文本框，不能修改内容，它的值可以随表单提交给服务器
　　disabled表示该元素不可用，不响应事件，不能修改内容。它的值不能随表单提交给服务器。

17、CSS层叠样式表，使用的方式有：
　　外部样式表：<link rel=“stylesheet” href=“” />在 href中导入css文件路径。这种方式重用度好，可以用于多个网页

　　嵌入式样式表，可以在本网页中使用
　　<style type=“text/css”>
　　　　p{}
　　</style>

　　内联样式：<p style=“”></p>只能在当前元素中使用

　　层次的优先级别从大到小依次为：内联样式 > 嵌入样式表 > 外部样式表

18、CSS选择器规则：
　　元素选择器： p{} 表示所有的p标签均采用该样式
　　h1,h2{}：表示h1标签和h2标签均采该样式

　　类选择器： .aa{} 定义类选择器，通过class="aa"将当前元素应用该选择器，可以用于多个元素。

　　id选择器： #mm{} 定义id选择器，表示id为mm的元素采用该样式，只能用于一个元素。

　　包含选择器： div img{} 表示div元素下面所有的img子元素均采用该样式。

　　通配选择器： #mydiv *{} 表示id为mydiv下面所有的子元素均采用该样式。

　　伪类选择器： #data tr:hover{} 表示id为data的元素下面所有的tr子元素，在鼠标移上去时，采用该样式。

　　属性选择器： input[type=password]{}表示所有input标签中，type属性的值为password的元素，采用该样式。

　　优先级：
　　!important > id > class > element > 伪类 > *

19、在CSS盒模型中，我们可以控制四个不同的分层属性：
　　内容(content)：元素中的内容。
　　外边距（Margin）：代表元素外边的空间，这个控件将元素相互分开。
　　边框（Border）：位于元素的边距内和元素的边框距外之间的可配置的线。
　　内边距（Padding）：元素内容和元素边框之间的空间。

　　盒模型均可以用“上右下左”方式设置。如果仅给出两个或三个值，那么缺失边的属性值取与对边相同的值。

20、margin和padding：
　　margin是和border的距离；padding是内容和border的距离
　　margin是对外的，padding是对内的

　　对于margin:
　　水平盒子的间距为两个盒子间距的和
　　垂直盒子的间距为两个盒子间距的较大值

21、盒子的浮动，float:left左漂移，将块级元素转化为内嵌元素。clear:left清除左漂移。

22、定位属性：
　　static静态定位。表示按照HTML格式规则正常定位：
　　relative相对定位。相对于元素原始位置进行偏移
　　absolute绝对定位，是指某元素将定位在已经定位的父元素框架或浏览器窗口本身的左上角绝对位置。
　　fixed固定定位。类似 absolute，不过其包含块是视窗本身

23、显示属性：
　　在css中，有两个属性可以控制元素的显示和隐藏，即display属性和visibility属性
　　diplay='none'，元素不会占空间
　　visibility='hidden'元素会占用空间

表单：
readonly和disabled的区别

1.readonly表示只读，只能用于文本框，表示该文本框的内容不可以编辑，
表单提交时，readonly修饰的文本框，可以将值提交服务器。

2.disabled表示不可用。可以用于任何网页元素，表示该元素不可以使用，不可以编辑。同时不响应事件。
当表单提交时，disabled修饰的表单元素，不能将值提交服务器。

<fieladset></fieladset>（产生框）,包裹表单。

<legend></legend>一起使用。一个框的样式以及框的线上有个名字,包裹表单。

CSS：
CSS是层叠样式表（Cascading Style Sheets）的缩写，它用于定义html元素的显示形式，是一种格式化网页内容的技术。

导入CSS的方式：

1.内嵌式
<p style=""></p>
只能针对一个网页元素书写样式。

2.嵌入式
<style></style>
针对与本网页中的元素有效。一般放在<head></head>之间。

3.外连接
<link rel="stylesheet" href="css文件名">
可以在不同的网页中，引入样式表文件，重用度最好。一般也放在<head></head>之间。

样式表的层叠：
层次的优先级别从小到大依次为外部样式表嵌入式样式表内联样式

CSS选择器：

1.元素选择器
P{} 所有的p标签均采用该样式。
h1,h2{} 所有的h1标签和h2标签均采用该样式。

2.类选择器
.aa{} 所有加入类class="aa" 属性的元素均采用该样式，类选择器可以用于不同的标记。

3.id选择器
#myspan{}
id属性为myspan的元素采用该样式，由于id不能重复，id选择只能给一个元素加样式。

4.包含选择器
#imgDiv img{}(注意中间有空格)
id属性为imgDiv的元素中，所有的img元素均采用该样式。

5.通配选择器
#myDiv *{}
id属性为myDiv的元素中，所有的子元素均采用该样式。

6.伪类选择器
#data tr：hover｛｝
当鼠标悬停在id为tr的元素上时，该元素采用该样式。

opacity:透明度设置0-1之间；

input标签和focus一起使用：得到焦点

7.属性选择器
input[type=password] :
focus{

background-color: #cd5c5c;

}

8.CCS优先级

! import >id > class > element>伪类>*

9.CSS盒模型
在盒模型中，我们可以控制四个不同的分层属性：

1.内容（content）：元素中的内容

2.外边距（Margin）：代表元素外边的空间，这个空间将元素相互分开。

3.边框（Border）：位于元素的边距内和元素的边框距外之间的可配置的线。

4.内边距（Padding）：元素内容和元素边框之间的空间。
盒模型均可以用 “上右下左” 方式设置。如果仅给出两个或三个值，那么缺失边的属性值取与对边相同的值。

10.margin属性：

1.水平盒子的艰巨为两个盒子的间距为两个盒子间距的和

2.垂子盒子的间距为两个盒子间距的较大值
3.margin值可以设置为负值

margin是当前元素和border的距离；padding时内容和border的距离
margin是对外的，padding是对内的。

11.盒子之间的关系：
所谓标准留，就是指在不实用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。

1.文本元素按照从上到下、从左到右的格式布局

2.块级元素按照从上到下依次排列。

3.内嵌元素按照从左到右依次排列。

clear属性除了可以设置为了left和right之外，还可以设置为both，表示同时清楚左右两边的影响。

<span type="visibility: hidden>"隐藏内容，但会占用原来的位置<span>
<span type="display: none">隐藏内容，不会占用原来的为位置</span>

当内容超出div后设置overflow的值可以设置隐藏或出现滚动条或auto。

12.定位属性：
是position的值

1."static" 静态定位。表示按照html格式规则正常定位。

2.“relative” 相对定位。相对于元素原始位置进行偏移。

3.“absolute” 绝对定位，时值某元素将定位在已经定位的父元素框架或浏览器窗口本身的左上角绝对位置。

4.“fixed” 固定定位。类似absolute，不过其包含块时视窗本身。

margin：0 auto
居中显示

list-style:none
去掉无需列表的圆点

padding-top:5px;
内容到变卡ugnde距离

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有