在Web前端网页设计中，HTML（Hypertext Markup Language）是一种用于创建网页结构的标记语言。HTML文件通常由文件头和文件体两部分组成。 文件头位于HTML文档的开头，用于指定文档类型和字符编码等信息。以下是一个常见的HTML文件头的示例： ```html
HTML，为超文本标记语言
XHTML是可扩展超文本标记语言，是一种更纯洁，更严格，更规范的html代码。
html文件由文件头和文件体两部分组成。
标签的分类：双标签，单标签。
双标签：由“开始标签”和“结束标签”两部分构成，必须成对使用，且必须合理嵌套。
单标签：在开始标签中进行关闭（以开始标签的结束而结束）。
HTML的全局标准属性
在HTML中，规定了8个全局标准属性。
class用于定义元素的类名。
id用于指定元素的唯一id。
style用于指定元素的行内样式。
title用于指定元素的额外信息。
accesskey用于指定激活某个元素的快捷键。
支持accesskey属性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。
tabindex用于指定元素在tab键下的次序。
支持tabindex属性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>
dir用于指定元素中内容的文本方向。
dir的属性值只有ltr和rtl两种，分别是left to right和right to left。
lang用于指定元素内容的语言。
HTML的全局事件属性
Window窗口事件
onload，在页面加载结束后触发。
onunload，在用户从页面离开时触发，如单击跳转，页面重载，关闭浏览器窗口等。
Form表单事件
onblur，当元素失去焦点时触发。
onchange，在元素的元素值被改变时触发。
onfocus，在元素获得焦点时触发。
onreset，当表单中的重载按钮被点击时触发。
onselect，在元素中文本被选中后触发。
onsubmit，在提交表单时触发。
Keyboard键盘事件
onkeydown，在用户按下按键时触发。
onkeypress，在用户按下按键后，按着按键时触发。
该属性不会对所有按键生效，不生效按键如：alt，ctrl，shift，esc。
onkeyup，当用户释放按键时触发。
Mouse鼠标事件
onclick，当在元素上单击鼠标时触发。
ondblclick，当在元素上双击鼠标时触发。
onmousedown，当在元素上按下鼠标按钮时触发。
onmousemove，事件会在鼠标指针移动时发生。
onmouseout，当鼠标指针移出元素时触发。
onmouseover，事件会在鼠标指针移动到指定的元素上时发生。
onmouseup，当在元素上释放鼠标按钮时触发。
Media媒体事件
onabort，当退出媒体播放器时触发。
onwaiting，当媒体已停止播放但打算继续播放时触发。
HTML元素
一个HTML文档包含的标签
<!DOCTYPE>，声明文档类型。
<html>，HTML元素真正的根元素。
<head>，定义html文档的文档头。
head中包含的元素title，定义HTML文档的标题base，为页面上的所有链接规定默认地址或者默认目标link，用于定义文档与外部资源之间的关系meta，提供关于HTML的元数据style，用于为HTML文档定义样式信息script，用于定义客户端脚本复制代码
body，定义html文档的文档体。
content-Type，用于设定网页的字符集，便于浏览器解析与渲染页面。
代码：
<meta http-equiv='content-Type` content='text/html'; charset=utf-8'>复制代码
cache-control，用于告诉浏览器如何缓存某个响应及缓存多长时间。
参数：
no-cache，发送请求，与服务器确认该资源是否被更改，如果没有，则使用缓存no-store，允许缓存，每次都要去服务器上下载完整的响应public，缓存所有响应private，只为单个用户缓存max-age，表示当前请求开始，相应响应在多久内能被缓存和重用，不去服务器重新请求，max-age=60表示响应可以再缓存和重用60秒<meta http-equiv=cache-control' content='no-cache'>复制代码
expires，用于设定网页的到期时间，过期后重新到服务器上重新传输。
refresh，网页将在设定的时间内，自动刷新并转向设定的网址
Set-Cookie，用于设置网页过期。
无语义元素：<span>,<div>，<span>是内联标签，用在一行文本中，<div>是块级标签。
DIV+CSS
div用于存放需要显示的数据，css用于指定如何显示数据样式，做到结构与样式相互分离。
查看div+css样式HTML:点击下方链接跳转，可查看源码：
div-css.html
格式化元素
普通文本
<b>，定义粗体文本
<big>，定义大号字
<em>，定义着重文字
<i>，定义斜体字
<small>，定义小号字
<strong>，定义加重语气
<sub>，定义下标字
<sup>，定义上标字
<ins>，定义插入字
<del>，定义删除字
计算机输出
<code>，定义计算机代码
<kbd>，定义键盘输出样式
<samp>，定义计算机代码样本
<tt>，定义打字机输入样式
<pre>，定义预格式文本
术语
<abbr>，定义缩写
<acronym>，定义首字母缩写
<address>，定义地址
<bdo>，定义文字方向
<blockquote>定义长的引用
<q>，定义短的引用语
<cite>，定义引用，引证
<dfn>，定义一个概念，项目
图片元素
<img src='图片的url' alt = '图像的替代文本'>复制代码
超链接元素
<a>标签的target属性，默认值为_self。
值 说明
_self 在超链接所在框架或窗口中打开目标页面
_blank 在新浏览器窗口中打开目标页面
_parent 将目标页面载入含有该链接框架的父框架集或父窗口中
_top 在当前的整个浏览器窗口中打开目标页面，因此会删除所有框架
文本链接是<a></a>标签之间的元素内容为文本内容。
锚点链接是用#+对应的锚点，锚点通常用唯一属性值id设定。
图像热区链接
图像热区链接，是什么呢？当你在看一些购物网页的时候，一张图片上，可以在不同的地方链接到不同的目标位置，点击不同的地方可以跳转到不同的网页，这也是做商城项目一般要用到的技术。
这个时候不是<a>标签元素了，而是<area>元素。
<area>元素的属性有两个shape，cords属性。
shape 属性 说明 cords 属性 说明
circle圆形 x,y,r (x,y) 为圆心坐标，r为半径
rect 矩形 x1,y1; x2,y2 (x1,y1) 为左上角坐标，(x2,y2)为右下角坐标
poly 多边形 x1,y1;x2,y2;x3,y3;... 分别是各个点的点坐标
<area>的坐标系，原点为图片的左上角,x轴正方向向右，y轴正方向向下
图像热区链接的使用，<map>标签定义一个image-map，可以含一个以上的热区<area>，每个热区都有独立的链接。
要为<map>标签赋予name属性。
将<img>标签的usemap属性与<map>标签的name属性相关联。
空链接
空链接是指未指派目标地址的超链接。
空链接的代码：
javascript: void(0)<a href=''></a><a href='#'></a><a href='javascript:void(0)'></a>复制代码
列表元素
整合列表html网页，点击跳转：ul-ol.html
无序列表，<ul>定义无序列表，<li>定义列表项。
<ul>的type属性值：disc点，square方块，circle圆，none无.
有序列表，<ol>定义有序列表，<li>定义列表项。
<ol>的type属性值：数字，大写字母，大写罗马数字，小写字母，小写罗马数字。
start属性定义序号的开始位置。
定义列表<dl>，定义列表内部可以有多个列表项标题，每个列表项标题用<dt>标签定义，列表项标题内部又可以有多个列表项描述，用<dd>标签定义。
表格
整合表格html网页，点击跳转：table.html
<table>定义表格
<caption>定义表格标题
<tr>定义若干行
<td>定义若干单元格
<th>定义表头
表格分头部，主体，底部：<thead>,<tbody>,<tfoot>三个标签。
属性 说明
border 设置表格的边框宽度
width 设置表格的宽
height 设置表格的高
cellpadding 设置内边距
cellspacing 设置外边距
<td>的两个属性：colspan用于定义单元格跨行，rowspan用于定义单元格跨列
<tbody>,<thead>,<tfoot>标签通常用于对表格内容进行分组。
表单由<form>标签定义，action属性定义了表单提交的地址，method属性定义表单提交的方式。
代码：
<input type='text'><input type='password'><input type='radio'><input type='checkbox'><input type='submit'><input type='reset'><input type='button'><input type='image'><input type='file'><input type='hidden'>复制代码
<select><option>size属性用来设置选择栏的高度，multiple属性用来决定是多选列表，还是单选selected='selected'复制代码
表单控件，用于输入更多的文本
<textarea>元素
<textarea>标签具有name,cols,rows3个属性。
name用于提交参数
value用于输入文本内容
cols和rows分别用于文本框的列数和行数，宽度和高度。
效果：
自我评价：
代码：
<form action='web' method='post'> 自我评价：<br/> <textarea rows='10' cols='50' name='introduce'> </textarea> <br/> <input type='submit' id='' name=''></form>复制代码
frameset
<frameset>定义一个框架集，用于组织多个窗口，每个框架存有独立的html文档
<frameset>不能与<body>共同使用，除非有<noframe>元素
<frame>用于定义<frameset>中一个特定的窗口。空元素<frame/>
frame属性
属性 说明
src 需要显示的html文档
frameborder 定义框架的外边框，属性值为0或者1
scrolling 定义是否显示滚动条,有3个值：yes,no,auto
noresize='noresize' 定义该框架无法调整大小，默认是可以调整的
marginheight和marginwidth属性 定义上下左右的边距
<noframe>， 用于为那些不支持框架集的浏览器显示文本
<iframe>，与<frame>元素相同，iframe有frame的属性，还加了height和width
代码：
<!DOCTYPE html><html><head><meta charset='utf-8'> <title>frameset</title></head> <frameset cols='25%,50%,25%'> <frame src='https://blog.csdn.net/qq_36232611' scrolling='no' noresize='noresize'></frame> <frame src='https://juejin.im/user/5e477d7ce51d4526c550a27d' ></frame> <frame src='https://www.jianshu.com/u/c785ece603d1' ></frame> </frameset> <noframes> <body>您的浏览器无法处理框架，请更换浏览器打开</body> </noframes></html>复制代码
预留字符
HTML 中的预留字符必须被替换为字符实体。
显示结果描述 实体名称 实体编号
空格
< 小于号 < <
> 大于号 > >
& 和号 & &
' 引号 ' '
' 撇号 ' (IE不支持)'
￠ 分（cent） ¢ ¢
£ 镑（pound） £ £
¥ 元（yen） ¥ ¥
€ 欧元（euro） € €
§ 小节 § §
© 版权（copyright） © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
CSS基础知识
css，英文Cascading Style Sheets，中文名：级联样式表。层叠样式表。
css是一种表现语言，是对网页语言的补充。
css用于网页的风格设计，包括字体，颜色，位置等。
css使用的4中方式：引入外部样式文件，导入外部样式文件，使用内部样式定义，使用内联样式定义。
引入外部样式文件：
<link type='text/css' rel='stylesheet' href='css样式文件的url'/>复制代码
导入外部样式文件:
<style type='text/css'> @import 'css样式文件的url';</style>复制代码
使用内部样式定义：
<style type='text/css'> div { background-color: #ffffff; width: 300px; height: 300px; }</style>复制代码
使用内联样式定义：
<div ></div>复制代码
css的两个特性：层叠，继承
层叠：层叠样式生效的优先级：
内联样式->内部样式->外部样式->浏览器默认效果。
继承，就是css属性可以从父元素向下传递到子元素。
css的选择器
元素选择器，是最简单的选择器。
通配符选择器，用'*'表示，表示对任意元素都有效。
属性选择器
格式：
E[attribute]{property1:value1; property2:value2;...}复制代码
语法说明
E[attribute]用于选取带有指定属性的元素
E[attribute=value]用于选取带有指定属性和指定值的元素
E[attribute~=value]用于选取属性值包含指定值的元素，该值必须是整个单词，可以前后有空格
E[attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词或者后面跟着连字符“-”
css背景
css背景属性如下：
属性说明
background-color定义背景颜色
background-image定义背景图片
background-repeat定义背景图片是否重复以及其重复方式
background-attachment定义背景图片是否跟随内容滚动
background-position定义背景图片的水平位置和垂直位置
background可以用一条样式定义各种背景属性
background
background-color用于设置背景颜色，初始值为transparent透明色。
颜色取值3种如：颜色名，十六进制颜色，rgb函数。
background-image用于设置元素的背景图片，默认值为none。
background-repeat控制图像的平铺。
background-repeat默认值为repeat，即图像沿着x轴和y轴平铺，还可以指定沿着x轴平铺rpeat-x，沿着y轴平铺repeat-y，或者不平铺no-repeat，继承父元素该属性设置inherit。
background-attachment用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为：scroll，表示可以随着页面其余部分的滚动而滚动。设置fixed，表示当页面其余部分滚动时，背景图片不会滚动，设置inherit，继承父元素。
background-position用于设置背景图像圆点的位置。
background可以将background-color，background-position，background-attachment，background-repeat，background-image全部设置。
css字体属性
css常用字体属性表：
属性说明
font-family定义文本的字体系列
font-size定义文本的字体尺寸
font-variant定义是否以小型大写字母的字体显示文本
font-style定义文本的字体是否是斜体
font-weight定义字体的粗细
font可以一条样式定义各种字体属性
font-family用于设置元素的字体，该元素属性值一般可以设置多个字体。
font-size用于设置字体的尺寸。
font-style用于设置字体是否是斜体，默认值为normal，当设置为italic，显示为一个斜体的样式，当设置为oblique，显示为一个倾斜的样式。
font-variant用于设置字体使用小写字体，默认为normal，一旦设置为small-caps，将所有小写字母变为大写。
font-weight用于设置字体的粗细，normal值等于400，bold的值等于700。
font，可以设置font-family,font-size,font-style,font-variant,font-weight。
css文本属性表：
属性 说明
color 文本颜色
direction 文本方向或者书写方向
letter-spacing 字符的间距
line-height 文本的行高
text-align 文本的水平对齐方式属性,设置元素中文本的水平方式，值有left，right，center，inherit。
text-decoration给文本添加修饰效果，值有underline为添加下画线，overline添加上画线，line-through 添加删除线，blink添加闪烁的效果,none无如何修饰,inherit。
text-indent 定义文本的首行缩进方式，默认值为0
text-shadow 为文本添加阴影效果
text-transform 切换文本的大小写
white-space 设置如何处理元素内的空白
word-spacing 定义单词之间的距离
css尺寸属性表：
属性 说明
width 设置元素的宽度
min-width 设置元素的最小宽度
max-width 设置元素的最大宽度
height 设置元素的高度
min-height 设置元素的最小高度
max-height 设置元素的最大高度
css列表属性表：
属性 说明
list-style-image 设置列表项标记样式为图像，none/inherit/url
list-style-position 设置列表项标记的位置，inside/outside/inherit
list-style-type 设置列表项标记的类型
list-style 可以用一条样式定义各种列表属性
list-style-type
值 说明
disc 实心圆
circle 空心圆
square 方块
decimal 数字
low-roman小写罗马数字
upper-roman大写罗马数字
low-alpha小写字母
upper-alpha大写字母
none 无标记
inherit 继承父元素的该设置
css表格属性表：
属性 说明
border-collapse设置是否合并表格边框
border-spacing设置相邻单元格边框之间的距离
caption-side 设置表格标题的位置
empty-cells 设置是否显示表格中空单元格上的边框和背景
table-layout 设置用于表格单元格列宽的设置方式
盒模型
css盒模型，包含元素内容content，内边距padding，边框border，外部距margin。
css内边距属性，元素的内边距在边框和内容之间。
css内边距的属性：
属性说明
padding-top元素的上内边距
padding-right元素的右内边距
padding-bottom元素的下内边距
padding-left元素的左内边距
padding用一个声明定义所有内边距属性
设置顺序为上右下左依次进行。
padding: 10px 10px 10px 10px;复制代码
css外边距的属性：
属性说明
margin-top定义元素的上外边距
margin-right定义元素的右外边距
margin-bottom定义元素的下外边距
margin-left定义元素的左外边距
margin用一个声明定义所有外边距属性
css边框的属性：
属性说明
border-top-style上边框的样式属性
border-right-style右边框的样式属性
border-bottom-style下边框的样式属性
border-left-style左边框的样式属性
border-style设置4条边框的样式属性
border-top-width设置上边框的宽度属性
border-right-width设置右边框的宽度属性
border-bottom-width设置下边框的宽度属性
border-left-width设置下边框的宽度属性
border-width设置4条边框的宽度属性
border-top-color设置上边框的颜色属性
border-right-color设置右边框的颜色属性
border-bottom-color设置下边框的颜色属性
border-left-color设置左边框的颜色属性
border-color设置4条边框的颜色属性
border-top用一条声明定义所有上边框的属性
border-right用一条声明定义所有右边框的属性
border-bottom用一条声明定义所有下边框的属性
border-left用一条声明定义所有左边框的属性
border用一条声明定义所有边框的属性
border-width一次定义4条边框的宽度
border-color一次定义4条边框的颜色
边框的样式
none，无边框效果
hidden，与none相同
dotted，点线边框效果
dashed，虚线边框效果
double，双线边框效果
solid，实线边框效果
groove，3D凹槽边框效果
ridge，3D凸槽边框效果
css轮廓是绘制在元素周围的一条线，位于边框边缘的外围，起到突出元素的作用。
属性 说明
outline-style 定义轮廓的样式属性
outline-color 定义轮廓的颜色属性
outline-width 定义轮廓的宽度属性
outline同一个声明中定义所有的轮廓属性
布局属性
布局属性是文档中元素排列显示的规则
布局方式3种：普通文档流，浮动，定位
css浮动涉及到的属性
属性 说明
float 设置框是否需要浮动以及浮动方向
clear 设置元素的哪一侧不允许出现其他浮动元素
clip 裁剪绝对定位元素，该元素必须是绝对定位，上右下左原则
overflow 设置内容溢出元素框时的处理方式，值：visible,auto,hidden,scroll
display 设置元素如何显示，值none,block,inline,inline-block,inherit
Visibility 定义元素是否可见，visibility设置为隐藏，元素占用的空间依然会保留，但display:none不保留占用空间，值：visible,hidden
css定位的属性
属性 说明
position 元素的定位类型，值static,absolute绝对，relative相对
top 元素上外边距
Right 元素右外边距
bottom 元素下外边距
left 元素的左外边距
z-index 元素的堆叠顺序
z-index 用于设置目标对象的定位层序，数值越大，所在层级越高。该属性只在position:absolute时有效。
编辑整理：吴禹衡
审核：沈盼、林亚
点击下方，立即关注本公众号！
文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/Web%20frontend%20web%20page%20designHTMLCSS.html
支付宝扫一扫
评论列表（196条）
测试