初识HTML

一 基本概念

1.1.1网页和网站：

• 网页有N个网站组成
• 网页间包含：文字-图片-视频-音频-链接-程序.......
• 网页的内容由HTML技术实现的
• 网页的后缀通常都是html

1.1.2浏览器的渲染引擎

• 常见的浏览器：谷歌-火狐-欧朋-iE-Sefari
• 不同的浏览器有不同的内核（渲染引擎），暂时不用记

1.1.3网页三层结构

• 结构层：使用HTML技术实现，给网页提供内容的东西
• 样饰层：给网页提供需要的样式，就相当于穿一个好看的衣服
• 交互层：用JS来实现JS前端程序员最早需要的技术

1.1.4开发工具

• 推荐使用VS code工具，好处：小巧，插件多
• 快捷键： shift + alt + 向下箭头 => 复制上一行 tab => 向后移动代码 shift + tab => 向前移动代码 ！ + tab = > html基本骨甲 ！ 是英文的！ div wraper + tab => 生成一个带名字的div 鼠标中键 + 向下拽 = >删除文件 F2 => 重复名 Shift + alt + f => 格式化代码

1.1.5标签-属性-元素

• 标签：标签都是使用<>包起来的，分单标签和双标签，分男标签，女标签和人妖标签
• 属性：写在开始标签中，以xxx="xxx"这种形式出现，一个标签中可以有N个标签
• 属性：也分两类：公有标签，特有属性
• 公有属性：class，id，title，style
• 元素：标签+属性+标签之间的内容

HTML的基本骨架

基本骨架

2.1.1 HTML5的文档声明

• 告诉浏览器，以什么样的标准来解析我们写的代码
• 是一个网页的根元素，只有这一个

2.1.2HTML元素

• lang属性：指定网页的语言 zh-CN表示中文
• 网页的头部：基本上在对网页的设置，都会在head实现

2.1.3head元素

• title属性：指定网页的标题的
• meta属性：charset="utf-8" 如果不指定，会出现乱码

2.1.4body元素

• 网页的主要内容都是写在body中的

常用标签

3.1.1h系列-标题标签

• h1->h6逐级递减
• 标签。段落标签，浏览器会自动适合换行
• 换行标签
  强制换行 属于单标签

3.1.2文本格式化

• 加粗strong-或者
• 倾斜或者
• 删除线或者
• 下划线或者

3.1.3无语义标签

• <div></div>
• <span></span>

4.1.1图片标签

4.1.2属性

• src：图片的路径(来源)
• alt：当图片加载错误时显示的文字
• title：当鼠标悬停在图片的文字
• width：图片的宽度
• height；图片的高度
• border：图片的边框

4.1.3属性的特点

• 属性之间部分先后顺序
• 属性名与属性值之间以键值对的形式存在
• 属性名与属性值之间以等号分隔 属性值要以引号包裹

5.1.1路径和连接

5.1.2路径

• 相对路
• 向上一级../
• 向下一级/
• 绝对路径

5.1.3链接标签

• 外部链接写完整的 协议 域名 网址
• 内部链接 直接写文件名即可

5.1.4属性

• href:指定跳转的页面
• title 鼠标悬停显示的文字
• target _ self(默认会覆盖原来的窗口) _ blank(会以刷新的窗口打开) 窗口的开方式
• #：会阻止页面跳转但是会刷新页面

5.1.5描点

• 链接使用#
• 目标标签ID值与连接#号后面一致

5.1.6注释与特殊字符

• <!--我是注释-->
• 编辑器使用Ctrl+/快捷键

6.1.1列表类标签

自定义列表

• <dl><dt></dt><dd></dd></dl>

6.1.2有序列表

• <ol><li></li></ol>

6.1.3无序列表

• <ul><li></li></ul>

7.1.1表格类标签

7.1.2标签

• 表格
• 行
• 单表格
• 表头 加粗 加黑 自动居中
• 表格的标题 写在内部 显示外部 居中
• 结构头
• 结构体
• 结构底

7.1.3属性

• border:表格的边框 默认的0
• width:宽度
• height:高度
• cellspacing:单元格与单元格之间的距离
• cellspadding:单元格与内容之间的距离
• align:left/center/right
• colspan:列合并
• rowspan：行合并

8.1.1表达类标签

8.1.2input属性

• text:文本框
• password:密码框
• radio:单选按钮
• checkbox:复选框
• button:普通按钮
• rest:重置按钮需要配合form表单才有作用
• submit: 提交按钮
• image:属性src
• file 文件按钮 上传照片

8.1.3name属性

• 发送后台.....
• name的标识 对于单选按钮 只能选择一个
• value:文本框默认显示的文字
• checked:默认选中
• <label>请输入<input type="text"><input type="text"></label>

8.1.4label用法

• <label for=""a>请输入
• <input type="text"id="a">

8.1.4文本域:textrea:用户留言

请选择 苹果 香蕉 橘子 《selected为默认选中》

8.1.5主要的作用；发送后台

• action: 提交后台的地址
• method="get/post" :提交后台的方式
• name = "a"告诉服务器 由哪个表单提交过来的