目录
1.什么是HTML?
超文本标记语言
1. 超文本:页面内包含的内容不仅仅是文本
还可以包含图片、链接、音乐、视频等非文字元素。
2. 标记语言:不是编程语言
eg:<div>div</div>
<p></p>
3. 后缀名
.html
.htm
axure rp 的文件后缀.rp
2.什么是HTML5?
HTML5(H5)是HTML的下一代标准
HTML产生于1990年
HTML4产生于1997年
HTML5产生于2008年正式发布
HTML5于2012年,基本形成了比较稳定的版本
3.Html开发需要的环境
vi、vim、记事本
VS Code
微软开发的 支持多系统 开源 内置了扩展程序的管理功能 使用方便 可以汉化
Sublime
但是,他的插件安装很困难
4.浏览器
Chrome\Firefox
有比较强大的代码调试工具
有一些好用的浏览器插件
作用:
1. 用于读取html文件,并将其作为网页显示
2. 用于调试代码
Httpd服务器
部署写好的html页面,来让用户访问
云服务器-安装-Apache-部署
Browser/Server
用户只需要安装一款主流浏览器,即可访问很多的服务
用户-电脑+手机-浏览器-网页-Server-数据库服务器
HTTP协议 -------超文本传输协议
URL -------统一资源定位符
5.HTML文档
HTML5的文档类型 ----------<!DOCTYPE html>
<html></html>:HTML的根元素 用来包含HTML文档的所有元素
<head></head>:包含在head里的内容,不会显示在网页上,这里面通常放的一些配置信息,包含编码,作者,页面描述信息还有js、css的导入
6.编码方式
title :标题
<body></body>:html文档的内容区
7.HTML元素&标签
标签和元素通常意思相同,但是严格来讲,一个元素通常又是由两个标签组成
HTML标签:一般成对出现、大小写不敏感、但是H4推荐使用小写
开始标签 内容 结束标签
eg:<div> <div>div<div>test</div></div> div的内容 </div>
HTML标签部分可以嵌套使用
1.块级元素:占空间
用来布局段落、列表、导航菜单等,不要把块级元素嵌套在行内元素里
2.行内元素:于其它行内元素共享一行空间
一般就是作为段落的一部分
3.空元素(单标签):没有内容的元素
空元素是在开始标签中结束的
不建议直接使用<br>,建议加关闭符<br/>
eg:<hr/>
<br/>
<img src="" />
4.替代元素(替换元素):把文件引入文档,并且用自身的位置来替换
img
video
audio
8.HTML属性
元素的属性一般在开始标签里------------属性由键值对组成
<div id="myDiv" class="myDivClass"></div>
######核心属性
id:唯一标识
class:表示当前元素是某一类的元素
style:规定元素的行内样式
title:描述元素的信息(光标悬浮时会显示)
9.HTML语法
1. 在html文档中不论由多少个空格都会解析为一个
2. 实体
- 空格
- < <
- > >
- " "
- ' '
- & &
3. 注释
<!-- hello,world -->
注释的作用:一定要多写注释,方便之后自己或同事查看你的代码
10.常用标签(元素)
- div: 无意义的块级元素
- p :段落 块级元素 浏览器会自动在p标签前后添加空行----------可以结合br使用
- h1-h6 :一级标题-六级标题 浏览器会自动在标题标签前后添加空行 一般结合hr使用
- 文本格式化-----类似CSS样式
- strong
- b
- em
- i
- u
- sub
- sup
11.列表
1.有序列表 ol > li
* 序号默认从1开始 可用通过 start属性改变起始值 *
eg:<ol start="3">
*reversed (单值属性) 规定列表顺序为降序 *
*type="1" 默认 1 还有 A ,a ,I ,i 四种值 *
2.无序列表 ul > li
标题是圆型符号,无顺序
3.自定义列表 dl > dt、dd
12.超链接 a
<a href="https://baidu.com">百度一下</a>
<a href="mailto:rendc@briup.com" target="_blank">联系我</a>
绑定目标与元素的id值 实现锚点跳转
<a href="#header">返回顶部</a>
属性:
href:跳转的目的地target:_self/_blank
13.图片
<img src="" alt="">
src:图片的地址(必填项)
alt:图片地址出错时 会显示alt的内容
width 宽度
height 高度