第一课-Html基础标签
一、网页的基础
<html lang="en">
// 声明文档使用的字符编码 两种写法
// 优先使用 IE 最新版本和 Chrome
其他写法
// 页面描述 提高搜索 网页的排名
// 页面关键词 提高搜索 关键字
//属性
name="名称" keywords 关键字 seo 搜索引擎优化 description 描述网页内容 content="描述网页内容 150字符"
// 优先使用最新的浏览器
// meta标签的网站可以控制浏览器选择何种内核渲染。
// 禁止浏览器从本地计算机的缓存中访问页面内容
// 用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta。
// 页面重定向和刷新
// 添加智能 App 广告条 Smart App Banner 告诉浏览器这个网站对应的app，并在页面上显示下载banner。
第四版本
第一版本
//所有网页最大的结构 网页中所有的标签存放在html标签中 // 网页的头部 告诉浏览器一些相关的信息yes
title 网页标题 提高搜索
html 网页最大的标签 代码
只有两个子标签 head body
html 标签或元素
（一）属性 lang
lang="en" en 表示网页中语言是英文 在中文网站打开 就会自动弹出翻译 中文
zh-cn zh-cn 表示网页中语言是中文
（二）head标签
作用是给浏览器发送一些基础的信息 用户不可见
（三）meta的属性
name属性主要用于描述网页，与之对应的属性值为content，
content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 提高搜索权重
name="参数" content="值"
name="keywords" (关键字) 表示通过content="值" 值得内容来加强搜索
description (网站内容描述) content=“” 值用来描述网页的主要内容
viewport (添加移动端的配置) content="“
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放
// 页面描述 提高搜索 网页的排名
// 页面关键词 提高搜索
属性
name="名称" keywords 关键字 seo搜索引擎优化
description 描述网页内容 content="描述网页内容 150字符 "
body
给用户看的
html 超文本标记语言
javascript js编程语言
怎样写出模板？
1.按！键
2.按Tab键或者回车
3.输入html加回车或者Tab键
h1\h4\h5区别：
网页的格式
解析不一样 乱码
跳转到网页，安装好open in browser install 插件后，可以右键点击跳转或alt+b（快捷键）
-->
（四）前端规范
1、所有书写均在英文半角状态下的小写；
2
3、/* css注释 */
4、id，class必须以字母开头；
5、所有标签必须闭合；
6、html标签用tab键缩进；
7、属性值必须带引号；单双引号都可以！具体看公司规范！
8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；
9、p,dt,h标签 里面不能嵌套块属性标签；
10、a标签不能嵌套a；
11、内联元素不能嵌套块；（a除外但是不建议）
（五）认识标签
<html lang="en">
包裹 一段文字
1888
注释 ctrl + ?
取消注释 ctrl + ?
注释快捷键：css 、html、js均可使用
img 引入图片
src属性
src="路径" 自己开始查找 路径===图片地址 相对路径
./ 本层文件
/ 打开文件夹
../ 打开上层目录
绝对路径: 从盘开始 c d e
相对路径: 使用相对路径 服务器 相对路经
alt : 描述这个图片 图片占位符
主要自己看的的 width:100 height 100px
所有标签都有的 title 当鼠标移动到标签上时 显示title中的文字
标签语义化：
h1 网页内容的标题 最大内容的标题 一个网页只能是一个 能提高网页排名 seo logoi下面大标题
h2~h6 随意使用 网页内容的标题 标题大小由h1到h6逐级变小
div 箱子 可以包裹任何东西
p 包裹一段文字 p标签不能包裹p标签
span 包裹重要文字
i 倾斜字体
b 加粗字体
strong 突出字体
em
img
标签怎么写？
标签 有
单标签
双标签
标签
有闭合（六）排序标签
1.ul>li标签 无序列表排序
ul的子标签规订为li
2.ol>li标签 有序列表排序
ol的子标签规定为li
3.dl>dt|dd标签 自定义列表排序
dl的子标签规定为dt|dd
4.改变ul的小黑点
list-style=“disc“ 默认标记是实心圆。 circle 标记是空心圆
Square 标记是实心方块。
none 表示不显示
5.改变ol的排序字体列表
type=“1”。 数字排序
Type=“A” 或者”a” 字母排序的
Type=“i” 或者 “I” 罗马字母排序的
list-style=“none” 表示不显示
6.p span a img标签
P标签 /包裹一段文字标签/
span标签 /包裹字体/
a 标签 一个超链接 可以跳转网页，包括自己写的网页
target="_ blank" 打开新的页面
"_ new" 只能打开一个新的网页
"_ self" 默认打开当前网页
写在href= “javascript:void(0)” 不跳转网页
也可以实现不跳转网页， 不支持使用（点击后面会跳转到前面，用户体验差）
锚点跳转7.img 引入加载图片
img alt属性 表示图片描述
title=“值” 属性 在鼠标移动在图片上
可以显示你的输入的“值"
8.特殊字符
< < 小于号或显示标记
> > 大于号或显示标记
& & 可用于显示其它特殊字符
" “ 引号
® ® 已注册
© © 版权
™ ™ 商标
半个空白位
一个空白位
不断行的空白
换行
(Typora)
浙公网安备 33010602011771号