html初学
1.目标
分析网页的基本组成
独立开发一个静态网页
2. html和css在网页中扮演的角色
网页的基本构成：html + css + javaScript
html在网页中的作用：定义页面结构，定义有什么
css在网页中的作用：修饰页面结构和样式
javaScript在网页中的作用：定义一些网页中的交互
怎么执行html和css的代码：浏览器执行
浏览器：外壳 +内核
有独立内核的浏览器：IE(trident)、chrome(webkit/blink)、sarari(webkit)、firefox(gecko)、opera(presto/blink)
3.开发环境
vscode
4.术语
web:互联网，用户看到的页面
w3c:万维网联盟(非营利性组织)、制定web技术领域标准的组织
MDN：mozilla development network (开发者社区)
5.html语法
html中的最小单位：element(元素、标签)
元素由哪几部分组成：起始标签(begin tag) + 元素内容(可选) + 元素属性(可选部分) + 结束标签(end tag)
元素属性：全局属性 + 局部属性(某个元素特有的属性)
注释：描述你的代码的作用
6.html中的语义化
什么是语义化：每个html元素都有其具体的含义(标题、段落、超链接、图片)
为什么需要语义化：
利于seo(搜索引擎优化)(每隔一段时间，搜索引擎会在互联网中抓取页面的源代码)
方便浏览器去理解网页的结构(解释)
7.html中的文本元素
标题元素: h1~ h6
段落元素：p
span元素：没有任何语义；仅作为设置样式使用
pre元素(预格式化文本元素)：空白折叠(源代码中连续的空白字符(空格、换行、制表(tab缩进)))会被折叠成一个空格
8.a元素常见的使用方式
作用：
超链接：从这个页面跳转到另一个页面的路径
锚点：用于跳转到页面的指定位置
9.如何书写一个正确的路径
路径：
根据资源的类型判断，一般站外资源用绝对路径，站内资源用相对路径
绝对路径：
书写格式：协议名://主机名:端口/路径
中文会被编码成unicode格式
协议：http、https、file
主机名：域名、IP地址
端口：http会省略80、https会省略443
file://Users/aa/Documents/\u4f60\u597d\u4e16\u754c.html
相对路径：
./ 代表当前目录
../代表上一级目录
10.img标签及常见属性
常用属性
src : 图片路径
alt: 图片加载失败或加载时显示的文字
title: 悬浮在图片上面显示的文字
图片的来源：
本地图片：稳定
线上图片：图片容易丢失
base64图片：
优点：小图片占用内存小，不请求服务器，降低服务器资源与访问
缺点：大图片增大了数据库服务器的压力。
点击图片跳转
通过嵌套a标签
11. html中的列表元素
列表：
有序列表(order list)
1 | |
无序列表(unorder list)
1 | |
定义列表(defined list)
1 | |
12.html中用于布局的元素
没有任何语义，纯粹是用于布局的元素
html 4 : div
html 5: header footer article …
13.html表格元素
表格的基本结构
由一行或者多行的单元格数据组成
在html中怎么表示：
table表示表格元素
tr表示一行行的数据
th表示数据中的表头部分
td表示的正常的数据
对表格数据进行分组
thead元素包着表头部分
tbody包着表格数据部分
tfoot包着表格尾部部分
table元素里常用的属性
border(边框)
cellspacing(单元格间距)
cellpadding(单元格)
colspan(用于合并列)
rowspan(用于合并行)
14.表单元素
使用场景：
需要提交一些信息到服务端的时候(前后端联调过程中)
核心元素：
input(核心元素)
label(提高交互体验的)
select(下拉框)
textarea(文本域)
button(按钮)
form