总结html
发布时间：2023-09-06 01:22责任编辑：彭小芳关键词：暂无标签
1、初识html
| W3C : 万维网联盟！（World Wide Web Consortium ） |
| 创建于1994年，是web技术领域最权威最具有影响力的标准机构！ |
| |
| |
| W3C规定了web技术领域相关技术的标准！ |
| |
| 官网地址： |
| www.w3c.org |
| www.chinaw3c.org |
| |
| XML ：负责数据的存储 |
| Html ：结构化标准,负责数据的显示 |
| CSS ：表现标准 |
| JavaScript：行为标准 |
| |
| |
| Html概念： |
| |
| 01.超文本标记语言（Hyper Text Markup Language） |
| 超文本:包含除了文本之外的视频，音频，图片等。 |
| 标记：html也是有多个节点组成的! |
| int a =5; 通过a找到5 |
| <student ><student> |
| <student ><student> |
| id就是我们的标记 |
| |
| 02.文件名以html或者htm结尾的文件我们称之为html！ |
| |
| 发展史： |
| 93年诞生HTML！ |
| 00年改名XHTML! |
| 13年改名HTML5! |
| |
| |
| HTML5的优势： |
| 01.世界知名浏览器厂商的支持！ |
| 02.市场的需求 |
| 03.跨平台 |
| |
| HTML网页的基本结构 |
| |
| <!DOCTYPE html> 只是告诉浏览器使用了html的规范 |
| <html> 根节点 |
| <head></head> 头部信息 |
| <body></body> 主体部分 |
| </html> |
| |
| 我们怎么使用html呢？ |
| 01.记事本(文本编辑器) |
| 02.DreamWeaver |
| 03.WebStorm |
第一个网页html
| <!DOCTYPE html><!-- 声明当前的文件是H5的页面--> |
| <html> <!--根节点--> |
| <head lang="en"> <!--头部信息 lang="en"使用的语言是英语--> |
| <title>这是我的第一个H5页面</title><!--网页的标题--> |
| <meta charset="utf-8"> <!--设置页面的编码格式--> |
| <meta http-equiv="keywords" content="第一次，h5"> |
| <!-- |
| meta:设置网页相关的元信息（meta-information）! |
| 比如：设置编码格式，搜索关键字，描述信息，页面跳转等。。。。 |
| meta常用的属性和属性值： |
| 01.charset：编码格式 |
| 02.http-equiv：把content属性关联到我们的http头部！ |
| 常用的属性值： |
| 001.keywords ： 搜索关键字 |
| 002.description：描述当前页面的信息 |
| 003.refresh ：跳转页面 |
| <meta http-equiv="refresh" content="3;url=http://www.github.com/xiaodoufu/"> |
| 03.content:定义和http-equiv或者name属性的对应值 |
| --> |
| <style type="text/css"></style><!--设置当前页面的样式--> |
| <script type="text/javascript"></script> <!--设置当前页面的行为--> |
| |
| </head> |
| |
| <body> <!--网页中所有的数据 必须书写的位置--> |
| 这是我的第一个页面！ |
| </body> |
| </html> |
标题标签
| <!DOCTYPE html> |
| <html> |
| <head lang="en"> |
| <meta charset="UTF-8"> |
| <title>标题标签</title> |
| <!-- |
| 标题标签： h1-h6 其他的都没有效果！ |
| 会自动换行！块元素（自己独占一行的元素）！ |
| --> |
| </head> |
| <body> |
| <h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> |
| <h4>4级标题</h4> |
| <h5>5级标题</h5> |
| <h6>6级标题</h6> |
| <h7>7级标题</h7> |
| 8级标题 |
| |
| |
| </body> |
| </html> |
段落标签
| <!DOCTYPE html> |
| <html> |
| <head lang="en"> |
| <meta charset="UTF-8"> |
| <title>段落标签</title> |
| <!-- |
| 段落之前有空行！p标签也是块元素！ |
| 自闭合标签 |
| <br/> 换行 |
| <hr/> 水平线 |
| <h1> <p> </h1> </p> 错误的！ 标签的不正确嵌套！ |
| <p> <h1> </h1></p> 正确！ |
| --> |
| </head> |
| <body> |
| |
| <p> |
| 北京欢迎你，有梦想谁都了不起！<br/> |
| 有勇气就会有奇迹。 |
| </p> |
| <hr/> |
| <p> |
| 北京欢迎你，为你开天辟地<br/> |
| …… |
| </p> |
| |
| </body> |
| </html> |
特殊字符
| <!DOCTYPE html> |
| <html> |
| <head lang="en"> |
| <meta charset="UTF-8"> |
| <title>特殊字符的使用</title> |
| <!-- |
| 虽然有些特殊字符我们可以在页面上显示！但是不允许直接书写！ |
| 需要特殊的符号来代替我们的特殊字符！ |
| 特殊符号对照表：http://www.jb51.net/onlineread/htmlchar.htm |
| --> |
| </head> |
| <body> |
| 大于号（>）：> <br/> |
| 小于号（<）：<<br/> |
| 引号（""）："<br/> |
| 单引号（‘）：'<br/> |
| 版权符号（?）：©<br/> |
| <!-- |
| |
| |
| 想让一行中的某些字体 凸显出来，我们通常使用 |
| em 斜体 不建议使用i |
| strong 加粗 不建议使用b |
| 尽量使用的标签 语义化（让计算机便于解析，让码农易于阅读）！ |
| --> |
| 大家辛苦了<strong><em>吗？</em></strong> |
| </body> |
| </html> |
图片标签
| <!DOCTYPE html> |
| <html> |
| <head lang="en"> |
| <meta charset="UTF-8"> |
| <title>图片标签</title> |
| <!-- |
| 常见的图片格式： |
| bmp,gif,png,jpg! 压缩（率）比！ |
| |
| img标签 也是一个 行内元素（内联元素）！ |
| |
| src :指的是 图片的位置！ 绝对不能写成绝对路径！ |
| 项目中需要的所有文件，都在项目中的images文件夹中保存！ |
| src就写成项目的相对路径！ |
| title:鼠标放在图片上的悬停文字,如果没有alt属性，图片不显示时，显示title |
| alt:不显示图片的时候 替换文字 |
| height:高度 |
| width: 宽度 |
| --> |
| </head> |
| <body> |
| <img src="../images/a.jpg" height="200px" width="200px" |
| title="这是一幅画" alt="多么美丽的画面"> |
| </body> |
| </html> |
超链接
| <!DOCTYPE html> |
| <html> |
| <head lang="en"> |
| <meta charset="UTF-8"> |
| <title>超链接</title> |
| <!-- |
| 01.普通的超链接 |
| 02.锚链接 |
|
|