HTML基本结构
<IDOCTYPE html>
*注:<!DOCTYPE>标签没有结束标签!
<html>
<head>(头部部分)
<meta httpequiv="ContentType"content="text/html"; charset=gb2312>(可写可不写)
<title>显示在浏览器标题栏中的标题</title>
</head>
<body>（主体部分)
(页面内容)
</body>
</html>
标签<body>中的属性有:
bgcolor=颜色（背景颜色)background=图片的绝对路径或相对路径（背景图片)
2.标题标签<Hn></Hn>n取1~6（设置文字标题):
1)<H1>一级标题</H1>
2)<H2>二级标题</H2>
3)<H3>三级标题</H3>
4)<H4>四级标题</H4>
5)<H5>五级标题</H5>
6)<H6>六级标题</H6>
3.<font></font>标签（设置文字属性)
<font size="字体大小”color="字体颜色”face="字体类型"要设置的文字</font>
4.特殊符号
特殊符号 代码
空格
大于号引(>) >
小于号(<) <
引号 "
版权号(@) ©
5.行的控制相关标签
段落标签<p></p>
p align="left”左对齐)/"right”右对齐)/ "center”居中)>(段落的对其方式)
换行标签<br />
6.图片标签<img>
<img src="图片地址"width="图片宽度”height=图片高度”alt="图片的提示文字”
align="top/bottom/middle/left/right" border="图片的边框宽度">
(align是用于调整图片相对于周围文本的对其方式)
7.文字布局
1)水平线<hr size="厚度”width="宽度" color="颜色">
2)有序列表的语法
<ol type=序号类型>(序号类型有:1、a、A、 i 、)
<i>填写信息</i>（必须用<li><li>将内容包括起来)
<i>填写信息</li>
<i>填写信息</i>
.………-
</ol>
3)无序列表语法
<ul type="序号类型">(序号类型有:disc(默认值,实心圆点)、circle(空心圆环)、square(空心正方形))
<i>所写内容(必须用<i></川>将内容包括起来)
</u>
4)预格式文本语法
<pre>
(具体的文本格式，这个格式在时是不改变的 )
</pre>
8.页面链接
1)链接到其他页面.
<a href=”链接地址”target=”链接打开方式”>链接文字</a>
target的常用属性值：
①”_self” 在当前所在的窗口下打开目标页面
②”_blank”新建一个窗口打开目标页面
2)链接到本页面
首先创建一个锚链接的锚记点: <a href="#锚记 点名称">主题名称</a>
然后在具体要链接到的地方设置name:<a name=" 锚记点名称*></a>
(锚记点前面要加上#号)
示例：
<h1 id=”main”>首页</h1> 设定id属性
<a href=”#main”>回到首页</a> 设置链接标签href属性的值为“#+id名”
3)电子邮件链接
<a href="mailto: 邮件地址”>站长邮箱</a>(注意不能忘了mailto)
(4)空链接：
① <a href=””>空</a>或<a href=”#”>空</a> 有锚点的意思，点击后会返回顶部；
② <a href=”javascript:void(0)”>空</a> 点击后原地保持不动；
9.滚动标签
<marquee scrolldelay=滚动延迟时间 direction=up/dow/etft/right(滚动方向)
onmouseover-=this. stop()"(当鼠标指在上面时停止滚动) οnmοuseοut="this start()"(当鼠标离开时继续滚动) >
滚动的文字和图像
</marquee>
框架标签：
①注意：<frameset>是一个框架集，与head标签同级，它的cols属性是用来设置框架相对于浏览器的宽度；
<frame/>是一个单标签，src属性用来定义框架中需要展示的HTML文档地址；
<frameset cols=”50%,50%”>
<frame src=”需要展示的HTML文档地址”/>
<frame src=”需要展示的HTML文档地址”/>
<noframes>
<body>浏览器无法处理框架</body>
</noframes>
</frameset>
② 注意：<iframe>是一个双标签，写在<body>里面，src属性用来定义框架中需要展示的HTML文档地址；
<iframe src=”需要展示的HTML文档地址”></iframe>
③ 在框架中打开超级链接的目标页面：
<a href=”https://www.baidu.com”target=”baidu”>百度</a>
<iframe name=”baidu”></iframe>
注意：a标签的target值和框架的name值保持一致
表单元素：<input type=”表单控件种类”>
type的常用属性值：
① ”text” 单行文本输入框
② ”password” 密码输入框
③ ”radio” 单选按钮(实现单选必须name属性值相同)
男<input type=”radio”name=”sex”value=”male” checked=”checked”>
女<input type=”radio”name=”sex”value=”female”>
④ ”checkbox” 多选按钮
跑步<input type=”checkbox” value=”run” checked=”checked”>
游泳<input type=”checkbox” value=”swim”>
篮球<input type=”checkbox” value=”bsktball”>
其他<input type=”checkbox” value=”others”>
⑤ ”button”普通按钮
⑥ ”submit”提交按钮
⑦ ”reset”重置按钮
⑧ ”file”文件提交按钮
⑨ ”image”图片提交按钮
HTML5新增的type属性值：
① ”email”E-mail输入框
② ”number”数字输入框
③ ”range”拖动条
④”tel”电话号码输入框
⑤ ”url”URL地址输入框
其他常用属性：
① required = ”required” 规定该字段为必填字段
② placeholder 为文本框规定一些提示信息
HTML5新增的结构元素：
① <header></header> 定义文档的页眉部分
② <footer></footer> 定义文档的页脚部分
③ <article></article> 定义文档内的文章
④ <section></section> 定义文档内的一个区域
⑤ <aside></aside> 定义网页内的侧边栏或嵌入内容
⑥ <nav></nav> 定义一个导航
⑦ <figure></figure> 定义一段独立的引用，里面经常嵌套<figcaption>标签
2.常用的样式属性
- 文本属性
font- size:字体大小
font-amily:字体类型
font-style:字体样式(斜体)
color:字体颜色
text-algin:文本的对齐方式(left/right/center) - 背景属性.
background-color: 背景颜色
background-image:url(“图片地址”)背景图片
background-repeat: (repeath/no-repeat/repeat-x/repeaty) 背景图片如何被重复显示 - 方框属性
- 边界属性
margin-left:设置对象的左边距
margin-ight 设置对象的右边距
margin-top:设置对象的上边距
margin-bottom:设置对象的下边距. - 填充属性
padding-eft设置内容与左边框之间的距离
padding-right:设置内容与右边框之间的距离
padding-top:设置内容与上边框之间的距离
padding-bottom:设置内容与下边框之间的距离 - 边框属性
border-style:(soild 细边框/dashed虛边框)边框样式
border-width:边框宽度
border-color: 边框颜色 - 超链接样式
A:link{}未被访问的链接样式
A:visited{}被访问过的链接样式
A.hover}鼠标悬浮在链接上时的样式
A:active{}鼠标下在按下时链接文字的样式
3.样式表的3类应用方式
1)行内样式表(改变某- -行文字的样式)
语法: <P style='嘱性:属性值;">文字
2)内嵌样式表(在一个页面内使用)
语法:
3)外部样式表(改变多个页面中的不同页面元素的样式)
聚名的文件。。
链接外部样式表的两种方式:
(1)标签声明
<link rel="stylesheet" type="texticss" href=样式表文件’>
(2)导入方式
<style type="Text/css">
@import 样式表文件.css;
</style>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
