什么是 html?
hyper text mark-up language 超文本标记语言 作用: 开发静态页面
备注:
HTML 不是编程语言, 是用来描述网页的一种语言.
通过浏览器执行.
可以分为两大版本
HTML4.01
HTML5
超文本标记语言 (HTML) 的第五次重大修改
HTML5 仍处于完善之中, 大部分现代浏览器已经具备了某些 HTML5 支持
不同浏览器执行可能会有差异
对移动 webapp 支持良好
标签分类: 单标签</br> 双标签 < p></p>
html 骨架结构:
- <!DOCTYPE html>: 指示 web 浏览器页面使用哪个 html 版本进行编写的指令
- <html>
- <head>
- <meta charset="utf-8"> 设置字符码
- <title > 网站的标题</title>
- </head>
- <body></body>
- </html>
html 文件的扩展名是 xxx.html
html 结构说明:
- <html > 含义: 告诉浏览器, 网页的代码用什么格式解析.
- <head > 含义: 告诉浏览器网页的文字用什么字符集, 如果使用的字符集不正确, 就会出现乱码.
字符集: gb2312(ANSI)-- 简体中文(汉子操作系统默认使用) gbk-- 国标码 utf-8: 多国语言
- <title > 含义: 便于搜索引擎
- <body > 含义: 网站的内容, 99% 的内容都放入 body 标签中, 只有放在该标签才能在窗口中显示.
html 的书写规范:
html 不区分大小写, 但是 w3c 推荐使用小写
html 标签嵌套, 但是不能交叉嵌套 例如 < html><body></html></body>
单标签一定要闭合 <br/>
属性: 每一个标签有没有属性, 如果有, 有多少 都是由 w3c 规定.
属性值: 要用双引号引起来
html 文本标签(格式化标签):
- <font>: 设置文本的颜色, 文本的字体, 文本的大小 双标签
- <font></font>
属性:
color 设置文本的颜色 例如 color="red" 或者 color="ff0000"
size 设置文本的大小 例如 size="5" 是以号为单位
face 设置文本的字体 例如 face="隶书"
属性之间没有先后顺序.
练习: 输入一段文本 设置该段的前五个字, 文本为蓝色, blue #0000ff, 文本大小为 6 号, 文本字体为楷体.
html: 注释 <--! 内容 -->
- <b></b > 加粗 <strong></strong > 加粗 加强语气 <i></i > 倾斜 <em></em > 倾斜 加强语气
- <u></u > 下划线 <ins></ins > 下划线 强调插入文本
<sup></sup > 上标 <sub></sub > 下标 例如: x<sup>2</sup> x 的平方 h<sub>2</sub>o h2o 水
练习: 输入一段文本, 要求前 6 个字 文本颜色为蓝色 加粗 倾斜 加下划线 注意顺序嵌套 不能交叉
- <p > 标签: 段落标签
- <h1>--<h6 > 标题标签
属性:
align="center" 设置居中 left right
练习: 输入两段文字, 在第一段的前面加一个标题二, 标题二的内容居中
<pre></pre > 预定义标签 保留原有的空白 有空格有回车 每个浏览器解析有所差异
<p></p>: 是网站上使用的最多的标签之一, 实际上没有很多的意义, 独占一行, 结合 CSS 一起使用 构成相应的效果 块级标签
<span></span>: 本身没有任何含义, 但是也是网站使用最多标签之一, 结合 css 使用构成功能 行内标签
标签分类: 块级标签 -- 输入完标签之后独占一行 h1-h6 p p
行内标签 -- 输入完标签之后不是自己独占一行 em span u i b strong
- </br > 换行标签
- <img src="图片地址" alt=""align="" width=""height=""/>图片标签 alt 属性鼠标移至图片显示提示性的文字 align="middle" top bottom
链接地址分为: 相对路径和绝对路径
1. 绝对路径: 从盘符开始的路径, 例如:
C:\windows\system32\cmd.exe
2. 相对路径: 从当前路径开始的路径
../: 当前目录的上一级目录
./: 当前目录
/: 服务器的根目录
a. 文件在当前目录
page2.html 访问 page2Image.jpg
- <img src="page2image.jpg"/>
- <img src="./page2image.jpg"/>
b. 文件在上一层目录
page1.html 访问 image.jpg
<img src="../image/imgae.jpg"/>
page2.html 访问 image.jpg
<img src="../../image/image.jpg"/>
c. 文件在下一层目录
page1.html 访问 site2 下面的 page2image.jpg
- <img src="./site2/page2image.jpg"/>
- <img src="site2/page2image.jpg"/>
d. 根目录表示法
任何页面访问 image 下的 Image.jpg
- <img src="/image/image.jpg"/>
- <hr size=""color="" width="">
<a href="链接地址" target=""></a> target="_blank" 浏览器总在一个新打开, 未命名的窗口中载入目标文档
_parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集. 如果这个引用是在窗口或者在顶级框架中, 那么它与目标 _self 等效.
_self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标, 它使得目标文档载入并显示在相同的框架或者窗口中作为源文档. 这个目标是多余且不必要的, 除非和文档标题[ <base> 标签中的 target 属性一起使用.]
_top 这个目标使得文档载入包含这个超链接的窗口, 用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口.
锚标记跳转到页面的顶部和底部
- <a href="#helpme"></a>
- <a name="helpme"></a>
- <a href="mailto: 邮箱地址">
- <marquee scrolldelay="1000" direction="up">滚动文字或图像</marquee>
scrolldelay 滚动延迟时间 默认 90 direction 滚动的方向 默认从右向左
来源: https://www.2cto.com/kf/201805/750091.html