前端网页设计的知识点大全,必看
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
此时，把鼠标放置到元素上边，颜色就会切换为红色
13. CSS 分组选择符 多个标签使用逗号隔开： h1,span{color:red;} 相当于： h1{color:red;} span{color:red;}
14. CSS 继承 CSS 的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式
表格头部的一个单元格，表格表头
<table summary="表格摘要">...</table> 为表格添加摘要，但不会被浏览器显示出
来
<a href="目标网址" title="鼠标滑过时显示文本">链接显示文本</a> 链接标签
target="_blank"
网页将在新窗口中打开
mailto:
网页中邮件地址，可带多个参数
2. 认识 head 标签：
<head> <title>...</title>
网页标题
<meta>
<link> <style>...</style>
<script>...</script> </head>
4. 认识 body 标签：
<p>段落文本</p>
有三段就放三个<p></p>
<h1>标题文本</h1>
11. CSS 通用选择器 通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配 html
中所有标签元素： * {color: red;}
此时，所有元素的字体都为红色
12. CSS 伪类选择符 伪类选择符，它允许给 html 不存在的标签（标签的某种状态）设置样式，比如说我
们给 html 中一个标签元素的鼠标滑过的状态来设置字体颜色 a:hover{color:red;}
<meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/main.css"/>
head 定义文档头部，包含： title, script, style, link, meta body 是网页主要内容，包含：h1,h2-h6, p, a, img
1. 文本框（文本/密码）
<form> <input type="text/password" name="名称" value="文本" />
</form> type：有“text”和“password”两种类型
name：为文本框命名，方便后台 ASP 和 PHP 使用
value：文本框默认值，一般起提示作用
<table>表格内容</table>
创建表格
<caption>标题文本</caption>
为表格添加标题文本
<tbody>...</tbody>
若加此标签后，表格会一次性显示出来（而非网页加
载一点显示一点）
<tr>表格一行</tr>
表格中的一行
<td>表格单元格</td>
表格中的一个单元格
<th>表格表头</th>
<img scr="图片地址" alt="下载失败时替换文本" title="提示文本" />
5. 与用户交互：
语法：
<form method="传送方式" action="服务器文件"></form>
举例：
<form method="post" action="save.php">
<label for="username">用户名:</label>
<li>信息 2</li>
......
</ul> <ol>
ol-li 列表信息，带上序号
<li>信息</li>
<li>信息</li> ......
</ol> <div>排版内容<div>
排版中使用，相当于一个容器 确定逻辑部分：逻辑部分是页面上相互关联的一组
元素，如栏目版块
<div id="版块名称">…</div> div 带上 ID 号，使之更清晰
2. 文本域（多行文本）
<textarea rows="行数" cols="列数">默认文本内容</textarea>
colቤተ መጻሕፍቲ ባይዱ：多行输入域的列数
rows：多行输入域的行数
3. 单选框、复选框
<input
type="radio/checkbox"
value=" 值 "
checked="checked"/> type：radio 单选，checkbox 复选框
mailto: 邮箱地址
cc=
抄送地址
bcc= 密抄地址
;
多个邮箱地址
subject=邮件主题
body= 邮件内容
完 整 举 例 : <a href="mailto:yy@ ?cc=aa@ &bcc=bb@ &subject=
主题 &body=邮件内容">发送邮件</a>
不仅应用于某个特定 html 标签元素，而且应用于其后代 如： p{color:red;} /*可被 span 继承*/ p{border:1px solid red;} /*此时，span 将不继承，边框显示红色*/
15. CSS 特殊性（权值） 权值： p{color:red;} /*权值为 1*/ p span{color:green;} /*权值为 1+1=2*/ .warning{color:white;} /*权值为 10*/ p span.warning{color:purple;} /*权值为 1+1+10=12*/ #footer .note p{color:yellow;} /*权值为 100+10+1=111*/ 注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有 0.1，所
内联式 > 嵌入式 > 外部式 就近原则，嵌入式>外部式有一个前提：嵌入式 css 样式的位置一定在外部式的 后面
以上规则适用于相同权值的情况 8. CSS 类选择器
语法：
.类选器名称{css 样式代码;} 举例：
<style type="text/css"> .stress{
color:red; } </style> 注意：前边的小圆点是必须要有的 使用： <span class="stress">胆小如鼠</span> 9. CSS ID 选择器 语法： #ID 选择器名称{css 样式代码} 举例： #setGreen{color:green;} <span id="setGreen">胆小如鼠</span> 区别： 起始于 '.' 与 '#' 调用时 class= 与 id= ID 选择器只能在文档中使用一次，类选择器则可以使用多次 一个元素可以使用多个类选择器同时设置多个样式，而 ID 选择器是不可以的， 如 <span class="stress bigsize">三年级</span> 10.CSS 子选择器 还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一 代子元素。举例： .food>li{border:1px solid red;} 若大于符号换成空格( ),用于选择指定标签元素的所有后辈元素，举例： .first span{border:1px solid red;}
<br/>
换行
<hr/>
水平横线
空格
<address>地址信息</address> 地址信息，通常用于公司地址显示
<code>代码内容</code>
代码，通常是一行内
<pre>多行代码</pre>
多行代码,你需要在网页中预显示格式时都可以使用
它
<ul>
ul-li 列表信息，以圆点显示
<li>信息 1</li>
<select multiple="multiple"> <label for="book>看书</label>
name=" 名 称 "
<option value="看书" id="book">看书</option> <option value="旅游">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> <input type="submit" value="提交"> <input type="reset" value="重置" /> </form> value：向服务器提交值 selected：设置 selected="selected"时，默认选中 multiple：multiple="multiple"时，可以使用 Ctrl 多选，但很丑 label：为了改进鼠标易用性，鼠标点击文本时，选择上 Radio
以可以理解为继承的权值最低。 层叠： 相同权值时，最后一个将被应用 重要性： 相同权值时，使用 !important 将得到最高权重，如 p{color:red!important;} 样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，
使用 !important 优先级比 用户自己设定 还高
<link>标签引入，如： <link href="base.css" rel="stylesheet" type="text/css" /> href: .css 文件路径 rel 和 type: rel="stylesheet" type="text/css" 是固定写法，不能改
三种方法的优先级：
value：提交数据到服务器的值，后台 PHP 处理使用
name：为控件命名，以备后台程序 ASP 和 PHP 使用
checked：checked="checked"时，此选项默认被选中 注意：同一组的单选按钮，name 取值一定要一致
4. 下拉列表框 <form action="save.php" method="post" > <label>爱好:</label>
h1-h6 共 6 个标题分级
<em>斜体文本（强调）</em> 斜体文本内容
<strong>粗体文本</strong> 粗体显示文本内容
<span>单独样式文本</span> 没有语义的，它的应用就是为了 设置单独的格式用
的
<q>引用的文本</q>
引用的文本内容，会自动加上双引号
<blockquote>大段引用</blockquote> 引用大段的文本内容，文本前后会加上缩进
7. CSS 样式分类： 1. 内联式 <p style="color:red;font-size:12px">这里文字是红色。</p> 2. 嵌入式 较通用的一类，CSS 样式放置在<style>标签中，而<style>通常要放置在<head>内 <style type="text/css"> span{ color:blue; font-size:12px; } </style> 3. 外部式 把 CSS 代码写到一个单独的外部文件中，以.css 扩展名结尾，在<head>内使用
<input type="text" name="username" /> <label for="pass">密码:</label>
<input type="password" name="pass" /> </form>
表单控件：
文本框、文本域、按钮、单选框、复选框
method: post/get
16. CSS 文字排版 1. 字体 body{font-family:"宋体";} body{font-family:"Microsoft Yahei";} 2. 字号，颜色 body{font-size:12px;color:#666} 3. 粗体 p span{font-weight:bold;} a{font-weight:bold;} 4. 斜体 p a{font-style:italic;} p{font-style:italic;} 5. 下划线 p a{text-decoration:underline;} 6. 删除线 .oldPrice{text-decoration:line-through;} 7. 缩进 p{text-indent:2em;} /*2em 表示两倍文字大小*/ 8. 行间距 p{line-height:1.5em;} 9. 字间距、字母间距 h1{letter-spacing:50px;word-spacing:50px;} /*分别是字母、单词间距*/ 19.对齐 h1{text-align:center;} /*left、right 和 center*/
6. 认识 CSS 样式： CSS：层叠样式表（Cascading Style Sheets），主要用于定义 HTML 内容在浏览器内的显
示样式 语法： 选择符{ 属性: 值} 举例：
p{ color: blue} 选择符：又称选择器，指明要应用样式规则的元素，如<html>、<body>、<h1>、<p>、 <img>... 声明：指的是冒号”:“ 多条声明：使用分号”;“隔开，最好每行都加上分号 注释：CSS 使用 /**/，HTML 注释则使用<!--内容-->
13. CSS 分组选择符 多个标签使用逗号隔开： h1,span{color:red;} 相当于： h1{color:red;} span{color:red;}
14. CSS 继承 CSS 的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式
表格头部的一个单元格，表格表头
<table summary="表格摘要">...</table> 为表格添加摘要，但不会被浏览器显示出
来
<a href="目标网址" title="鼠标滑过时显示文本">链接显示文本</a> 链接标签
target="_blank"
网页将在新窗口中打开
mailto:
网页中邮件地址，可带多个参数
2. 认识 head 标签：
<head> <title>...</title>
网页标题
<meta>
<link> <style>...</style>
<script>...</script> </head>
4. 认识 body 标签：
<p>段落文本</p>
有三段就放三个<p></p>
<h1>标题文本</h1>
11. CSS 通用选择器 通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配 html
中所有标签元素： * {color: red;}
此时，所有元素的字体都为红色
12. CSS 伪类选择符 伪类选择符，它允许给 html 不存在的标签（标签的某种状态）设置样式，比如说我
们给 html 中一个标签元素的鼠标滑过的状态来设置字体颜色 a:hover{color:red;}
<meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/main.css"/>
head 定义文档头部，包含： title, script, style, link, meta body 是网页主要内容，包含：h1,h2-h6, p, a, img
1. 文本框（文本/密码）
<form> <input type="text/password" name="名称" value="文本" />
</form> type：有“text”和“password”两种类型
name：为文本框命名，方便后台 ASP 和 PHP 使用
value：文本框默认值，一般起提示作用
<table>表格内容</table>
创建表格
<caption>标题文本</caption>
为表格添加标题文本
<tbody>...</tbody>
若加此标签后，表格会一次性显示出来（而非网页加
载一点显示一点）
<tr>表格一行</tr>
表格中的一行
<td>表格单元格</td>
表格中的一个单元格
<th>表格表头</th>
<img scr="图片地址" alt="下载失败时替换文本" title="提示文本" />
5. 与用户交互：
语法：
<form method="传送方式" action="服务器文件"></form>
举例：
<form method="post" action="save.php">
<label for="username">用户名:</label>
<li>信息 2</li>
......
</ul> <ol>
ol-li 列表信息，带上序号
<li>信息</li>
<li>信息</li> ......
</ol> <div>排版内容<div>
排版中使用，相当于一个容器 确定逻辑部分：逻辑部分是页面上相互关联的一组
元素，如栏目版块
<div id="版块名称">…</div> div 带上 ID 号，使之更清晰
2. 文本域（多行文本）
<textarea rows="行数" cols="列数">默认文本内容</textarea>
colቤተ መጻሕፍቲ ባይዱ：多行输入域的列数
rows：多行输入域的行数
3. 单选框、复选框
<input
type="radio/checkbox"
value=" 值 "
checked="checked"/> type：radio 单选，checkbox 复选框
mailto: 邮箱地址
cc=
抄送地址
bcc= 密抄地址
;
多个邮箱地址
subject=邮件主题
body= 邮件内容
完 整 举 例 : <a href="mailto:yy@ ?cc=aa@ &bcc=bb@ &subject=
主题 &body=邮件内容">发送邮件</a>
不仅应用于某个特定 html 标签元素，而且应用于其后代 如： p{color:red;} /*可被 span 继承*/ p{border:1px solid red;} /*此时，span 将不继承，边框显示红色*/
15. CSS 特殊性（权值） 权值： p{color:red;} /*权值为 1*/ p span{color:green;} /*权值为 1+1=2*/ .warning{color:white;} /*权值为 10*/ p span.warning{color:purple;} /*权值为 1+1+10=12*/ #footer .note p{color:yellow;} /*权值为 100+10+1=111*/ 注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有 0.1，所
内联式 > 嵌入式 > 外部式 就近原则，嵌入式>外部式有一个前提：嵌入式 css 样式的位置一定在外部式的 后面
以上规则适用于相同权值的情况 8. CSS 类选择器
语法：
.类选器名称{css 样式代码;} 举例：
<style type="text/css"> .stress{
color:red; } </style> 注意：前边的小圆点是必须要有的 使用： <span class="stress">胆小如鼠</span> 9. CSS ID 选择器 语法： #ID 选择器名称{css 样式代码} 举例： #setGreen{color:green;} <span id="setGreen">胆小如鼠</span> 区别： 起始于 '.' 与 '#' 调用时 class= 与 id= ID 选择器只能在文档中使用一次，类选择器则可以使用多次 一个元素可以使用多个类选择器同时设置多个样式，而 ID 选择器是不可以的， 如 <span class="stress bigsize">三年级</span> 10.CSS 子选择器 还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一 代子元素。举例： .food>li{border:1px solid red;} 若大于符号换成空格( ),用于选择指定标签元素的所有后辈元素，举例： .first span{border:1px solid red;}
<br/>
换行
<hr/>
水平横线
空格
<address>地址信息</address> 地址信息，通常用于公司地址显示
<code>代码内容</code>
代码，通常是一行内
<pre>多行代码</pre>
多行代码,你需要在网页中预显示格式时都可以使用
它
<ul>
ul-li 列表信息，以圆点显示
<li>信息 1</li>
<select multiple="multiple"> <label for="book>看书</label>
name=" 名 称 "
<option value="看书" id="book">看书</option> <option value="旅游">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> <input type="submit" value="提交"> <input type="reset" value="重置" /> </form> value：向服务器提交值 selected：设置 selected="selected"时，默认选中 multiple：multiple="multiple"时，可以使用 Ctrl 多选，但很丑 label：为了改进鼠标易用性，鼠标点击文本时，选择上 Radio
以可以理解为继承的权值最低。 层叠： 相同权值时，最后一个将被应用 重要性： 相同权值时，使用 !important 将得到最高权重，如 p{color:red!important;} 样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，
使用 !important 优先级比 用户自己设定 还高
<link>标签引入，如： <link href="base.css" rel="stylesheet" type="text/css" /> href: .css 文件路径 rel 和 type: rel="stylesheet" type="text/css" 是固定写法，不能改
三种方法的优先级：
value：提交数据到服务器的值，后台 PHP 处理使用
name：为控件命名，以备后台程序 ASP 和 PHP 使用
checked：checked="checked"时，此选项默认被选中 注意：同一组的单选按钮，name 取值一定要一致
4. 下拉列表框 <form action="save.php" method="post" > <label>爱好:</label>
h1-h6 共 6 个标题分级
<em>斜体文本（强调）</em> 斜体文本内容
<strong>粗体文本</strong> 粗体显示文本内容
<span>单独样式文本</span> 没有语义的，它的应用就是为了 设置单独的格式用
的
<q>引用的文本</q>
引用的文本内容，会自动加上双引号
<blockquote>大段引用</blockquote> 引用大段的文本内容，文本前后会加上缩进
7. CSS 样式分类： 1. 内联式 <p style="color:red;font-size:12px">这里文字是红色。</p> 2. 嵌入式 较通用的一类，CSS 样式放置在<style>标签中，而<style>通常要放置在<head>内 <style type="text/css"> span{ color:blue; font-size:12px; } </style> 3. 外部式 把 CSS 代码写到一个单独的外部文件中，以.css 扩展名结尾，在<head>内使用
<input type="text" name="username" /> <label for="pass">密码:</label>
<input type="password" name="pass" /> </form>
表单控件：
文本框、文本域、按钮、单选框、复选框
method: post/get
16. CSS 文字排版 1. 字体 body{font-family:"宋体";} body{font-family:"Microsoft Yahei";} 2. 字号，颜色 body{font-size:12px;color:#666} 3. 粗体 p span{font-weight:bold;} a{font-weight:bold;} 4. 斜体 p a{font-style:italic;} p{font-style:italic;} 5. 下划线 p a{text-decoration:underline;} 6. 删除线 .oldPrice{text-decoration:line-through;} 7. 缩进 p{text-indent:2em;} /*2em 表示两倍文字大小*/ 8. 行间距 p{line-height:1.5em;} 9. 字间距、字母间距 h1{letter-spacing:50px;word-spacing:50px;} /*分别是字母、单词间距*/ 19.对齐 h1{text-align:center;} /*left、right 和 center*/
6. 认识 CSS 样式： CSS：层叠样式表（Cascading Style Sheets），主要用于定义 HTML 内容在浏览器内的显
示样式 语法： 选择符{ 属性: 值} 举例：
p{ color: blue} 选择符：又称选择器，指明要应用样式规则的元素，如<html>、<body>、<h1>、<p>、 <img>... 声明：指的是冒号”:“ 多条声明：使用分号”;“隔开，最好每行都加上分号 注释：CSS 使用 /**/，HTML 注释则使用<!--内容-->