一、 网页的结构:
一个网页由三部分组成: 结构 结构是页面的整体结构,哪里是标题,哪里是段落,哪里是图片。 结构使用HTML来编写。表现 表现是页面的外在的样式,比如字体,字体大小,字体颜色,背景等等。 使用CSS来设置页面中元素的样式。行为 页面和用户之间的交互行为。 使用JavaScript来设置页面的行为。 一般网页要求结构、表现、行为三者分离在开发中面临一个问题—程序之间的耦合,三者分离就是为了解耦合二、HTML,超文本标记语言。
三、负责页面中的结构,定义出页面中的各个组成部分。
四、HTML是采用纯文本的形式的编写,采用HTML标签来标识出页面中的不同部分。
五、标签
成对出现:<标签名></标签名>自结束标签:<标签名/>六、属性
通过属性可以设置标签的效果属性需要定义在开始标签中或这自结束标签中属性实际上是一组一组名值对结构例子:<标签名 属性名=“属性值” 属性名=“属性值”></标签名><标签名 属性名=“属性值” 属性名=“属性值” />七、HTML页面的基本结构
八、文档声明
<!doctype html>用来标识当前页面的html的版本该声明用来告诉浏览器,当前的页面是使用HTML5的标准编写的九、常用标签
<html> 网页的根标签一个页面中有且只有一个根标签网页中的所有内容都需要写在html标签的内部 <head> 网页的头部该标签中的内容不会在网页中直接显示该标签用于帮助浏览器解析页面子标签 (1) <title> a. 用来设置网页的标题 b. 默认会在浏览器的标题栏中显示 c.搜索引擎检索网页时,会主要检索title中的内容,它会影响到页面在搜索引擎中的排名 (2) <meta> a.用来设置网页的元数据,比如网页使用的字符集 <meta charset=“utf-8” /> b.设置网页的关键字 <meta name=“keywords” content=“关键字,关键字,关键字,关键字”/> c.设置网页的描述 <meta name=“description” content=“网页的描述”/> d.请求的重定向 <meta http-equiv=“refresh” content=“秒数;url=地址” /> <body> 网页的主体网页中所有的可见部分都需要在body中编写 <h1> ~ <h6> 标题标签在html中一共有六级标题六级标题中,h1最重要,h6最不重要,一般页面中只会使用h1~h3h1的重要性仅次于title,浏览器也会主要检索h1中的内容,以判断页面的主要内容一般一个页面中只能写一个h1 <p> 段落标签 <br/> 换行标签 <hr /> 水平线标签 内联框架 可以向一个页面中引入其他的外部页面<iframe></iframe>属性: a.src 外部页面的地址,可以使用相对路径 b.width和height 可以设置框架的宽度和高度 c.name 可以为内联框架指定一个名字 可以将该属性值设置为超链接的target属性的值 这样当点击超链接时,页面将会在相应的内联框架中打开内联框架中的内容不会被搜索引擎所检索,所以开发中尽量不要使用内联框架 超链接 可以使当前页面跳转到其他的页面<a>链接的文字</a>属性 a.href 指向链接跳转的目标地址,可以是一个相对路径 还可以是#id属性值,这样当点击超链接以后,将会跳转到当前页面的指定位置 可以使用mailto:来创建一个发送电子邮件的超链接 b.target 指定在哪个窗口中打开链接 可选值十、注释
语法: <!-- 注释内容 --> 注释中的内容不会在页面中显示,但是会在源码中显示,我们可以通过注释来说明网页的代码。也可以通过注释隐藏一些页面中不想显示的内容十一、实体
在HTML页面中一些特殊符号是不能直接使用,需要使用实体来代替这些特殊符号实体也可以称为转义字符实体的语法 &实体名; 常用的实体 空格: <:<>:>版权符号:©十二、图片标签
<img />使用图片标签可以向页面中引入一个外部图片属性 a.src 指向一个外部图片的路径,可以使用相对路径 b.alt 指定一个在图片无法加载时对图片的描述 搜索引擎主要通过该属性来识别图片的内容 如果不写该属性则搜索引擎会对图片进行收录 c.width 设置图片的宽度 d.height 设置图片的高度图片的格式 a.JPEG:颜色丰富的图片,如,照片 b.GIF:颜色单一,简单透明的图片,动态图 c.PNG:颜色丰富,复杂透明的图片 d.图片选择的原则: 效果一致,用小的 效果不一致,用效果好的十三、相对路径
相对于当前资源所在的目录的路径可以使用…/返回一级目录,返回几级使用几个…/十四、xHtml语法规范
HTML中不区分大小写,但是尽量使用小写HTML的注释不能嵌套标签必须结构完整(成对出现或者自结束标签)标签可以嵌套但是不能交叉嵌套属性必须有值,且值必须加引号,单引号双引号都可以十五、文本标签
<em>:表示语气上的强调<strong>:表示内容的重要性<i>:表示单纯的斜体<b>:表示单纯的加粗<small>:表示细则一类的内容<cite>:表示参考的内容,凡是加书名号的都可以使用cite<q>:短引用,行内引用<blockquote>:长引用,块级引用<sup>:上标<sub>:下标<ins>:插入的内容<pre>:预格式标签,可以保留代码中空格换行这些格式<code>:表示程序代码十六、列表
无序列表:使用ul来创建一个无序列表,在列表中使用li来表示一个列表项 (以下三个分别为1.无序列表、2.有序列表、 3. 定义列表)
无序列表使用符号作为项目符号
有序列表: 使用ol来创建一个无序列表,在列表中使用li来表示一个列表项使用有序的序号作为项目符号 定义列表列表相关的元素都是块元素,他们之间可以互相嵌套去除项目符号:list-style:none