HTML 指的是超文本标记语言(Hyper Text Markup Language)
XHTML 指可扩展文本标记语言(EXtensible)
超文本指的是图片
HBuilder新建web项目
项目里面有一个默认的index.html文件，那是项目的入口
1.web标准(由万维网(www=w3c)指定的网页开发规范)
结构标准 - html(决定网页上的内容)
表现标准 - css(决定网页上内容的布局和样式)
行为标准 - javascript(简称js，决定网页上动态变化的内容)
2.什么是html？
html是超文本标记语言(类似MarkDown语法)
html是通过不同的标记(标签)来决定网页上的不同内容，学习html就是学html中的标签(标记)
3.html语法
a.html大小写不敏感，html == HTML
b.标签(标记)
a.语法
双标签：<标签名 属性名1=值1 属性名2=值2 ...>标签内容
单标签：<标签名 属性名1=值1 属性名2=值2 .../> 或者 <标签名 属性名1=值1 属性名2=值2 ...>
b.说明
标签名 - 必须是html提供的标签名，不能随便写
属性 - 以'属性名=值'的形式成对出现的，多对之间用空格隔开；属性的顺序可以任意，不会影响效果
值必须放在双引号中
标签内容 - 只有双标签才用标签内容；标签内容可以是任何内容(不光是文字、图片还可以是其他一个或多个标签)
DOCTYPE:说明html版本
html - html5
html结构
网页内容结构：
- 代表整个网页
- 网页内容部分
head中标签
head中主要有以下标签：
meta - 定义HTML文档中的元数据 (设置网页的基本设置)
实例 1 - 定义文档关键词，用于搜索引擎：
实例 2 - 定义web页面描述：
实例 3 - 定义页面作者：
实例 4 - 每30秒刷新页面：
title - 设置网页标题
style - 在html中提供css代码对应的标签
link - 导入图标/CSS文件的标签
script - 导入js代码/文件的标签
base - url的基本地址
head中的标签
文本标签
1.如果需要在网页中显示文字，一般不直接将文字写在body中 而是根据这个文字的功能找到对应的标签
1.标题标签(h1-h6)
双标签
标题1
标题2
标题3
标题4
标题5
标题6
标题7
2.段落标签(p标签)
双标签，保证一个段落对应一个p标签
竹子用了4年扎根，第五年一出头就被做成竹笋炒肉。
3.font标签
双标签，font标签会显示在一行
性别
男
女
4.文字效果相关标签
在html中直接敲回车、空格或者缩进是无效的
- 单标签，让网页中的内容强制换行
- 不换行空格，全称No-Break Space(一个" "代表一个按下一个space键产生的空格)
- 全角空格，全称是Em Space(1 em在16px的字体中就是16px，占据的宽度正好是1个中文宽度)
- 加粗
- 加粗(有强调的意义)
- 倾斜
- 倾斜(有强调的意义)
-->
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
列表标签
1.无序列表(ul)
ul标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素
- Python
- H5
- Java
- Testing
2.有序标签(ol)
ol标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素
- 挑选小龙虾
- 清理小龙虾
- 煮小龙虾
3.自定义列表
dl标签 - 代表列表容器，是一个整体
dt标签 - 小分类标签(名词)
dd标签 - 小分类下面的元素(解释)
- 四川
- 成都
- 绵阳
- 眉山
- 重庆
- 长寿
图片和超链接
1.图片标签(img)
单标签
默认情况下一行可以显示多张图片
a.src属性：设置图片地址/路径；可以是本地路径也可以是网络地址
b.title属性：设置图片标题(当鼠标停留在图片上才会显示出来)
c.alt属性：图片加载失败的时候的提示信息
2.超链接
双标签
- href属性：跳转的目的地
网址 - 点击超链接直接跳转到网址对应的网页
本地html文件地址 - 点击超链接直接加载本地文件对应的html
# - 刷新
选择器 - 让当前页面滚动到指定的位置
- target属性：跳转方式
_self - 在当前页面中加载新的网页(默认值)
_blank - 在新的页面中加载新的网页
百度一下
列表标签
刷新网页
依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。
表格标签
表格
标签
1.table标签 - 代表表格整体
cellspacing属性：设置表格中单元格和单元格以及单元格和表格框的间距
bgcolor属性：设置整个表格背景颜色(包含单元格的部分)
cellpadding：设置单元格中的内容到单元格(上下左右)的边距(即内边距)
width：设置整个表格的宽度
height：设置整个表格的高度
align：center(居中),left(居左),right(居右);设置整个表格在它的父标签里面对齐方式
border属性：设置单元格边框的宽度(将每个单元格添加边框)
bordercolor：设置边框的颜色
2.tr - 代表表格中的一行
bgcolor属性：设置一行中所有单元格的背景颜色
height：设置一行的高度
align：设置一行中的所有内容在它的单元格里面对齐方式
3.td - 代表表格中的一个单元格
bgcolor属性：设置指定单元格的背景颜色
width：设置指定单元格一列的宽度
align属性：让当前单元格中的内容在单元格中的对齐方式
补充：细线表格
- 设置整个table的背景颜色是边框线的颜色
- 设置每个单元格的颜色和边框线颜色不一样
- 设置单元格和单元格的间距(cellspacing)为1
通过boder设置的边框实际是boder的两倍(因为紧挨着的边框是两个,间距就会加倍)2,4,6
姓名
成绩
学员评价
张三
80
不留级
李四
92
不留级
王五
68
留级
姓名
成绩
学员评价
张三
80
不留级
李四
92
不留级
王五
68
留级
姓名
成绩
学员评价
张三
80
不留级
李四
92
不留级
王五
68
留级
复杂表格
colspan:列合并
rowspan:行合并