HTML笔记

最新推荐文章于 2019-12-14 14:36:50 发布

weixin_30952535

最新推荐文章于 2019-12-14 14:36:50 发布

阅读量98

点赞数

原文链接：http://www.cnblogs.com/zsf1924653069/p/5334003.html

版权

一． HTML的语法

什么是HTML标记语言

答：表示网页信息的符号标记语言

特点：1可以设置文本的格式，比如标题、字号、文本颜色、段落等等

2可以创建列表

3可以建立表格

4可以插入图像和媒体

5超链接，可以使用鼠标点击超链接来实现页面之间的跳转

HTML的标记和他的属性

标记：1 HTML文档的保存格式： .html .htm .xhtml

2 标记和被标记的内容构建出HTML文档：格式：<标记>

内容

</标记>

3标记的属性：用来控制我们的内容（图像、文本等的）如何的显示

格式：<标记属性1=属性值属性2=属性值… …>内容</标记>

eg:<body bgcolor=’red’>内容</body>

语法不区分大小写，尽量用小写
文档注释：注释一段内容时使用”<!—“开始，以”-->”结束
代码格式：空格和回车键进行编排

注意：缩进时保持严格的规则，以”Tab”键进行缩进

什么是实体字符？

常见的实体字符

二、HTML的基本结构

1、<html>内容</html>

解释：HTML文档的文档标记，也称为HTML开始标记

功能：这对标记分别位于网页的最前端和最后端

2、<head>内容</head>

解释：HTML文件头标记，也成为HTML头信息开始标记

功能：用来包含文件的基本信息，比如网页的标题、关键字、在<head></head>内可以放<title></title>、<meta></meta>、<style></style>等

注意：在<head></head>标记内的内容不会在浏览器中显示

3、<title>内容</title>

解释：HTML文件标题标记

功能：网页的主题，显示在浏览器的窗口的左上边

注意：网页的标题不能太长，要短小精悍，能具体反应页面的内容，<title></title>标记中不能包含其他标记

4、<body>内容</body>

解释：HTML的主体标记

功能：<body>…</body>是网页的主体部分，在此标记之间可以包含如<p></p>、<h1></h1>、<br>、<hr>等

body标记的常见属性：1 bgcolor设置背景颜色<body bgcolor=”red”></body>

2 text设置文本颜色<body text=”green”></body>

3 link设置链接颜色<body link=”blue”></body>

4 vlink已经访问了的链接颜色<body vlink=”yellow”></body>

5 alink正在被点击的链接颜色<body vlink=”red”></body>

5、 <meta></meta>

解释：页面的元信息

功能：提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键字

必须的属性：content

常见的属性：常用的name属性：1 author 2 keywords 3 description 4 others

把content属性关联到一个名称，比如描绘出网页的关键词：<meta name=”keywords” content=”你好”>

注意meta必须放在head元素里面

三、文档设置标记

1、格式标记

1.<br>强制换行标记，让后面的文字、图片、表格等显示在下一行

2.<p>换段落标记

3.<center>居中对齐标记，让段落或者是文字相对于父标记居中显示

4.<pre>预格式化标记，保留预先排版好的格式

5.<li>列表项目标记

6.<ul>无序列表标记

7 .<ol>有序列表标记，可以显示特定的一些顺序

1格式：<ol type=”符号类型”>

</ol>

2有序列表的type属性：阿拉伯数字，大小写字母，大小写罗马数字

3 value：指定一个新的序列数字起始值

4列表可以进行嵌套

8.<dl><dt><dd>

使用场合：对列表条目进行简短的说明

格式：<dl>

</dl>

9.<hr>水平分割线标记，段落之间的分割线

10.<div>分区显示标记，也称之为层标记：常用来编排一大段的HTML段落，也可以用于格式化表，和<p>很相似，层可以多层嵌套使用

2、文本标记

1. hn 标题标记：n的范围1-6，h1最大，h6最小

2. font 字体设置标记，设置字体格式，三个常用属性：

size（字体大小）：<font size=”3”>取值范围是1-7，浏览器默认是3

color（颜色）<font color=”red”>

face(字体) <font face=”微软雅黑”>

3. b 粗字体标记

4. i 斜字体标记

5. sub文字下标字体标记

6. sup文字上标字体标记

7. tt 打印字体标记

8. cite 引用方式的字体，通常是斜体

9. em 表示强调，通常显示为斜体字

10.strong 表示强调，通常显示为粗体字

11.small 小型字体标记

12. big 大型字体标记

13. u 下划线字体标记

四、图像标记

注意：<img>为单标记，不需要使用</img>闭合，在加载图像文件的时候，文件的路径或者文件名文件格式错误，将无法加载图片

<img>标记的属性：

src属性：指定要加载的图片的路径、名称以及格式

width属性：指定图片的宽度，单位px em cm mm

height属性：指定图片的高度，单位px em cm mm

border属性：指定图片的边框宽度，单位px em cm mm

alt属性：当网页上的图片被加载完后，鼠标移动到上面去，会显示这个图片指定的熟悉文字，如果图像没有下载或者加载失败，会用文字来代替图像来显示，搜索引擎可以通过这个属性的文字来抓取图片。

五、超链接的使用

1、基本语法：<a href=””target=”打开方式”name=”页面锚点名称”>链接文字或图片</a>

2、属性：1.href属性:链接的地址，链接的地址可以是一个网页，也可以是一个视频、图片、音乐等

2、target属性：1 作用：定义超链接的打开方式

2 属性值：_blank:在一个新的窗口中打开链接

_seif（默认值）在当前窗口中打开链接

_parent:在父窗口中打开页面（框架中使用较多）

_top:在顶层窗口中打开文件（框架中使用较多）

3、name属性：指定页面的锚点名称

六、表格

1、表格的基本结构

1.<table>标记

基本格式：<table 属性1=”属性值1” 属性2=”属性值2”…>表格内容</table>

2. table标记的属性：

width属性：表示表格的宽度，他的值可以是像素（px）也可以是父级元素的百分百（%）

height属性：表示表格的高度，他的值可以是像素（px）也可以是父级元素的百分百（%）

border属性:表示表格外边框的宽度

align属性：表格的显示位置：值 left（默认）居左显示，center居中，right居右

cellspacing属性：单元格之间的间距，默认是2px，单位像素

cellpadding属性：单元格内容与单元格边框的显示距离，单位像素

frame属性：1作用：控制表格边框最外层的四条线框

2属性值：void（默认值）表示无边框

above表示仅顶部有边框

below表示仅底部有边框

hsides表示仅有顶部和底部边框

lhs表示仅有左侧边框

rhs表示仅有右侧边框

vsides表示仅有左右侧边框

box包含全部四个边框

border包含全部四个边框

rules属性：1作用：控制是否显示以及如何显示单元格之间的分割线

2属性值：none(默认值)表示无分割线

all表示包括所有分割线

rows表示仅有行分割线

clos表示仅有列分割线

groups表示仅在组和列之间有分割线

2.<caption>标记

1什么时候使用？

答：表格标题

2 如何正确使用？

答：<caption>属性的插入位置，直接位于<table>属性之后，<tr>表格行之前

align属性：属性值:top标题放在表格的上部

bottom标题放在表格的下部

left标题放在表格的左部

right标题放在表格的右部

3.<tr>标记

定义表格的一行，对于每一个表格行，都是由一对<tr>…<tr>标记表示，

每一行<tr>标记内可以嵌套多个<td>或者<th>标记

可选属性：bgcolor属性：设置背景颜色

align属性

valign属性

4.<td>和<th>

<td>和<th>都是单元格的标记，必须嵌套在<tr>标签内，是成对出现的

两者的区别：<th>是表头标记，通常位于首行或者首列，<th>中的文字默认会被加粗，而<td>不会。<td>是数据标记，表示单元格的具体数据。

共同之处：两者的标记属性都是一样的

属性：bgcolor（单元格背景）、align（单元格对齐方式）、valign（单元格垂直对齐方式）、width（单元格宽度）、height（单元格高度）、rowspan(单元格所占行数)、colspan(单元格所占列数)

七、HTML框架

1、什么是框架？

答：框架将浏览器划分为不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果

2、<frameset>划分框架标记

1 语法格式：<frameset>…</frameset>

2 属性：cols:使用“像素数“和%分割左右窗口，”*“表示剩余部分,如果使用“*”，“*”表示框架平均分成2个，如果使用“*”，“*”，“*”表示框架平均分成3个

rows:使用“像素数”和%分割上下窗口，“*”表示剩余部分

frameborder：指定是否显示边框，0不显示，1显示

border：设置边框的大小，默认值5像素

3、<frame>子窗口标记

<frame>标记是一个单标记，该标记必须放在<frameset>中使用，在<frameset>中设置了几个窗口，就必须对应使用几个<frame>框架，而且还必须使用src属性指定一个网页

属性：1 src加载网页文件的URL地址

2 name：框架名称，是链接标记的target所要参数

3 noresize：表示不能调整框架大小，没有设置时就可以调整

4 scrolling：是否需要滚动条

值：auto（根据需要自动出现） yes（有） no(无)

5 frameborder：是否需要边框

值：（1）显示边框（0）不显示边框

八、表单设计

1、表单标记

<form>…</form>定义表单的开始位置和结束位置，表单提交时的内容就是<form>表单中的内容

基本格式：<form action=”服务器端地址(接受表单内容的地址)” name=”表单名称” method=”post|get”>…</form>

常用属性：1） name表单名称

2） method:传送数据的方式，分为post和get两种

get方式：get方式提交时，会将表单的内容附加在URL地址的后面，所以限制了提交内容的长度，不超过8192个字符，且不具备保密性

post方式：post方式提交时，将表单中的数据一并包含在表单主体中，一起传送到服务器中处理，没有数据大小限制

3）action：表单数据的处理程序的URL地址，如果为空则使用当前文档的URL地址，如果表单中不需要使用action属性也要指定其熟悉为“no”

4）enctype：设置表单的资料的编码方式

5）target：和超链接的类似，用来指定目标窗口

2、文本域和密码

<input>标记：没有结束标记。

基本语法：<input type=””name””value””size=””maxlength””>

属性介绍：1 type属性：

text：当type=”text”时，<input>表示一个文本输入域

password：当type=”password”时，<input>表示一个密码域

2 name属性:定义控件的名称

3 value属性：初始化值，打开浏览器时，文本框中的内容

4 size属性：设置控件的长度

5 maxlenght属性：输入框中最大允许输入的字符数

3、提交、重置、普通按钮

1.提交按钮：当<input type=”submit”>时，为提交按钮

2.重置按钮：当<input type=”reset”>时，为重置按钮

3.普通按钮：当<input type=”button”>时，为普通按钮

4、单选框和复选框

1.单选按钮：当<input type=”radio”>时，为单选框

2.复选框：当<input type=”checkbox”>时，为复选框

注意：单选框和复选框都可以使用”checked”属性来设置默认选中项

5、隐藏域：当<input type=”hidden”>时，为隐藏表单域

6、多行文本域：

用法：使用<textarea>标记可以实现一个能够输入多行文本的区域

语法格式：<textarea name=”name” rows=”value” cols=”value” value=”value”>…<textarea>

rows属性和cols属性分别用来指定，显示的行数和列数，单位是字符个数

7、菜单下拉列表域

… … …

</select>

2 属性

3 option标记：<option>标记用来指定列表中的一个选项，需要放在<select></select>之间

值：1 value：给选项赋值，指定传送到服务器上面的值

2 selected：指定默认的选项