HTML入门

最新推荐文章于 2025-05-14 22:27:35 发布

阿猿的猫

最新推荐文章于 2025-05-14 22:27:35 发布

阅读量187

点赞数

文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_42555489/article/details/106391386

版权

HTML入门

web技术简介
html介绍
W3C
浏览器
第一个入门程序

web技术简介

web技术的三大内容

html(基本内容)
css（界面美化）
javaScript（动作交互）

什么是HTML

Hyper（超级） Text（文本） Markup（标记）language（语言）超文本标记语言

不是编程语言，而是标记语言
标记语言是一套标记标签
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

https://www.runoob.com/html/html-intro.html

W3C

W3C 指万维网联盟（World Wide Web Consortium）
W3C 创建于1994年10月
W3C 由 Tim Berners-Lee 创建
W3C 是一个会员组织
W3C 的工作是对 web 进行标准化
W3C 创建并维护 WWW 标准
W3C 标准被称为 W3C 推荐（W3C 规范）

https://www.runoob.com/w3c/w3c-intro.html

W3C Recommendations

W3C 最重要的工作是发展 Web 规范（称为推荐，Recommendations），这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。

每项 W3C 推荐的发展是通过由会员和受邀专家组成的工作组来完成的。工作组的经费来自公司和其他组织，并会创建一个工作草案，最后是一份提议推荐。一般来说，为了获得正式的批准，推荐都会被提交给 W3C 会员和主任。

浏览器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GytpoB1z-1590586986684)(image-20200527095943196.png)]

浏览请求网站的过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wv9SrEkM-1590586986687)(image-20200527101348319.png)]

上网三大部分组成

客户端
服务器
HTTP协议

第一个HTML文件

文档声明<!doctype html>
网页主体
文档内容
- 头部 >写配置文件
- 体部写文件内容

HTML常用标签

什么是标签

在html当中，使用<>来包裹具有特殊含义的单词

作用：使用文本内容以特定的格式显示

标签的分类

双标签==开始标签结束标签==
单标签
自结束标签

如何学习html

菜鸟教程 https://www.runoob.com/
W3school https://www.w3school.com.cn/

html常用标签

标题标签
- 使用文本内容以标题的格式显示
- h1-h6
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-shWgE7Yi-1590586986689)(image-20200527113802726.png)]
注释标签 
- 对于代码功能的解释说明，不想使用户看到，使用注释标签注释起来
- 快捷键Ctrl+/
- 如果不选中注释内容，会把光标所在一行全部注释
- 选中后只注释选中的内容
生成一条横线
- 用于分割页面内容
- hr
- 单标签
- color 改变横线的颜色
- size 改变横线的粗细
快速复制一行代码
- Ctrl+D
html中的颜色
- 英文字母
- 十六进制#000000 #+6个数字[十六进制]
- rgb：rgb（255，255，0）三个十进制，范围（255-0）
居中标签
- center
- 是内容居中显示
- 双标签
段落标签
- p
- 双标签
- 把文本分成多段
换行标签
- br
- 对文本内容进行换行
- 单标签
字体标签
- font
- 对字体进行设置
- size 字体大小
- color 字体颜色
- face 字体样式
文体格式化
- 加粗 b
- 倾斜 i
- 加粗并倾斜 /b>
- 下标 sub
- 上标 sup
- strong 同b标签加粗
- 删除线 del
图片标签
- <img 单标签 src="" 指明图片的位置>
- 在文档中引入文件
- alt 当图片加载失败，显示里面的内容
- width 宽
- height 高
- px 在显示器中，图片以像素的形式显示
- 设置宽高时，一般只设置一个属性，另外一个会属性根据原始图片的宽高属性进行缩放
- 也可以百分比进行设置，依赖于图片所在的范围[容器]
- 路径
  - 来自于网络资源
  - 来自于本地
  - 相对位置(建议使用)
  - 绝对位置
超链接标签
- 网络资源需要http协议头
- 还可以引入本地资源【使用相对位置】
- 资源跳转
- href 指明跳转路径
列表标签
- - 无序列表
```
<li></li>
```
  - ul>li
- 1. 有序列表 li
  - ol>li
- 自定义列表
- dl>dt>dd
- dl 自定义列表
- dt 自定义列表头
- dd 自定义列表项