HTML初级知识点总结,最详细的总结
HTML知识点汇总
HTML知识点汇总第一章HTML基础知识1、HTML简介HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息。
它是从SGML(Standard Generalized Markup Language,标准通用标识语言)中的一个子集演变而来的。
2、HTML的标记组成HTML用于描述功能的符号称为“标记”。
标记在使用时必须用尖括号“<>”括起来,而且是成对出现的,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。
如<body></body>、<p></p>等1)单标记:有些标记能完整的表达标记里的意思,只须在尖括号中输入标记名即可,这类标记叫单标记。
XHTML中要求单标记也必须闭合,即在标记“>”前添加斜杠。
常见的单标记如<br />、<hr />等。
2)双标记:双标记有头有尾,且前面的标记与后面的标记保持一致,但在后面的标记前有斜线,语法形如:<标记>内容</标记>。
例如:<p>段落</p>3)XHTML要求所有标记均为小写,且所有标记属性必须添加双引号4)标记对不能交叉3、HTML基本结构<html><head><title>网页标题</title></head><body><!--下面是网页的正文--></body></html>1)<title>标记对不能放在<body>标记对中,同理,其它表示内容的标记也不能放在<head>标记对中2)<html></html>表示HTML语言,在<html></html>里面包含头部(<head></head>)和内容体(<body></body>)。
html基础知识
html基础知识一、HTML基础知识概述HTML(Hypertext Markup Language,超文本标记语言)是用于创建网页的标准标记语言。
HTML描述了一个网页的结构和内容,由一系列的标签(tag)组成,告诉浏览器如何显示网页的内容。
HTML可以与CSS和JavaScript一起使用,以实现网页的美化及更加复杂的交互效果。
二、HTML基本结构HTML的基本结构由以下几个部分组成:1. DOCTYPE声明:告诉浏览器使用哪个HTML版本来显示页面。
2. HTML元素:整个HTML页面必须放在<html>和</html>标签之间。
3. Head元素:HTML页面中的头部信息,包括网页标题、字符集、引用的样式文件等。
4. Body元素:HTML页面中的主要内容,包括文字、图像、表格、链接等。
三、HTML标签HTML标签是指用于控制文本在浏览器中的显示方式的代码。
所有的标签都是以一对尖括号“<>”来表示的,其中包含一个标签名和标签的属性(如果有的话)。
下面是几个常用的HTML标签:1. <html>和</html>:整个HTML页面都包含在这两个标签之间。
2. <head>和</head>:这两个标签中包含的内容是网页的头部信息,比如网页标题、字符集、引用的样式文件等。
3. <body>和</body>:这两个标签中包含的内容是网页的主要内容,包括文字、图像、表格、链接等。
4. <title>和</title>:用来定义网页的标题,会显示在浏览器的标题栏和书签中。
5. <h1>到<h6>:定义网页的标题和子标题,h1标签是最高级别的标题,h6标签是最低级别的标题。
6. <p>:定义段落,用于分隔文本内容。
7. <a>:定义链接,可以链接到其他页面、文件或网站。
HTML网页设计基础的知识点
HTML网页设计基础的知识点HTML(Hypertext Markup Language)是一种标记语言,用于创建网页结构和内容。
在网页设计中,了解和掌握HTML的基础知识点是至关重要的。
本文将介绍一些HTML网页设计的基础知识点,帮助你更好地理解和应用HTML。
一、HTML的基本结构一个HTML网页由以下几个主要部分组成:1.<!DOCTYPE> 声明:指定HTML版本2.<html> 标签:指示文档的开始和结束3.<head> 标签:定义文档的元数据,包括标题、字符编码等4.<body> 标签:定义文档的可见内容5.其他标签:用于定义网页结构、样式和元素等二、HTML标签的使用HTML标签用于定义网页的结构和内容。
常见的HTML标签有:1.<h1> - <h6> 标签:定义标题,h1最高级别,h6最低级别2.<p> 标签:定义段落3.<a> 标签:定义超链接,链接到其他网页或内部书签4.<img> 标签:插入图片5.<div> 标签:定义文档中的一个区域或容器6.<span> 标签:定义文档中的一个行内区域或容器7.<ul> 和 <li> 标签:定义无序列表8.<ol> 和 <li> 标签:定义有序列表9.<table>、<tr>、<th> 和 <td> 标签:定义表格和表格的行、表头和单元格10.<form>、<input> 和 <button> 标签:定义表单和输入元素11.<br> 和 <hr> 标签:定义换行和水平线三、HTML属性HTML标签可以具有属性,用于进一步定义元素的行为和样式。
常见的HTML属性有:1.class 属性:为元素指定一个或多个类名,用于定义样式或JavaScript操作2.id 属性:为元素指定唯一的标识符,用于JavaScript操作或CSS 样式3.style 属性:为元素指定内联样式4.src 属性:指定图像或嵌入式内容的URL5.href 属性:指定链接的URL6.target 属性:指定链接打开的目标窗口或框架7.value 属性:定义输入元素的默认值8.type 属性:定义输入元素的类型(如文本、按钮、复选框等)四、CSS样式和HTMLCSS(Cascading Style Sheets)是用于描述网页样式和布局的样式表语言。
htm第一章l基础知识总结
htm第一章l基础知识总结HTML(HyperText Markup Language)是一种标记语言,用于描述网页的结构和内容。
下面是HTML的基础知识总结:1. HTML标签:HTML由一系列的标签组成,标签用尖括号(< >)包围。
常用的标签包括<html>、<head>、<title>、<body>等。
2. 文本标签:用于定义文本内容的标签,例如:<p>用于定义段落、<h1>~<h6>用于定义标题、<a>用于定义链接等。
3. 图像标签:用于显示图像的标签,例如:<img>用于插入图像,其中的src属性用于指定图像的路径。
4. 列表标签:用于定义有序或无序列表的标签,例如:<ul>用于定义无序列表(包含点或其他标志)、<ol>用于定义有序列表(包含数字)。
5. 表格标签:用于创建表格的标签,例如:<table>用于创建表格、<tr>用于定义表格中的行、<td>用于定义表格中的单元格等。
6. 表单标签:用于创建表单的标签,例如:<form>用于定义表单、<input>用于输入字段、<button>用于定义按钮等。
7. 属性:标签可以带有属性,属性提供元素的额外信息。
例如,<a>标签带有href属性,用于指定链接的地址,<img>标签带有src属性,用于指定图像的路径。
8. CSS:CSS(Cascading Style Sheets)用于描述网页的样式和布局。
可以通过<style>标签或外部CSS文件将样式应用到HTML元素上。
9. 嵌套:HTML元素可以相互嵌套,一个元素可以包含另一个元素。
例如,<div>内部可以包含<p>、<a>等其他标签。
html基础知识总结
html基础知识总结HTML基础知识总结。
HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。
它由一系列的元素(elements)组成,这些元素可以用来包裹不同的内容,从而告诉浏览器如何展示这些内容。
本文将对HTML的基础知识进行总结,包括HTML的结构、常用标签和属性等内容。
首先,我们来了解一下HTML的基本结构。
一个标准的HTML文档由以下几个部分组成:1. 文档类型声明(Document Type Declaration),<!DOCTYPE html>,它告诉浏览器使用哪个HTML版本来解析文档。
2. HTML根元素(Root Element),<html>,它包裹了整个HTML文档的内容。
3. 头部(Head),<head>,包含了文档的元信息,如标题、字符集、引入外部样式表和脚本等。
4. 主体(Body),<body>,包含了文档的主要内容,如文本、图片、链接等。
接下来,我们将介绍一些常用的HTML标签和属性。
在HTML中,标签用来包裹不同类型的内容,而属性则用来为标签提供额外的信息。
1. 标题标签(Heading),<h1>到<h6>,用来定义文档的标题,其中<h1>为最高级标题,<h6>为最低级标题。
2. 段落标签(Paragraph),<p>,用来定义文本段落。
3. 图像标签(Image),<img>,用来插入图片,其中src属性指定图片的URL。
4. 链接标签(Link),<a>,用来创建超链接,其中href属性指定链接的URL。
5. 列表标签(List),<ul>、<ol>、<li>,分别用来定义无序列表、有序列表和列表项。
6. 表格标签(Table),<table>、<tr>、<td>,分别用来定义表格、表格行和表格单元格。
html网页设计知识点
html网页设计知识点HTML(超文本标记语言)是一种用来创建网页的标准标记语言。
作为网页设计师,掌握HTML的基本知识是非常重要的。
下面是一些常用的HTML网页设计知识点,帮助你提升网页设计的能力。
一、HTML基础知识1. HTML语法:HTML由标签组成,标签用来表示页面中的元素。
标签通常由尖括号包围,如<h1>表示一个一级标题。
标签通常成对出现,有开始标签和结束标签。
2. 元素属性:HTML元素可以有属性,通过属性可以为元素提供进一步的信息或者控制元素的行为。
常见的属性包括id、class、style等。
3. HTML文档结构:一个HTML文档通常包含<!DOCTYPE>声明、<html>标签、<head>标签和<body>标签等。
二、排版和样式1. 标题:使用<h1>到<h6>标签可以定义不同级别的标题,<h1>表示最高级别的标题。
2. 段落:使用<p>标签定义段落。
3. 超链接:使用<a>标签创建超链接,通过href属性指定链接目标。
4. 图像:使用<img>标签插入图片,通过src属性指定图片路径。
5. 列表:使用<ul>标签创建无序列表,使用<ol>标签创建有序列表,使用<li>标签定义列表项。
6. 表格:使用<table>标签创建表格,使用<tr>标签定义表格行,使用<td>标签定义表格单元。
7. 表单:使用<form>标签创建表单,使用<input>标签定义表单输入字段,使用<select>标签创建下拉列表,使用<textarea>标签创建文本输入区域。
8. 样式:可以使用内联样式(通过style属性)、内部样式表(在<head>标签中使用<style>标签)或者外部样式表(使用link标签引入)来控制元素的样式。
HTML基础知识
2.4 HTM L标记
2.图像标记<IMG>
在HTML中,使用IMG标记在网页中加入图像。它具有 两个基本属性src和alt,分别用于设置图像文件的位置和替 换文本。
上一页 下一页 返回
2.4 HTM L标记
2.4.6超链接标记
1.相对地址与绝对地址 URL 统一资源定位符,也被称为网页地址,是表示互联
上一页 下一页 返回
2.4 HTM L标记
2.4.3文本标记
1.<FONT> <FONT>标记用于控制网页上文字的字体,大小和颜色。
控制方式是利用属性设置得以实现的。 2.特殊符号
某些字符在HTML中具有特殊意义,如小于号(<)即定 义HTML标记的开始。这个小于号是不显示在最终看到的网 页单的。那如果希望在网页中显示一个小于号,该怎么办呢? 要在浏览器中显示这些特殊字符,就必须在HTML文档中使 用字符实体。
在<TD>和<TH>标记内使用colspan的取值表示水平 方向上合并的列数。
上一页 下一页 返回
2.4 HTM L标记
2.4.8表单标记
1.表单元素 <FORM>标记:用于在网页中创建表单区域,属于一
个容器标记,表示其他表单标记需要在它的包围中才有效。 其属性介绍如下。 action用来设置接收和处理浏览器递交的表单内容的服务器程 序的URL。 method:此属性告诉浏览器如何将数据发送给服务器,它指 定向服务器发送数据的方法(用POST方法还是用GET方法)。
上一页 下一页 返回
2.4 HTM L标记
2.4.10脚本标记
有时,网页中的一些特殊效果击要加入脚本语言才能够 实现,脚本语言是一种简化的编程语言,它可以生成许多的 网页特效,如滚动的文字、雪花效果、波浪效果等。‘常用 的脚本语言有3种,分别是JavaScript, VBScript和 Jscript。其中JavaS cript是IE不II Navigator都完全 支持的脚本语言,所以使用得最广泛。
HTML基础知识总结
HTML基础知识总结⽬录标签分类常⽤标签表单框架常⽤的布局组合标签HTML4和HTML5的区别:HTML5 中新增的语义标签 - 了解HTML5 新的表单属性form 新属性input 新属性HTML5 新的表单元素 -- 了解HTML5 中新的 input 类型HTML5 中新增的⾳频HTML5 中新增的视频HTML5 中已经移除的元素转义符号标签的属性:多个属性中间⽤空格< 标签名称属性名 1 = " 属性值 " 属性名 2 = " 属性值 " ></ 标签名称 ><p id = "p1" name = "p1" ></p>标签分类标签分类:块状元素、⾏级元素块状元素:⼀般都是新起⼀⾏,可以容纳⾏内元素和其他块级元素;⾏级元素:⼀般都是语义级别的基本元素,⼀般只能容纳⽂本或者其他⾏内元素。
块状元素和⾏内元素的区别:1 、块级元素会独占⼀⾏,其宽度⾃动填满其⽗元素宽度;⾏内元素会排列到同⼀⾏⾥,其宽度随元素的内容变化⽽变化。
2 、块级元素可以设置宽⾼;⾏内元素设置宽⾼⽆效。
3 、块级元素可以设置 margin , padding 属性;⾏内元素的⽔平⽅向的 padding会有边距效果,但是竖直⽅向的 padding没有效果。
(此处的属性稍后介绍)属于块状元素的:标题标签 h1-h6,段落标签 p ,⽔平线标签 hr,有序列表标签 ol--li,⽆序列表标签 ul--li,定义描述标签 dl-dt-dd,容器标签 div:属于⾏级元素的:范围标签: span图像标签: img基本结构:常⽤标签⽂本标签<h1></h1>段落标签 <p></p>换⾏标签<br/>⽔平线标签 <hr/>范围标签<span></span>图⽚标签<img 属性 />图⽚标签的热点区域<map name="?" /> <atea 形状范围链接标题 / >列表标签:⽆序<ul> <li> <li/> <ul/> 有序<ol> <li> <li/> <ol/>描述标签:图⽂混编 <dl> <dt>(⽂字或图⽚)<dt/><dd>(⽂字说明多个)<dd/> <dl/>布局标签:<div>中间放其他标签的容器<div/>超链接和锚链接:<a><a/>属性 name:锚点 herf:⽬标(⽹页#锚点)规则表格:<table> <tr > <td><td/> <td><td/> <tr/> <table/> <th>标题⾏<th/> align 左右对齐 valign 上下对齐不规则表格:属性 colspan="列数" rowspan="⾏数" 然后把被占的格删掉⾼级标签:标题和逻辑分区标签表格标题:<caption>标题⽂字<caption/>表格逻辑分区:thead tbody tfoot表单id:· 元素的唯⼀表⽰,不重复name: 表单项元素的名称,服务器获取数据通过该名称value: 表单项元素的值,服务器获取数据通过name 获取到的就是 value type: 表⽰表单项元素的呈现形式class: 表⽰样式名称readonly: 表⽰只读,⽤户只能看不能改disabled:表⽰禁⽤,该元素不能改⽽且背景是灰⾊⽂本框:密码框:单选按钮:复选框:⽂件域:⽇期-h5中的新特性:隐藏域:下拉列表框:⽂本域:按钮:提交按钮、图⽚按钮、重置按钮、普通按钮最终效果:地址栏内容:dest.html?userId=1001&userName=lina&password=12312&gender= ⼥ &statu=1&hobby=swim&hobby=movie& headImg=a.png&birthday=2020-10-24T20%3A19& month=3&x=25&y=46框架在⼀个页⾯引⼊其他页⾯ iframe框架集:HTML5已经取消常⽤的布局组合标签div-ul-li/div-ol-li :常⽤于导航布局div-dl-dt-dd: 常⽤于图⽂混编布局div-form: 常⽤于表单布局div-table: 常⽤于局部规则数据展⽰布局HTML4和HTML5的区别:HTML5 中新增的语义标签 - 了解标签描述article 定义页⾯独⽴的内容区域。
前端基础HTML知识点汇总
前端基础HTML知识点汇总
HTML(Hypertext Markup Language)是一种标记语言,用于创建网页结构。
熟练掌握HTML的基础知识是成为一名合格的前端工程师的必备条件。
下面是前端基础HTML知识点的详细汇总。
1.HTML基本结构
2.标题和段落
3.文本格式化
4.链接
5.列表
6.图像
7.表格
8.表单
9.块级元素和内联元素
每个元素都可以被归为块级元素或内联元素。
块级元素会自动换行,如`<div>`、`<p>`等。
内联元素不会自动换行,如`<span>`、`<a>`等。
10.颜色和背景
`color`属性用于定义文本颜色,`background-color`属性用于定义背景颜色。
可以使用具体的颜色值,如`red`、`ff00`,也可以使用RGB 或RGBA值。
11.字体和文本样式
`font-family`属性用于定义字体,`font-size`属性用于定义字体大小。
可以使用具体的字体名称,如`Arial`、`宋体`,也可以使用相对尺寸或绝对尺寸。
12.CSS样式
13.路径
图像、样式表和脚本等文件的路径可以是相对路径或绝对路径。
相对路径是相对于当前文件的路径,绝对路径是从根目录开始的完整路径。
14.注释
15.HTML5新特性
以上是前端基础HTML知识点的简要总结。
要成为一名优秀的前端工程师,还需要深入学习和实践这些知识,并学习相关的CSS和JavaScript知识才能掌握完整的前端技能。
html知识汇总_文库最全版本
HTML 30分钟入门教程作者:deerchao 转载请注明来源本文目标30分钟内让你明白HTML是什么,并对它有一些基本的了解。
一旦入门后,你可以从网上找到更多更详细的资料来继续学习。
什么是HTMLHTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比“文本”更丰富的意义,比如图片,表格,链接等。
浏览器(IE,FireFox 等)软件知道HTML语言的语法,可以用来查看HTML文档。
目前互联网上的绝大部分网页都是使用HTML编写的。
HTML是什么样的简单地来说,HTML的语法就是给文本加上表明文本含义的标签(Tag),让用户(人或程序)能对文本得到更好的理解。
下面是一个最简单的HTML文档:点击查看效果<html><head><title>第一个Html文档</title></head><body>欢迎访问<a href="">脚本之家</a>!</body></html>所有的HTML文档都应该有一个<html>标签,<html>标签可以包含两个部分:<head>和<body>。
<head>标签用于包含整个文档的一般信息,比如文档的标题(<title>标签用于包含标题),对整个文档的描述,文档的关键字等等。
文档的具体内容就要放在<body>标签里了。
<a>标签用于表示链接,在浏览器(如IE,Firefox等)中查看HTML文档时,点击<a>标签括起来的内容时,通常会跳转到另一个页面。
这个要跳转到的页面的地址由<a>标签的href 属性指定。
上面的<a href="">中,href属性的值就是。
HTML 基础知识点归纳分享
HTML 基础知识点归纳分享
HTML 的全称为 HyperText Markup Language,即超文本标志语言,最初是用于描述文档而设计。
从定义可以看出 HTML 的一些组成部分
元素是 HTML 的基本要素,元素有两种写法,一种是带内容的,一种是不带内容的
属性则为元素提供了更多的相关信息
元素可分为块级元素和行内元素。
块级元素 div 示例
内联元素 span 示例HTML 的每个元素或者属性都有特定的含义,我们称之为语义。
例如,ol 元素代表有序列表,lang 属性则代表内容的语言。
这些定义好的元素,可以让文档在不同的上下文中(比如扫瞄器和搜寻引擎处理文档时)展现出全都性。
同时,也为文档处理器提供一些额外的信息,这对于一些辅助设备而言(比如电子阅读器)是十分实用的。
用法类可以实现同样的展示效果,但是对于文档处理器而言,将捕捉不到任何有关语义的信息。
此外,HTML 还存在大量的扩展机制,可以平安的添加语义
第1页共3页。
前端基础HTML知识点汇总
HTML知识点汇总第一章HTML基础知识1、HTML简介HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息。
它是从SGML(Standard Generalized Markup Language,标准通用标识语言)中的一个子集演变而来的。
2、HTML的标记组成HTML用于描述功能的符号称为“标记”。
标记在使用时必须用尖括号“<>”括起来,而且是成对出现的,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。
如<body></body>、<p></p>等1)单标记:有些标记能完整的表达标记里的意思,只须在尖括号中输入标记名即可,这类标记叫单标记。
XHTML中要求单标记也必须闭合,即在标记“>”前添加斜杠。
常见的单标记如<br />、<hr />等。
2)双标记:双标记有头有尾,且前面的标记与后面的标记保持一致,但在后面的标记前有斜线,语法形如:<标记>内容</标记>。
例如:<p>段落</p>3)XHTML要求所有标记均为小写,且所有标记属性必须添加双引号4)标记对不能交叉3、HTML基本结构<html><head><title>网页标题</title></head><body><!--下面是网页的正文--></body></html>1)<title>标记对不能放在<body>标记对中,同理,其它表示内容的标记也不能放在<head>标记对中2)<html></html>表示HTML语言,在<html></html>里面包含头部(<head></head>)和内容体(<body></body>)。
html总结汇报模板
html总结汇报模板HTML总结汇报模板[字数:1000]一、引言(100-150字)在互联网领域,HTML(超文本标记语言)是构建网页的基础语言。
随着互联网的快速发展,越来越多的人开始学习和使用HTML,它逐渐成为了一种必备的技能。
本文旨在总结HTML 的基本知识、重要特点以及它在网页开发中的应用。
二、HTML的基本知识(200-300字)1. HTML的定义和作用HTML是一种标记语言,用于描述网页的结构和内容。
它由一系列的标签组成,每个标签由尖括号包围,用于标识不同的元素。
HTML文件由文本组成,可以用文本编辑器编写和编辑。
2. HTML的基本语法HTML的语法相对简单,由开始标签、内容和结束标签组成,例如`<tag>content</tag>`。
其中,开始标签标识元素的开始,结束标签标识元素的结束,而内容则是元素包含的文本或其他元素。
3. HTML的常见标签HTML有许多常见的标签,如`<html>`、`<head>`、`<body>`、`<h1>`等。
它们用于定义页面的整体结构、标题、段落、链接和图像等。
三、HTML的重要特点(200-300字)1. 按层次结构组织HTML将网页的内容组织成一个层次结构,从整体到细节,使得页面的结构清晰易懂。
开发者可以使用不同的标签来表示不同的元素,使得网页的内容和格式能够更好地呈现。
2. 跨平台和跨浏览器兼容性HTML是一种跨平台的语言,可以在不同的操作系统上运行。
同时,HTML也是一种跨浏览器兼容性较好的语言,各种浏览器都能够解析和渲染HTML代码。
3. 可扩展性强HTML通过使用不同的标签和属性,可以实现各种各样的功能和效果。
开发者可以根据自己的需求,灵活地扩展和定制网页的功能和样式。
四、HTML在网页开发中的应用(300-400字)1. 构建网页的结构HTML用于定义网页的整体结构,通过使用不同的标签来划分网页的不同部分,如导航栏、页头、内容区域和页脚等。
(完整)HTML初级知识点总结,最详细总结,文档
HTML超文本标记语言,一种标准预定义,已经定义好的各种标记,只需要我们把对应的标记放到合适的地址一 . HTML 根本语法与根本结构〔重点〕标记的使用1、标记一般成对出现,包含开始标记和结束标记2、标记能够嵌套使用,但是不能够交织使用3、标记不区分大小写属性的使用〔属性控制内容的格式,额外的格式〕1、书写地址在开始标记中2、格式:属性名=“属性值〞,多个属性之间使用空格切割3、不相同的标记属性可能相同也可能不相同4、属性使用的标记中,只能对本标中的内容记产生影响5、属性不矛盾时,收效叠加,属性矛盾时,就近原那么html 的根本结构<html>----声明网页<head>----网页的头部信息<title>标题 </title> ----网页的标题</head><body>----网页的主体,网页内容主要显现的局部网页的主要内容</body></html>二 . 文本格式的应用1、标题标记 <hn>,n 的取值 1 -6,1 级标题最大收效:加粗显示,带有自动换行属性: align 控制标题的对齐方式,取值left 〔左对齐,默认值〕| center 〔居中〕| right 〔右对齐〕2、段落标记 <p>收效:把内容分段显现,自动换行属性: align ,控制段落内容的对齐方式,取值 left 〔左对齐,默认值〕 |center 〔居中〕 | right 〔右对齐〕3、换行符 <br /> ,单标记,不需要结束标记,换行但不分段空格符号:  ;表示一个空格逼迫换行符: <br />4、水平线标记 <HR />,单标记收效:水平线 ,默认是一个粗细为2px〔像素〕的线条属性: size 控制水平线的粗细,取值为整数,单位为像素〔px〕width 控制水平线的长度,取值能够是像素单位,也能够是百分数〔相对于阅读器窗口百分比〕noshade设置水平线不带有阴影,该属性不需要取值color设置水平线的颜色,取值能够是英文的颜色值,也能够是十六进制的颜色代码align 控制水平线的对齐方式,取值left(左对齐)|center〔居中,默认值〕|right 〔右对齐〕5、分节标记 <div>收效:把内容设置为一节,前后带有自动换行属性: align 控制 div 中内容的对齐方式,取值 left 〔左对齐,默认值〕 | center〔居中〕 | right 〔右对齐〕6、居中标记符 <center>收效:把center 标记中的内容居中显示7、文本控制标记<font>收效:控制字体的各种显示样式1--7,数字越大字体越大,属性: size 控制字体的大小,取值为绝对值时,取相对值时,参照的是默认字体〔 3 号〕,取值在 -2--+4 之间color 控制字体的颜色face 控制字体的字体,取值能够是多个值,多个值之间使用逗号切割,取值时从左往右依次取值,找到合适的值为止,假设都不支持,使用默认格式显示8、字体的物理样式加粗: <b>斜体: <i>下划线: <u>删除线: <s>上标: <sup>下标: <sub>1、常用逻辑字符<ADDRESS>网页设计者或保护者的信息,平时显示为斜体<CITE>表示文本属于引用,平时显示为斜体<CODE>表示程序代码,平时显示为固定宽度字体<DFN>表示定义了的术语,平时显示为黑体或斜体<EM>重申某些字词,平时显示为斜体<KBD>表用户的键盘输入,平时显示为固定宽度字体<SAMP>表示文本样本,平时显示为固定宽度字体<STRONG>特别重申某些字词,平时显示为粗体<VAR>表示变量,平时显示为斜体2、列表标记1、有序列表, <ol>,需要配合 <li>标记使用一个 <li>标记对应一个选项ol 的属性: type控制列表的符号样式,取值1|A|a|i|I ,默认是 1start控制列表的初步值,取值为任意的整数li 的属性: type控制选项自己的符号样式,取值1|A|a|i|Ivalue控制选项自己的初步值,取值为任意整数,但是更正自己初步值此后,会对同一个列表中本选项此后的同级<li>标记产生影响2、无序列表, <ul>,配合 <li>标记使用一个 <li>标记对应一个选项ul 的属性: type控制所有选项的符号样式,取值 disc〔实心圆,默认值〕 |circle〔空心圆〕 |square 〔方块〕li 的属性: type控制选项自己的符号样式li 标记用在ol 中, type 属性的取值跟ol 的type属性取值走,用在ul 中,跟着ul 的 type 属性取值走3、定义列表,<dl>,完成对定义列表的声明<dt>,术语标记,能够理解为近似于列表选项的标题使用<dd>,描述标记,能够理解为近似于列表的选项使用三 . 在网页中使用图片标记: <img>,单标记,不需要结束标记属性:src引入图片资源的路径绝对路径:资源在效劳器上的地址,该地址是从盘符出发相对路径:资源在效劳器上的相对地址,从网页自己出发返回上一层文件夹width控制显示图片的宽度,取值为像素也许百分数height 控制显示图片的高度,取值为像素也许是百分数只设置宽度或高度时,图片保持等比缩放,同时设置时,同时见效border hspace vspace 控制显示图片的边框,取值为像素,默认不显示边框控制显示图片水平方向上的空白,取值为像素控制显示图片垂直方向上的空白,取值为像素align 控制图片和周围文本的对齐方式垂直方向上:top 文本和图片顶部对齐bottom 文本底部和图片底部对齐middle 文本的底部和图片的中部对齐absmiddle 绝对中间对齐,文本的中部和图片的中部对齐水平方向上: left 图片在左,文本在右right 文本在左,图片在右图片的对齐方式:借助 <div>也许 <p>四 . 在网页中使用超链接4、超链接标记: <a>...</a>,经过链接跳转到新的资源属性: href链接的目标资源的路径链接外面资源时,必然是绝对路径,并且需要在路径前加上【 :// 】这个网络通信协议target 指定超链接的翻开方式,_self 在自己的页面翻开超链接(默认的打开方式 ),_blank重新翻开一个新的阅读器窗口建立锚点〔书签〕内部书签1、设置锚点的名称比方:<a name="锚点名">...</a>2、使用超链接完成跳转比方: <a href="#锚点名 ">...</a>外面书签1、设置锚点的名称比方:<a name="锚点名">...</a>2、使用超链接完成跳转比方: <a href="锚点所在页面的路径#锚点名">...</a>超链接发送电子邮件,格式 <a href="mailto: 邮箱地址 "> 发送邮件 </a>2、链接多媒体五 . 表格的应用表格的结构<table>---声明表格<caption>...</caption> ---表格的标题<tr>----表格的行<td>....</td> ---表格的列....</tr><tr>----表格的行<td>....</td> ---表格的列....</tr>...</table><table>标记,定义表格,所有表格的内容书写在<table> 开始和 </table> 结束标记之间属性: frame 控制表格最外层的四个边框取值:void默认值,不显示边框above 仅显示上边框below 仅显示下边框hsides 显示上下边框vsides 显示左右边框lhs 仅显示左边框rhs 仅显示右边框box、 border 显示四个边框rules 控制表格内局部割线取值:none 默认值,不显示rows 显示行切割线cols 显示列切割线all 显示所有切割线bordercolor 控制边框的颜色border 控制表格的所有边框,取值为像素cellspacing 控制单元格与单元格之间的空白,取值为像素cellpadding 控制单元格内容和单元格边框之间的空白,取值为像素width设置单元格的宽度,取值为像素也许百分数height 设置单元格的高度,取值为像素也许百分数align 控制表格的对齐方式,取值 left( 默认值 )|center|rightbgcolor 设置表格的背景色background 设置表格的背景图当背景色和背景图同时设准时,优先使用背景图<caption>表格的标题,必定书写在<table>之间属性: align控制表格标题的地址,取值top( 标题在表格的顶部)| bottom〔标题在表格的底部〕<tr> 定义表格的行属性: align 控制整行单元格内容的水平对齐方式,取值left 〔默认值,缺省值〕 | center|rightvalign 控制整行单元格内容的垂直对齐方式,取值top|middle〔默认值〕|bottom height 设置行的高度,取值为像素bgcolor 设置行的背景色background 设置行的背景图bordercolor 设置行的边框颜色<td> 列标记<th>列标题标记都能够作为列使用,<th>列标题标记,内容有加粗显示的收效,并且带有自动居中属性: align 控制单元格内容的水平方向对齐方式,取值left|center|right valign控制单元格内容的垂直方向对齐方式,取值top|middle〔默认值〕|bottomheight 设置单元格的高度,取值以像素为单位,当同一行中不相同的单元格设置的高度也不相同时,整行的高度取值按最大值来width 设置单元格的宽度,取值以像素为单位,当同一列中不相同行的单元格设置的宽度不相同时,整列的宽度取值按最大值来bgcolor 设置单元格的背景色bakground 设置单元格的背景图rowspan 合并行colspan 合并列合并行和合并列的取值都是整数,合并几个单元格取值就是几六 . 框架的应用1、框架框架集标记 <frameset>,在原有的html 结构基础上, <frameset>代替了<body>的地址,换句话说,<frameset>和<body>不能够共存,只能出现一个属性:rows 设置横向框架的数量和高度,框架的数量取决于rows 属性的取值个数,每个框架的高度取决于值的大小cols 设置纵向框架的数量和宽度,框架的数量取决于cols 属性的取值个数,每个框架的宽度取决于值的大小rows 和 cols 的取值方式1、像素值2、百分数3、比率取值rows 和 cols 取值,能够有多个值,值与值之间使用逗号切割,并且不能够有空格格, cols 和 rows 属性一般不相同时设定,要想实现页面的纵向和横向切割,能够使用框架的嵌套来实现frameborder 使用在 frameset 中,能够控制框架集下的所有框架边框可否显示框架标记 <frame />,单标记属性: src引入目标资源的路径name给框架起名字,需要配合超链接的target属性来使用,到达链接目标框架的目的frameborder控制框架的边框可否显示,0 表示不显示,1显示默认的3D 边框scrolling控制框架可否参加转动条,取值yes(参加转动条,需要时加入)| no(不参加转动条 )| auto (需要时参加转动条,默认值)noresize 固定框架的边框,该属性不需要取值marginheight 在框架中显示内容时,控制内容和框架上下边框之间的空白,取值以像素为单位,以上边框为准marginwidth在框架中显示内容时,控制内容和框架左右边框之间的空白,取值以像素为单位,以左边框为准<noframes> 当阅读器不支持框架时,显示的代替内容,必定包含一对<body>标记使用七、表单的应用表单1.表单标记<form>,表单不能够嵌套使用,所有表单的内容必定书写在表单的开始标记和结束标记之间表单结构:<form><input type=〞text单行〞文>本格式<input type=〞password〞>密码输入框<input type=〞checkbox复选〞框>格式<input type=〞radio〞name=单〞选sex框格〞>式<input type=〞submit提交〞>的格式<input type=〞reset重置〞>格式<input type=〞button自定〞>义格式<select>下拉菜单格式<option> 汉族 </option><option> 满族 </option><option> 壮族 </option><option> 土家族 </option></select><textarea >cols="50" rows="4"> 请多多见教多行文本</textarea></form>表单域 <input>不相同功能的表单域type 属性的取值不相同属性:type控制表单域的功能取值text 单行文本password checkbox 密码输入框复选框radio 单项选择按钮要实现单项选择,还要在后边加上相同的名字,例:<input type=〞radio〞name=〞.....〞>submit 提交reset 重置button自定义按钮value 属性使用在提交、重置、自定定义按钮中,能够改变按钮的默认值 value 属性使用在单行文本和密码框中,增加默认值maxlength 属性使用在单行文本和密码框中,限制输入的最大字符数,取值为整数checked=“checked〞使用在复选框和单项选择框中,表示该选项默认被选中<select>....</select>,菜单里有多个选项,一般用于选择年.月.日属性 1:<option>...</option>,一对option代表一个下拉选项属性 2:<select>....</select>select代表一个下拉菜单,一对多行文本:<textarea > </textarea > 成对出现属性: cols= 〞 ....〞取值cols为整数,限制每行的最多内容(完满)HTML初级知识点总结,最详细总结,文档Rows=〞 ...〞取rows值为整数,限制多行文本的行数。
(完整版)HTML复习的知识点
第1章:网页的分类与扩展名、WEB标准(1)网页分类:静态网页、动态(2)扩展名:Html网页: .html, .htmCSS: .cssJavascript: .js(3)web标准结构标准: html表现标准:css层叠样式表行为标准:javaScript第2章:常见的HTML标记、常用的图片格式1、HTML标记<html>< /html>:创建一个HTML文档,也称根标记。
<head>< /head>:设置文档标题和其它在网页中不显示的信息,也成为头部标记。
<title>< /title>:设置文档的标题。
<body>< /body>:用于定义HTML文档所要显示的内容,也称主题标记。
<hr />:用来定义一条水平线。
<h1>< /h1>~<h6>< /h6>:最大的标题到最小的标题。
使用align属性加以下:left:设置标题文字左对齐;center:设置标题文字居中对齐;right:设置标题文字右对齐;<p></p>:创建一个段落。
<p align="">:将段落按左、中、右对齐。
使用align属性加以下:left:设置标题文字左对齐;center:设置标题文字居中对齐;right:设置标题文字右对齐;<br />:换行,插入换行符。
<meta />:定义页面元信息标记。
<font ></font>:规定文本的字体、字体尺寸、字体颜色。
font-family:字体font-weight:字体粗细font-variant:变体font-style:字体风格font:综合设置字体样式fac:设置文字的字体size:设置文字的大小color:设置文字的颜色CSS文本外观属性:letter-spacing字间距word-spacing单词间距line-height行间距text-align:left左对齐,height右对齐,center居中对齐<img src=”url” />src:图像的路径alt:图像不能显示时的替换文本title:鼠标悬停时显示的内容width:设置图像的宽度heighr:设置图像的高度border:设置图像边框的高度vspace:设置图像顶部和底部的空白(垂直边距)hspace:设置图像左侧和右侧的空白(水平边距)用align属性:left:将图像对齐到左边right:将图像对齐到右边top:将图像的顶端和文本的第一行文字对齐,其他文字居于图像下方middle:将图像的水平中线和文本的第一行文字对齐,其他文字居于图像下方bottom:将图像的底部和文本的第一行文字对齐,其他文字居于图像下方<div ></div>区域容器标记<span></span> 行内容器标记<ul type=>定义项目符号disc:●circle:○square:■<li></li>列表项,结合<ul> 无序<ol>有序使用<ul></ul>无序列表<ol></ol>有序列表<link href=”url”rel=stylesheet type=”text/css” />引入CSS样式表文件<a href=”跳转目标”><form>创建一个表单<input type=/>text:单行文本输入框password:密码输入框radio:单选按钮checkbox:复选框button:普通按钮submit:提交按钮reset:重置按钮image:图像形式的提交按钮hidden:隐藏域file:文件域<textarea cols=”每行中的字符数”rows=”显示的行数”></textarea><select><option></option></select>下拉菜单(2)常用的图片格式:JEPG,GIF,PNG第3章:CSS样式规则、引入CSS样式、CSS基础选择器、定义CSS样式,CSS 字体样式属性、CSS文本外观样式属性、复合选择器的定义1.Css样式规则选择器{属性1:属性1值;属性2:属性2值;}例:P{ Color : red ; Border : }或h2{ font-size : 20px ; color : red ; }2、引入css样式方式(1)行内式<标记名style=” 属性1:属性1值; 属性2:属性2值”>内容</标记名>例:<h2 style = “ font-size : 20px ; color : red ; ”></h2>(2)内嵌式例:<style type=”text/css”></style>选择器{属性1:属性1值;属性2:属性2值;}(3)链入式<link href=”cssURL” rel= “stylesheet” type=”text/css”/>3、css基础选择器(1)标记选择器p{ }(2)类选择器.类名(3)id选择器#id(4)通配符选择器*{}4、复合选择器(书本P66)(1)标签指定式选择器p.speacial{ } 书本demo3-8(2)后代选择器p strong{ } 书本demo3-9(3)并集选择器p,div{ } 书本demo3-105、CSS字体属性font-family:字体font-variant:变体font-style:字体风格italic:斜体font-weight:字体粗细font:综合设置字体样式6、外观属性color:text_decoration:文本装饰underline下划线overline上划线line-through删除线text-align:水平对齐方式left左对齐right右对齐center居中对齐text-indent:首行缩进2em:2字符line-height:行间距第4章CSS盒子模型:认识盒子、边框属性内外边距属性、设置背景图像、行内元素及块元素1、认识盒子(书本p79图4-5)基础属性:width:宽height:高padding内边距四个方向值:上,右,下,左;top,right,left,bottom两个值时为上下,左右;一个值时为四边;三个值时为上,左右,下;margin: 外边距border:边框2、边框属性(1)border-style:border-width:border-color:综合:border: border-width边框宽度border-style边框样式border-color边框颜色;border:1px solid red; 四个方向都是相同的设置(2)某个方向设置border-top-style:上边框样式border-top -width:上边框宽度border-top -color:上边框颜色综合:border-top border-top-width borde-top-style border-top-color;border-top:1px solid red; 只是对上边框的设置3、背景属性(书本P95页)background-color:背景颜色background-image:背景图像背景图像平铺:background-repeat::repeat-x只沿水平方向平铺repeat-y只沿垂直方向平铺no-repeat不平铺background-position:水平垂直Left/center/right top/center/bottom20px/-10px 30px;20px center综合:4.行内元素及块元素(1)行元素:P103 <span> <img/> <a/> <input> <select>块元素:P102 <h1> <p> <div> <ul> <li> <form> (2)元素转换display:Inline: 行内元素Block:块元素Inline-block:行内块元素None:隐藏第5章列表与超链接超链接标记<a> 链接的伪类1.超链接标记<a />href:用于链接目标的url地址target: _self在原窗口打开_blank在新窗口打开border=”0”去掉图像边框P1272.链接的伪类a:link{CSS样式规则;}未访问时超链接的状态a:visited{CSS样式规则;}访问后超链接的状态a:hover{CSS样式规则;}鼠标经过、悬停时超链接的状态a:acrtive{CSS样式规则;}鼠标单击不动时超链接的状态第6章HTML表单认识表单、创建表单、input控件1、认识表单P138<input/>表单输入控件<textarea></textarea>定义多行文本框<select></select>定义一个下拉列表size指定下拉菜单的可见选项数<option>用selected属性时,当前项就为默认选中项action用于指定接收并处理表单数据的url地址method用于设置表单数据的提交方式,其取值为get和post2、创建表单<form action=”url地址” method=”提交方式” name=”表单名称” > </form> 3.input控制P143表6-2第7章浮动与定位:float属性、clear属性元素的定位属性、利用盒子模型与浮动进行页面布局1.float:left左浮动right右浮动none不浮动2.clear:清除当前元素的浮动对其后元素影响。
html学习总结
html学习总结HTML学习总结HTML(HyperText Markup Language)是用于创建网页结构的标记语言。
作为前端开发者,学习和掌握HTML是不可或缺的基础知识。
通过HTML,我们可以定义网页的结构、布局和内容。
下面是我对HTML 学习的总结和经验分享。
一、HTML的基本结构HTML文档以<!DOCTYPE>声明开始,这个声明告诉浏览器使用哪个HTML版本来进行解析。
之后是<html>标签,它是HTML文档的根元素。
在<html>标签内,我们通常使用<head>和<body>标签。
<head>标签包含了与文档信息相关的内容,如标题(<title>)、样式表(<link>)和脚本(<script>)。
而<body>标签则包含了页面的实际内容,如文本、图像和链接等。
二、HTML元素和标签HTML元素由开始标签、元素内容和结束标签组成。
开始标签用尖括号包围,结束标签在标签名前加上斜杠。
元素内容是指标签包裹的内容,如在<p>标签中的文字或图片等。
HTML提供了各种标签,如标题标签(<h1>到<h6>)、段落标签(<p>)、链接标签(<a>)等。
我们可以根据需要选择合适的标签来描述和组织页面内容。
三、HTML属性HTML标签可以包含属性,属性提供了进一步的信息或功能。
属性以名称-值对的形式出现在开始标签中,如<a href="网页链接地址">。
常见的HTML属性包括class、id、src、alt等,它们用于定义元素的样式和行为。
四、HTML多媒体元素HTML支持多媒体元素的嵌入,如图像(<img>)、音频(<audio>)和视频(<video>)。
网页设计技术知识点
网页设计技术知识点一、HTML基础知识HTML(超文本标记语言)是构建网页的基础语言,熟悉HTML的基础知识是进行网页设计的必备条件。
1. HTML标签HTML使用标签来定义网页的结构和内容。
常见的HTML标签包括:- `<html>`:定义HTML文档- `<head>`:定义文档的头部信息- `<title>`:定义文档的标题- `<body>`:定义文档的主体内容2. HTML元素HTML标签可以包含内容,这些包含在标签内的内容称为HTML元素。
常见的HTML元素包括:- `<h1>`至`<h6>`:定义标题- `<p>`:定义段落- `<a>`:定义链接- `<img>`:定义图像- `<ul>`和`<li>`:定义无序列表3. HTML属性HTML标签可以拥有属性,属性为元素提供额外的信息。
常见的HTML属性包括:- `id`:定义元素的唯一标识符- `class`:定义元素的类名- `src`:定义图像的源路径- `href`:定义链接的目标地址二、CSS样式与布局CSS(层叠样式表)用于定义网页的外观和布局,掌握CSS的使用可以使网页更加具有吸引力和易读性。
1. CSS选择器CSS选择器用于选择需要样式化的HTML元素。
常见的CSS选择器包括:- 元素选择器:如`p`选择所有段落元素- 类选择器:如`.container`选择类名为container的元素- id选择器:如`#header`选择id为header的元素2. CSS样式属性CSS样式属性用于设置元素的外观,常见的CSS样式属性包括:- `color`:设置文本颜色- `font-size`:设置文字大小- `background-color`:设置背景颜色- `margin`和`padding`:设置元素的边距和内边距3. CSS布局技巧- 相对定位(`position: relative`):相对于元素原本所在位置进行定位- 绝对定位(`position: absolute`):相对于最近的具有相对或绝对定位的父元素进行定位- 浮动(`float`):使元素脱离文档流,使其他内容围绕其周围布局三、响应式设计与移动优先随着移动设备的普及,网页设计需注重响应式设计和移动优先的原则,以适应不同屏幕尺寸的设备。
HTML基础知识点总结
HTML基础知识点总结HTML(Hypertext Markup Language)是一种用于创建网页的标记语言,是所有网页的基础。
下面是对HTML基础知识点的总结。
HTML文档结构:常见的HTML元素:- `<html>`:定义HTML文档- `<head>`:定义文档的头部区域,包含元数据(如标题、样式表、脚本等)- `<body>`:定义文档的主体区域,包含可见的内容(如文本、图像、链接等)-`<h1>`到`<h6>`:定义标题,数字越小,字体越大-`<p>`:定义段落- `<br>`:定义换行- `<a>`:定义链接,使用`href`属性指定链接地址- `<img>`:定义图像,使用`src`属性指定图像地址- `<ul>`和`<li>`:定义无序列表- `<ol>`和`<li>`:定义有序列表- `<table>`、`<tr>`、`<td>`:定义表格及其行和单元格HTML属性:HTML元素可以有属性,属性为元素提供附加的信息。
常见的属性有:- `class`:为元素定义一个或多个类名,用于为元素指定样式- `id`:为元素定义唯一的标识符,用于通过JavaScript或CSS选择元素- `style`:为元素定义内联样式- `src`:用于图像和脚本元素,指定资源的URL- `href`:用于链接元素,指定链接的URL- `alt`:用于图像元素,指定图像无法显示时的替代文本HTML头部元素:- `<title>`:定义文档的标题,显示在浏览器的标题栏或选项卡上- `<meta>`:定义元数据,如字符集、关键字、描述等- `<link>`:用于引入外部样式表和脚本文件- `<style>`:用于嵌入CSS样式规则HTML文本格式化:-`<b>`:定义加粗文本-`<i>`:定义斜体文本-`<u>`:定义下划线文本-`<s>`:定义删除线文本- `<sub>`:定义下标文本- `<sup>`:定义上标文本HTML块级元素和内联元素:- 块级元素在浏览器显示时通常会以新行开始和结束,并占据可用空间的整个宽度,如`<div>`、`<p>`、`<h1>`等- 内联元素不会导致新行的开始和结束,只占据它所需的宽度,如`<span>`、`<a>`、`<strong>`等HTML注释:HTML注释用于向开发人员添加注释,而不会在浏览器中显示,可以用来记录代码的作用或使用方法。
html基础总结
html基础总结HTML基础总结HTML(超文本标记语言)是一种用于构建网页的标记语言,它定义了网页的结构和内容。
在学习HTML基础时,我们需要掌握一些基本的标签和属性,以及它们的用法和作用。
一、HTML的基本结构一个HTML文件通常由以下几个部分组成:<!DOCTYPE> 声明文档类型<html> 标记文档的根元素<head> 包含文档的元信息<title> 定义文档的标题<body> 包含文档的内容二、HTML的基本标签1. 标题标签<h1>到<h6>标签用于定义标题的级别,其中<h1>是最高级别的标题,<h6>是最低级别的标题。
2. 段落标签<p>标签用于定义段落,其中的文本会自动换行,并有默认的上下间距。
3. 文本格式化标签<b>标签用于加粗文本;<i>标签用于斜体文本;<u>标签用于给文本添加下划线;<s>标签用于给文本添加删除线;<sup>标签用于上标文本;<sub>标签用于下标文本。
4. 列表标签有序列表使用<ol>标签,无序列表使用<ul>标签,列表项使用<li>标签。
5. 链接标签<a>标签用于创建链接,通过href属性指定链接的地址。
6. 图像标签<img>标签用于插入图像,通过src属性指定图像的地址。
7. 表格标签<table>标签用于创建表格,<tr>标签用于创建表格的行,<td>标签用于创建表格的单元格。
8. 表单标签<form>标签用于创建表单,<input>标签用于创建表单的输入字段,<select>标签用于创建下拉列表,<textarea>标签用于创建多行文本输入框。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
HTML超文本标记语言,一种规预定义,已经定义好的各种标记,只需要我们把对应的标记放到合适的位置一. HTML基本语法与基本结构(重点)标记的使用1、标记一般成对出现,包含开始标记和结束标记2、标记可以嵌套使用,但是不能交叉使用3、标记不区分大小写属性的使用(属性控制容的格式,额外的格式)1、书写位置在开始标记中2、格式:属性名=“属性值”,多个属性之间使用空格分割3、不同的标记属性可能相同也可能不同4、属性使用的标记中,只能对本标中的容记产生影响5、属性不冲突时,效果叠加,属性冲突时,就近原则html的基本结构<html>----声明网页<head>----网页的头部信息<title>标题</title>----网页的标题</head><body>----网页的主体,网页容主要展示的部分网页的主要容</body></html>二. 文本格式的应用1、标题标记<hn>,n的取值1-6,1级标题最大效果:加粗显示,带有自动换行属性:align控制标题的对齐方式,取值left(左对齐,默认值)|center(居中)|right(右对齐)2、段落标记<p>效果:把容分段展示,自动换行属性:align,控制段落容的对齐方式,取值left(左对齐,默认值)|center(居中)|right(右对齐)3、换行符<br />,单标记,不需要结束标记,换行但不分段空格符号: 表示一个空格强制换行符:<br />4、水平线标记<HR />,单标记效果:水平线,默认是一个粗细为2px(像素)的线条属性:size 控制水平线的粗细,取值为整数,单位为像素(px)width 控制水平线的长度,取值可以是像素单位,也可以是百分数(相对于浏览器窗口百分比)noshade设置水平线不带有阴影,该属性不需要取值color 设置水平线的颜色,取值可以是英文的颜色值,也可以是十六进制的颜色代码align 控制水平线的对齐方式,取值left(左对齐)|center(居中,默认值)|right(右对齐)5、分节标记<div>效果:把容设置为一节,前后带有自动换行属性:align控制div中容的对齐方式,取值left(左对齐,默认值)|center(居中)|right(右对齐)6、居中标记符<center>效果:把center标记中的容居中显示7、文本控制标记<font>效果:控制字体的各种显示样式属性:size 控制字体的大小,取值为绝对值时,1--7,数字越大字体越大,取相对值时,参考的是默认字体(3号),取值在-2--+4之间color 控制字体的颜色face 控制字体的字体,取值可以是多个值,多个值之间使用逗号分割,取值时从左往右依次取值,找到合适的值为止,假如都不支持,使用默认格式显示8、字体的物理样式加粗:<b>斜体:<i>下划线:<u>删除线:<s>上标:<sup>下标:<sub>1、常用逻辑字符<ADDRESS> 网页设计者或维护者的信息,通常显示为斜体<CITE> 表示文本属于引用,通常显示为斜体<CODE> • 表示程序代码,通常显示为固定宽度字体<DFN> • 表示定义了的术语,通常显示为黑体或斜体<EM> 强调某些字词,通常显示为斜体<KBD> 表用户的键盘输入,通常显示为固定宽度字体<SAMP> 表示文本样本,通常显示为固定宽度字体<STRONG> 特别强调某些字词,通常显示为粗体<VAR> 表示变量,通常显示为斜体2、列表标记1、有序列表,<ol>,需要配合<li>标记使用一个<li>标记对应一个选项ol的属性:type 控制列表的符号样式,取值1|A|a|i|I,默认是1start 控制列表的起始值,取值为任意的整数li的属性:type控制选项自身的符号样式,取值1|A|a|i|Ivalue控制选项本身的起始值,取值为任意整数,但是修改自身起始值之后,会对同一个列表中本选项之后的同级<li>标记产生影响2、无序列表,<ul>,配合<li>标记使用一个<li>标记对应一个选项ul的属性:type 控制所有选项的符号样式,取值disc(实心圆,默认值)|circle (空心圆)|square(方块)li的属性:type控制选项本身的符号样式li标记用在ol中,type属性的取值跟ol的type属性取值走,用在ul中,跟着ul的type属性取值走3、定义列表,<dl>,完成对定义列表的声明<dt>,术语标记,可以理解为类似于列表选项的标题使用<dd>,描述标记,可以理解为类似于列表的选项使用三. 在网页中使用图片标记:<img>,单标记,不需要结束标记属性:src 引入图片资源的路径绝对路径:资源在服务器上的位置,该位置是从盘符出发相对路径:资源在服务器上的相对位置,从网页本身出发..\返回上一层文件夹width 控制显示图片的宽度,取值为像素或者百分数height控制显示图片的高度,取值为像素或者是百分数只设置宽度或高度时,图片保持等比缩放,同时设置时,同时生效border控制显示图片的边框,取值为像素,默认不显示边框hspace控制显示图片水平方向上的空白,取值为像素vspace控制显示图片垂直方向上的空白,取值为像素align 控制图片和周围文本的对齐方式垂直方向上:top 文本和图片顶部对齐bottom文本底部和图片底部对齐middle文本的底部和图片的中部对齐absmiddle绝对中间对齐,文本的中部和图片的中部对齐水平方向上:left 图片在左,文本在右right文本在左,图片在右图片的对齐方式:借助<div>或者<p>四. 在网页中使用超4、超标记:<a>...</a>,通过跳转到新的资源属性:href的目标资源的路径外部资源时,一定是绝对路径,并且需要在路径前加上【】这个网络通信协议target 指定超的打开方式,_self在自身的页面打开超(默认的打开方式),_blank重新打开一个新的浏览器窗口建立锚点(书签)部书签1、设置锚点的名称例如:<a name="锚点名">...</a>2、使用超完成跳转例如:<a href="#锚点名">...</a>外部书签1、设置锚点的名称例如:<a name="锚点名">...</a>2、使用超完成跳转例如:<a href="锚点所在页面的路径#锚点名">...</a>超发送电子,格式<a href="mailto:地址">发送</a>2、多媒体五. 表格的应用表格的结构<table>---声明表格<caption>...</caption>---表格的标题<tr>----表格的行<td>....</td>---表格的列....</tr><tr>----表格的行<td>....</td>---表格的列....</tr>...</table><table>标记,定义表格,所有表格的容书写在<table>开始和</table>结束标记之间属性:frame 控制表格最外层的四个边框取值:void 默认值,不显示边框above 仅显示上边框below 仅显示下边框hsides 显示上下边框vsides 显示左右边框lhs 仅显示左边框rhs 仅显示右边框box、border 显示四个边框rules 控制表格部分割线取值:none 默认值,不显示rows 显示行分割线cols 显示列分割线all 显示所有分割线bordercolor 控制边框的颜色border 控制表格的所有边框,取值为像素cellspacing 控制单元格与单元格之间的空白,取值为像素cellpadding 控制单元格容和单元格边框之间的空白,取值为像素width 设置单元格的宽度,取值为像素或者百分数height 设置单元格的高度,取值为像素或者百分数align 控制表格的对齐方式,取值left(默认值)|center|rightbgcolor 设置表格的背景色background 设置表格的背景图当背景色和背景图同时设定时,优先使用背景图<caption>表格的标题,必须书写在<table>之间属性:align 控制表格标题的位置,取值top(标题在表格的顶部)|bottom (标题在表格的底部)<tr> 定义表格的行属性:align控制整行单元格容的水平对齐方式,取值left(默认值,缺省值)|center|rightvalign 控制整行单元格容的垂直对齐方式,取值top|middle(默认值)|bottomheight 设置行的高度,取值为像素bgcolor设置行的背景色background 设置行的背景图bordercolor设置行的边框颜色<td> 列标记<th>列标题标记都可以作为列使用,<th>列标题标记,容有加粗显示的效果,并且带有自动居中属性:align控制单元格容的水平方向对齐方式,取值left|center|right valign控制单元格容的垂直方向对齐方式,取值top|middle(默认值)|bottomheight设置单元格的高度,取值以像素为单位,当同一行中不同的单元格设置的高度也不相同时,整行的高度取值按最大值来width设置单元格的宽度,取值以像素为单位,当同一列中不同行的单元格设置的宽度不相同时,整列的宽度取值按最大值来bgcolor 设置单元格的背景色bakground设置单元格的背景图rowspan合并行colspan合并列合并行和合并列的取值都是整数,合并几个单元格取值就是几六. 框架的应用1、框架框架集标记<frameset>,在原有的html结构基础上,<frameset>替换了<body>的位置,换句话说,<frameset>和<body>不能共存,只能出现一个属性:rows 设置横向框架的数量和高度,框架的数量取决于rows属性的取值个数,每个框架的高度取决于值的大小cols设置纵向框架的数量和宽度,框架的数量取决于cols属性的取值个数,每个框架的宽度取决于值的大小rows和cols的取值方式1、像素值2、百分数3、比例取值rows和cols取值,可以有多个值,值与值之间使用逗号分割,并且不能有空格格,cols和rows属性一般不同时设定,要想实现页面的纵向和横向分割,可以使用框架的嵌套来实现frameborder使用在frameset中,可以控制框架集下的所有框架边框是否显示框架标记<frame />,单标记属性:src 引入目标资源的路径name给框架起名字,需要配合超的target属性来使用,达到目标框架的目的frameborder 控制框架的边框是否显示,0表示不显示,1显示默认的3D边框scrolling 控制框架是否加入滚动条,取值yes(加入滚动条,需要时加入)|no(不加入滚动条)|auto(需要时加入滚动条,默认值)noresize 固定框架的边框,该属性不需要取值marginheight 在框架中显示容时,控制容和框架上下边框之间的空白,取值以像素为单位,以上边框为准marginwidth在框架中显示容时,控制容和框架左右边框之间的空白,取值以像素为单位,以左边框为准<noframes>当浏览器不支持框架时,显示的替换容,必须包含一对<body>标记使用七、表单的应用表单1.表单标记<form>,表单不能嵌套使用,所有表单的容必须书写在表单的开始标记和结束标记之间表单结构:<form><input type=”text”> 单行文本格式<input type=”password”> 密码输入框<input type=”checkbox”> 复选框格式<input type=”radio”name=”sex”>单选框格式<input type=”submit”>提交的格式<input type=”reset”>重置格式<input type=”button”>自定义格式<select> 下拉菜单格式<option>汉族</option><option>满族</option><option>壮族</option><option>土家族</option></select><textarea >cols="50" rows="4">请多多指教多行文本</textarea></form>表单域<input>不同功能的表单域type属性的取值不同. . .. . .属性:type控制表单域的功能取值text单行文本password密码输入框checkbox复选框radio单选按钮要实现单选,还要在后面加上一样的名字,例:<input type=”radio”name=”.....”>submit提交reset重置button 自定义按钮value属性使用在提交、重置、自定定义按钮中,可以改变按钮的默认值value属性使用在单行文本和密码框中,添加默认值maxlength属性使用在单行文本和密码框中,限制输入的最大字符数,取值为整数checked=“checked”使用在复选框和单选框中,表示该选项默认被选中<select>....</select>,菜单里有多个选项,一般用于选择年. 月. 日属性1:<option>...</option>,一对option代表一个下拉选项属性2:<select>....</select>,一对select 代表一个下拉菜单多行文本:<textarea > </textarea >成对出现属性:cols=”....” cols取值为整数,限制每行的最多容Rows=”...” rows取值为整数,限制多行文本的行数.. .专业. .。