本帖最后由 刘辰老师 于 2017-6-14 14:15 编辑
html简介
HyperText Markup Language
超文本标记语言
超文本
能够表达更丰富的内容（相对于普通文本）
标记：标识符号，就是html中的标签
语言
不是编程语言，就是html标签的描述
浏览器来翻译html代码
网页扩展名
.html .htm
[size=10.5000pt]
HTML文档结构
HTML框架基本构架
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
解释：
带<>的都叫标签
html: 指明当前的文档的类型，是一个网页
head是网页头部 包括网页的相关信息，基本设置，其中title网站的标题就在里面。
body:在浏览器的看到的内容。
[size=10.5000pt]
html标签分类
双标签 <font>HTML</font>,有开始标签和结束标签（标记）
单标签 <br />
标签书写规范
所有的标签都在< >中
所有的标签都有开始和结束，即使是单标记也要结束
<br /> 强制换行
<img /> 图片标记
所有的标签和属性及值小写
标签和属性，属性与属性之间有空格
属性值必须有加引号（单引号或双引号都可以）
属性必须有值
属性可写可不写
标签与标签之间正确嵌套(标签不可交叉嵌套)
标签格式
<开始标签 属性1＝”值1” 属性2＝”值2” 属性n＝”值n”>控制的内容</开始标签>(双标签格式)
<开始标签 属性1＝”值1” 属性2＝”值2” 属性n＝”值n” 空格/>(单标签格式)
<开始标签 空格/>(单标签格式)
html注释
<!--注释内容-->
注释的内容在html页面中是无法看到的，但是可以在页面源代码中发现
代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
HTML注释
<!--这段文字是看不见的-->
</body>
</html>
文本的修饰
属性：
Color(颜色):red,blue,green,yellow,gray,pink等
Size(大小):值(1-7),默认值：3
字体最大尺寸为7，若比7大，则默认为7。字体默认尺寸为3，当出现对尺寸的加减时，就是对3进行加减
代码实现：
<html>
<head>
<title> new document </title>
</head>
<body>
<font>我的第一个网页</font><br />
<font color="green">我的第一个网页</font><br />
<font color="green" size="7">我的第一个网页</font><br />
<font color="green" size="70">我的第一个网页</font><br />
<font color="green" size="+1">我的第一个网页</font><br />
<font color="green" size="4">我的第一个网页</font><br />
<font color="green" size="-1">我的第一个网页</font><br />
<font color="green" size="2">我的第一个网页</font><br />
</body>
</html>
HTML文本修饰标记
<big>相对默认文字大一些
<small>对默认文字小一些
<b>加粗
<strong>加强语气
<i>斜体
<em>斜体
<u>下划线
<s> 删除线
<ins><del>
<sup> <sub>
superscript 上标 subscript 下标
HTML排版标记
p 段落
自动在段前段后添加一个空白行
属性：align:值：left(左对齐,默认) center（居中对齐） right（右对齐）
br
强行换行<br />
hr
单标记 <hr />
属性：width 宽度：值:默认是像素，也可是百分比
align:对齐方式：left center right ，默认 center
color :颜色
noshade 阴影设置
代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<hr width="50%" color="blue" size="10" noshade="noshade">
<hr width="50%" size="3" >
<hr width="50%" size="3" noshade="noshade">
</body>
</html>
h1-h6
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
HTML字符实体
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
[size=12.0000pt]显示结果
| [size=12.0000pt]描述
| [size=12.0000pt]实体名称
| | [size=12.0000pt]空格
| [size=10.5000pt]
| [size=12.0000pt]<
| [size=12.0000pt]小于号
| [size=12.0000pt]<
| [size=12.0000pt]>
| [size=12.0000pt]大于号
| [size=12.0000pt]>
| [size=12.0000pt]&
| [size=12.0000pt]和号
| [size=12.0000pt]&
| [size=12.0000pt]¥
| [size=12.0000pt]元（yen）
| [size=12.0000pt]¥
| [size=12.0000pt]©
| [size=12.0000pt]版权（copyright）
| [size=12.0000pt]©
| [size=12.0000pt]®
| [size=12.0000pt]注册商标
| [size=12.0000pt]®
|
更多实体符号请访问W3C官方实体符号参考网站：http://www.w3school.com.cn/tags/html_ref_entities.html
[size=10.5000pt]
Pre:可定义预格式化的文本
被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体.
<div>和span区别块元素和行内元素
<div> 标签可以把文档分割为独立的、不同的部分
<span> 标签被用来组合文档中的行内元素。
如果不对span设置样式，他跟其他文本是没有区别的
代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div style="color:#00FF00">
<span style="color:red">This is a header</span>
<span>This is a paragraph.</span>
This is a paragraph.
</div>
</body>
</html>
file:///C:\Users\itcast\AppData\Local\Temp\ksohtml\wps3AB5.tmp.jpg
|
|
收藏
淘帖
踩
