01-HTML基本结构及常用标签
HTML基础总结
表单
Type的用法 类型 Text Password Radio Chexkbox Reset File Submit Image Button Hidden 功能 单行文本输入 密码 单选 多选 重置表单数据按钮 文件上传 提交表单数据按钮 图形提交按钮 普通按钮 隐藏域
表单
注意点
文本框value及size 2. 单选按钮checked,name 3. 复选框的name要一致 4. 下拉列表selecked默认选中和 value值 5. 禁用disabled 6. 文本域具有name、cols和rows属性。cols和rows 属性分别用来设置文本框的列数和行数和只读 readonly
1.
常用标签注意
注意点 如果把<br>加在<p></p>标志对的外边，将创 建一个大的回车换行，即<br>前边和后边的文 本的行与行之间的距离比较大。若放在<p></p> 的里边则<br>前边和后边的文本的行与行之间 的距离将比较小。 <h1>字号最大<h6>字号最小 <hr>没有结束标记. size用来设置水平线的厚度， 而width用来设定水平线的宽度，默认单位是像 素。noshade属性不用赋值，而是直接加入标 志即可使用，它是用来加入一条没有阴影的水 平线，不加入此属性水平线将有阴影。
CSS样式
CSS基本语法 <style type=“text/css”> 选择器{ 对象的属性 : 属性值; } </style> CSS优势
内容和样式的分离 2. 样式复用提高效率 3. 页面控制精确 4. 有利于搜索引擎搜索
HTML课程 总结复习
HTML常用标签
属性 值 说明
src URL flash路径
width 像素/百分比 flash宽度
height 像素/百分比 flash高度
wmode windows 使flash自身的矩形窗口来播放
middle 文字靠中
bottom 文字靠下
空隙的设置
属性名称 属性值 说明
vspace 像素 垂直上下两端与物件的距离
hspace 像素 水平左右两段与物件的距离
创建下划线<u>...</u>
删除线 <s>...</s>
< <
> >
& &
" "
注释 <!-- -->
创建打字机风格的字体 <tt></tt>
创建一个引用，通常是斜体 <cite></cite>
内容以上标的形式显示<sup></sup>[添加指数值，或者在日期后面添加st、nd、rd、th后缀]
4.mailto
<a href=mailto:bnbbs@>E-MAIL</a>
创建一个超链接 <a href="URL"></a>
创建一个自动发送电子邮件的链接 <a href="mailto:EMAIL">.... </a>
创建一个位于文档内部的靶位 <a name="NAME"></a>
HTML中主要标签有哪些-文字标签-布局常用标签
HTML中主要标签有哪些-文字标签-布局常用标签在HTML中的主要标签有这些：文件开始标签“html〞、文件头部标签“head〞、文件主体标签“body〞。
如果想具体了解HTML 中主要标签有哪些，那无妨接着往下看吧!一、HTML中主要标签有哪些1、文件开始标签“html〞在HTML文件中，最先出现的是HTML标签就是“html〞，它表示这是HTML文件，它是双标签，首标签和尾标签分别位于文件的最前面和最后面，文件所有标签和文本都包涵在其中，该标签不带任何属性。
2、文件头部标签“head〞“head〞表示文件头部的标签，它是双标签，它包涵文件的标题、编码方式及URL等信息，可省略。
3、文件主体标签“body〞“body〞表示文件主体内容，它是双标签。
文件头部标签用以存储重要信息，而只有主体部分会被显示，所以大部分标记都位于文件主体部分。
该标签可带属性。
二、网页〔制定〕的常用文字标签1、标题文字标签“hn〞“hn〞为标题文字标签，它是一个双标签，其作用是设置网页中的标题文字。
“hn〞标签一共6级，“h1〞和“h1〞之间的文字是第1级标题，“h6〞和ch6〞之间的文字是第6级标题，由“hl〞到“h6〞逐渐变小。
每个标题标记所标示的字句将独占一行且上下留一空白行。
“hn〞有一个属性align，其属性可选值为：right、left、center。
2、文字格式控制标签“font〞“font〞为文字格式控制标签，它是一个双标签，其作用是设置文字的字体、大小和颜色。
“font〞的属性有face、size、color。
face：设定文字字体，其属性为字体名称。
size：设定文字大小，取值1~7，默认值为3。
也可用“+〞“-〞来设置相对值。
color：设定文字颜色。
可以用和#nnnnnn，也可以采纳颜色的名称。
三、页面布局常用标签1、换行标签“br〞“br〞为换行标签，它是一个单标签，作用是令其后的内容在下一行显示。
HTML教材
４、水平线标签
格式：<hr> 说明：该标签可以用来在页面上插入一条水平标尺线。 属性： align size 用来设定横线放置的位置。取值有：left、right和center。 用来设定线条粗细，取值为n个像素，默认为2。
width 用来设定线段长度，取值可为绝对值（n个像素）或相对值 （相对于当前窗口的百分比），默认值为100%。
来自
2.3.1 网页结构类标签（续上） 续上）
格式：<body>……</body> 说明：位于头部之后，以<body>开始，直到</body>结束。定义了 网页上显示的主要内容与显示格式，是整个网页的核心，浏览器 窗口中所能显示的内容全部被包含在该标签中。 属性：用于设定网页的总体风格。其中： bgcolor 设置网页的背景色。 background 设置网页的背景图像。 text 设置网页文本的颜色。 link 设置尚未被访问过的超链接颜色，默认为蓝色。 vlink 设置已被访问过的超链接颜色，默认为蓝色。 alink 设置一个正被激活的超链接颜色，默认为红色。
所示。 【例2-3】列表类标签演示，如图 】列表类标签演示，如图2-3所示。 所示
其代码如下：
<HTML> <HEAD> <TITLE>列表类标签演示 列表类标签演示</TITLE> 列表类标签演示 </HEAD> <BODY> <UL TYPE="CIRCLE"> <LI> <P ALIGN="LEFT"><FONT FACE=黑体 SIZE=5 黑体 COLOR=RED>公司口号 公司口号</FONT></LI> 公司口号 <OL TYPE="A"> <LI><P ALIGN="LEFT">开拓创新、追求无限 开拓创新、 开拓创新 追求无限</LI> <LI><P ALIGN="LEFT">度身设计、专业服务 度身设计、 度身设计 专业服务</LI> <LI><P ALIGN="LEFT">科技领先、群策管理 科技领先、 科技领先 群策管理</LI> </OL> <LI><P ALIGN="LEFT"><FONT FACE=黑体 SIZE=5 黑体 COLOR=RED>产品介绍 产品介绍</FONT></LI> 产品介绍 <OL> <LI><P ALIGN="LEFT">GJF、GJF—F系列臭氧发生器 、 系列臭氧发生器 </LI> <LI><P ALIGN="LEFT">GSK、GZK系列臭氧发生器电源控制 、 系列臭氧发生器电源控制 系统</LI> 系统 <LI><P ALIGN="LEFT">GJF-T系列臭氧发生器 系列臭氧发生器</LI> 系列臭氧发生器 <LI><P ALIGN="LEFT">GYD、GYD—F系列臭氧发生器 、 系列臭氧发生器 </LI> </OL> </UL> </BODY> </HTML>
html标签ppt
• 我们所要了解的，就是知道网页中我们看到的元素和 HTML代码的一一对应关系,并能手写简单的页面
HTML文档的编写方法
1. 手工直接编写
– 记事本等，存成.htm .html格式
• 使用可视化HTML编 辑 器
– Frontpage、Dreamweaver等
网页设计之HTML
主要内容
• 第一课目标：HTML简介，HTML语言的标记 语法和文档结构，介绍常用标签（文字，图片， 表格）
• 第二课目标：表单，层，框架,CSS标签的介 绍
HTML第一课目标
1． HTML简介 2． HTML语言的标记语法和文档结构 3． 介绍常用标签（文字，图片，表格）及其 属性 4. 手动编写简单的网页
第一张网页
<html> <head> <title>第一张网页</title> </head> <body> 欢迎光临我的主页！ </body>
</html>
基本组成部分—— HTML元素属性
• HTML元素可以有自己的相关属性，每一个属 性还可以由我们网页编制者赋一定的值。元素 属性出现在元素的< >内，并且和元素名之间 有一个空格分隔；属性值用“”引起来。
第二张网页
<html> <head> <title>第一张网页</title> </head> <body> <p align="center">欢迎光临我的主页!</p> </body>
HTML代码简介(html入门必看)
示例
<html> <head><title>字体颜色 font color</title></head> <body> <p>这段文字用的是缺省的字体颜色。</p> <p><font color="#FF0000">这段文字的字体颜色 为红色。</font></p> </body> </html>
本文由露之珠网络收藏夹提供
HTML注释
在HTML文件里，你可以写代码注释，解释 说明你的代码，这样有助于你和他人日后 能够更好地理解你的代码。 注释可以写在<!--和-->之间。浏览器是忽略 注释的，你不会在HTML正文中看到你的注 释。 <!-- This is a comment -->
本文由露之珠网络收藏夹提供
HTML常用文本格式
HTML定义了一些文本格式的Tag，比如利 用Tag，可以将字体变成粗体或者斜体。从 下面的示例，你可以了解各种文本格式Tag 如何改变HTML文本的显示。 常用文本格式Tag
<b></b>粗体bold
<i></i>斜体 <U></U>下划线
HTML代码简介
主要内容
HTML的基本结构 HTML语言的语法 HTML语言的常用标识网站设计基础知识
本文由露之珠网络收藏夹提供
HTML 文档的结构
基本结构：
HTML 部分 文档头部分 正文部分
<HTML> <HEAD> <TITLE>欢迎进入 HTML 世界</TITLE> </HEAD> <BODY> <P>这会是一种很有趣的体验</P> </BODY> </HTML>
HTML基础知识
HTML学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。
HTML标记语言也不例外，同样需要遵从一定的规范。
接下来将具体讲解HTML文档的基本格式。
HTML文档的基本格式主要包括<!DOCTYPE>文档类型声明、<html〉根标记、<head〉头部标记、<body〉主体标记,具体介绍如下：(1）<！DOCTYPE>标记<!DOCTYPE> 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML 或XHTML（可扩展超文本标记语言）标准规范，必需在开头处使用<！DOCTYPE〉标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档,并按指定的文档类型进行解析。
（2)〈html〉〈/html〉标记〈html>标记位于〈!DOCTYPE〉标记之后，也称为根标记，用于告知浏览器其自身是一个HTML 文档，<html>标记标志着HTML文档的开始，〈/html>标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。
在〈html>之后有一串代码“xmlns=”/1999/xhtml"”用于声明XHTML统一的默认命名空间.（3）<head〉</head〉标记<head〉标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html〉标记之后，主要用来封装其他位于文档头部的标记，例如〈title〉、<meta>、〈link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。
一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
（4)〈body>〈/body〉标记<body〉标记用于定义HTML文档所要显示的内容，也称为主体标记.浏览器中显示的所有文本、图像、音频和视频等信息都必须位于〈body>标记内，<body>标记中的信息才是最终展示给用户看的.一个HTML文档只能含有一对<body>标记，且〈body>标记必须在〈html〉标记内，位于<head>头部标记之后，与〈head>标记是并列关系.在HTML页面中，带有“〈〉”符号的元素被称为HTML标记，如上面提到的〈html〉、〈head〉、<body〉都是HTML标记。
html基本语法及常用控件的使用方法
1. 什么是HTML？HTML是HyperText Markup Language的缩写，即超文本标记语言。
它是一种用于创建和呈现网页的标准标记语言，由一系列标签组成，这些标签可以用来描述网页的结构和内容。
2. HTML的基本语法HTML文档由以下几个部分组成：- <!DOCTYPE html>：声明文档类型，告诉浏览器使用哪种HTML版本来显示网页。
- <html>：整个HTML文档的开头和结尾，包含了网页的所有内容。
- <head>：包含了网页的元信息，如标题、信息和脚本等。
- <title>：设置网页的标题，在浏览器的标签栏中显示。
- <body>：包含了网页的主要内容，如文本、图片、信息等。
3. 常用的HTML标签- <h1>~<h6>：定义标题，共有六个级别，分别表示不同大小的标题。
- <p>：定义段落，用来展示文本内容。
- <a>：定义超信息，可以信息到其他网页或文件。
- <img>：插入图片，用来显示图片。
- <ul>和<ol>：分别定义无序列表和有序列表。
- <li>：定义列表项，在<ul>或<ol>中使用。
4. HTML常用控件的使用方法- 输入框：<input type="text">用于接收用户输入的文本。
- 按钮：<input type="button">用于触发事件或提交表单。
- 复选框：<input type="checkbox">用于多选项的选择。
- 单选按钮：<input type="radio">用于单选项的选择。
- 下拉框：<select>和<option>用于选择一项或多项。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML介绍 （1）HyperText Markup Language。 （2）制作网页前端的技术。 开发工具选择 推荐HBuilder或者HBuilder X作为IDE进行开发，原因不说，用过就知道。安装好开发工具后，选择“文 件”--》“新建”--》“web项目”就可以创建一个HTML项目。在项目上右键--》“新建”--》“HTML文件”就可以 开始编写HTML代码了。
> < " © &
图片标签：
<img src="图片路径" alt="提示文本" title="提示文本" width="图片宽度" height="图片高 度" border="图片边框粗细" />
alt:图片无法显示的时候替换图片显示的文本内容。 title:图片正常显示鼠标经过图片时出现的提示文本内容。 超级链接标签： （1）普通超级链接：
<a href="链接路径" target="目标窗口位置">链接文本或图像</a>
target=“_self” : 默认值，在原始窗口跳转显示新网页。 target=“_blank” : 保留原始窗口内容，在新窗口显示新网页。 （2）电子邮箱链接：
<a href="mailto:*****@">联系我们</a>
一、HTML基本结构
<!DOCTYPE html> <html> <head>
<meta charset="utf-8"/> <title>我的第一个网页</title> </head> <body> 我的第一个网页 </body> </html>
解释：
<!DOCTYPE html>:告诉浏览器使用HTML5规范。 <title>我的第一个网页</title>:网页标题，显示在浏览器的标题栏上。 <meta charset="utf-8"/>：设置字符集，uft-8包含全世界所有国家需要用到的字符，当然也包括中 文。 <body>我的第一个网页</body>：网页的主题，浏览者看到的页面显示部分
<h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6>
显示为标题样式，字体大小从h1到h6依次变小。 段落标签：
<p>孤落梨花雨，快乐中带着忧伤！</p>
表示一个段落，段落和段落之间有明显的行间距。 换行标签：
<br />
上述代码适用于锚点和超级链接在同一个网页。
<a href="锚点所在网页地址#one">one</a> <a href="锚点所在网页地址#two">two</a>
上述代码适用于锚点和超级链接不在同一个网页。
水平线标签：
<hr />
字体加粗标签：
<strong>陆小曼</strong> <b>林徽因</b>
斜体标签：
<em>陆小曼</em> <i>林徽因</i>
HTML中的注释：
<!--我是单行注释-->
<!-我是多行注释 我是多行注释 -->
HTML中特殊字符：
空格: >: <: '': 版权符号： &符号：
（3）锚链接：
<a href="#one">one</a> 。。。。。。 。。。。。。 <a href="#one">two</a> 。。。。。。 。。。。。。
上述代码为定义锚点的代码，规定了同一个网页的两个位置，如果需要点击超级链接链接到具体位置， 可以将超级链接写法如下：
<a href="#one">one</a> <a href="#two">two</a>
二、HTML常用标签
meta标签：
&l键字1，关键字2" />
设置网页关键字，提供给搜索引擎来进行匹配。
<meta name=“description” content=“网页描述……" />
设置网页描述，提供给搜索引擎搜索页面进行描述信息显示。 标题标签：