HTML4.0-1

来源：互联网发布：淘宝同行跳失率怎么看编辑：程序博客网时间：2024/05/20 19:32

1.什么是HTML

Hyper Text Markup Language 超文本标记语言、HTML：网页的“源码”浏览器：“解释和执行”HTML源码的工具

2.html编辑器 SUBLIME3重点内容

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title></head><body>    我叫崔鹏、今天来上校。</body></html>

3.文档类型声明

(1) 声明文档，定义文档类型；（html有html1.0 html2.0 html3.2(已废除) html4.0 html4.01 html5 xhtml1.0 xhtml1.1 xhtml2.0(草案) dhtml）
作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode：BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 – 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
这就是的作用。
(2)title 标签是设置网页标题
我是标题

4.meta标签元数据

    <head>        <meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" />       <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码" />    </head>

字符编码 : 浏览网页时我们可以通过浏览器的菜单如I.E.)查看->编码进行语言设置;
但如果HTML文件中有这行,浏览器将自动设置相应的语言项(演示给大家看)，注意用记事本编辑时存储的编码格式要与charset属性指定的一致，比如charset=“utf-8”，那么用记事本编辑时一定要记得存储（或者另存为）的编码格式一定也是utf-8格式。
meta常用的属性：
* name
* content
* charset
* name & content属性必须配合使用
*
提高被搜索的频率和排名的常用办法：
1、在google等搜索引擎中登录自己的网站（花钱）
2、在知名网站中加入链接（花钱）
3、在论坛中发帖宣传（花时间）
4、设置自己网站的meta标签（提供利于被搜索的信息，容易忽视的好习惯）
设置keyword、description的好处，提高被google、百度等搜索到的命中率和排名。

5.HTML中的块级元素和行级元素的区别

1.块元素，总是在新行上开始；行级元素，和其他元素在一行；
2.块元素，能容纳其他块元素或者内联元素；行级元素，只能容纳文本或其他内联元素；
3.块元素中高度，行高以及顶和底边距都可以控制；行级元素中高，行高及顶和底边距不可改变。

6.块级标签：分为基础块级元素和布局块级元素

**####1.1基本块级标签：**    * 1、标题： hn 标题共分6级 分别对应h1-h6 background-color="yellow"                <h1>一级标题</h1>                <h2>二级标题</h2>                <h3>三级标题</h3>                <h4>四级标题</h4>                <h5>五级标题</h5>                <h6>六级标题</h6>    * 2、段落  p 前后换行 <p></p>  讲解aling="center" color="red"  ****####1.2常用于布局的块级标签：****    * 1、有序列表 ol - li     * 2、无序列表 ul 之后通过css可以控制显示效果  注意可以随意的插入数据在ul 和 li之间        <ul>            <h3>我爱你</h3>            <li>中国</li>            <li>日本</li>            <li>美国</li>        </ul>    * 3、定义描述标签 dl - dt - dd 注意使用场景:主要用于图文混排dl描述列表 - dt - dd可以多个    这里可以先提前使用img标签。演示图文混排。    因此，在页面局部布局中，形成了4种常用的块状结构：        （1）div-ul(ol)-li：常用于分类导航或菜单等场合；        （2）div-dl-dt-dd：常用于图文混编场合；        （3）table-tr-td：常用于图文布局或显示数据的场合；        （4）form-table-tr-td：常用于布局表单的场合；学会按上面4种块结构来组织和规划页面的结构，是盒模型实现的关键，后续将进行详细讲解和深入学习。    * 4、表格  table 常用于图文布局或显示数据 布局构建简单的效果    * 5、表单  form 常用于用户交互。例如填写用户注册信息。    * 6、div（分区）div **###2行级标签：**    * 1、图像  img  title鼠标移入  alt 图片无效时     <img  src= "图片地址"  alt="提示文字"   title="提示文字" />alt属性是图片的替换文字。title属性规定元素的额外信息，鼠标放在图片上时显示title属性内容。 1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。2、alt属性值得长度必须少于100个英文字符3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=""4、alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO 2、title属性并不是必须的。2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。  3、在ie下，没有title时，alt 有title属性的作用2、在ie下，同时存在title，alt属性时，鼠标滑过的优先显示级别，title要高于alt3、IE浏览器给了大家一个误导，在IE中ALT会变成title属性的文字提示是因为IE不标准。这一点Firefox做的就比较好。 * 2、范围  span  范围标签<span> ：显示某行内的独特样式        <p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>元</p>* 3、换行  br 和p的区别就是前后不换行* 4、预定义格式  pre#### 注意:块级标签：独占一行，换行显示，可以设置宽高，块可以套块和行行级标签：在行内显示，内容撑开宽高，不可以设置宽高（img、input除外），行只能套行基本块级标签：h1 - 大标题、hr - 水平分隔线、p - 段落常用于布局的块级标签：div -最常用的块级元素、dl - 和dt dd搭配使用的块级元素、form - 交互表单、ol – 有序列表、ul – 无序列表

7、#### W3C提倡的Web结构：
* 内容（结构）和表现（样式）分离
* HTML内容结构要求语义化

XHTML基本规范：标签名和属性名称必须小写 HTML标签必须关闭 属性值必须用引号括起来 标签必须正确嵌套 必须添加文档类型声明****

阅读全文

0 0