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/fr/articles/detail/Web%20frontend%20web%20page%20designHTMLCSS.html
评论列表(196条)
测试