什么是HTML
- HTML就是我们的基底 骨架
- 你所有的页面 都是在HTML基础上完成的
- HTML 超文本标记语言
一，基本概念
- [1.网页和网站 ]
- [2.浏览器和渲染引擎 ]
- [3.网页三层结构。 ]
- [4.开发工具 ]
- [5.标签。属性。元素 ]
一，基本概念
1.网页和网站
- (1).网站有N个网页组成
- (2).网页中包含:文字，图片，视频，音频，链接，程序...
- (3).网页的内容由HTML技术实现.
- (4).网页的后缀通常都是.html.
- (5).推荐使用Vs Code工具，好处:小巧，插件多.
2.浏览器和渲染引擎
- (1).常见的浏览器:谷歌，火狐，IE, Safari, 欧朋.
- (2).不同的浏览器有不同的内核 (渲染引擎)，现在不需要记.
3.网页三层结构。
- (1).结构层:使用HTML技术实现，说白了，就是给网页提供内容.
- (2).样式层:给网页提供样式(布局，美化).
- (3).交互层:使用JS实现，JS是前端程序员最最最最需要掌握的技术.
4.开发工具
- (1).shift+ alt+向下箭头=>复制上一行.
- (2).tab =>向后移动代码.
- (3).shift + tab =>向前移动代码.
- (4).! + tab => html基本骨架!是英文的!
- (5).div.wraper+ tab =>生成一个带名字的div.
- (6).鼠标中键+向下拽=>同时选中多行.
- (7).键盘上的del键=>删除文件.
- (8).F2 =>重命名.
- (9).shift + alt + f=>格式化代码.
- (10).ctrl + f =>查找内容并替换内容.
5.标签。属性。元素
- (1).标签:标签都是使用<>包起来，分单标签和双标签，分男标签，女标签和人妖标签.
- (2).标签与标签之间是有关系，分兄弟关系和父子关系.
- (3).属性:写在开始标签中，以xxx= "xxx"这种形式出现，一个标签中可以有N个属性.
- (4).属性也分两类:公有属性，特有属性
- (5).公有属性: class, id, title, style
- (6).元素:标签+属性+标签之间的内容
二，HTML的基本骨架
- [1.文档声明 ]
- [2.html元素]
- [3.head元素 ]
- [4.body元素 ]
二，HTML的基本骨架
| 1.文档声明 | |
|---|
| < !DOCTYPE html> HTML5的文档声明. 告诉浏览器，以什么样的标准来解析我们写的代码 | |
| 2.html元素 | |
|---|
| 是一个网页的根元素，只有这一个lang属性:指定网页的语言zh-CN表示中文 | |
| 3.head元素 | |
|---|
| 网页的头部:基本上在对网页的设置，都会在head实现 title属性:指定网页的标题的meta属性: charset= "utf-8"如果不指定，会出现乱码 | |
| 4.body元素 | |
|---|
| 网页的主要内容都是写在body中的 | |
三，常用标签
| 标签 | 代码 |
|---|
| h系列-标题标签。 | h1->h6 逐级递减 |
| p标签,段落标签。浏览器 会自动适用换行 | h1->h6 逐级递减 |
| 换行标签> | <br/强制换行，单表签 |
| 文本格式化 | 1，加粗。strong</ strong-或者<b> </b> 2.倾斜。<em></em>或者<i> <i/>3.删除线。<del> <del/>或者<s> </s>4.下划线。<ins> </ins>或者<u> </u> |
| 无语义标签 | div. span |
| 图片标签 | 属性，<img/>人妖标签，src:图片的路径(来源)，alt:当图片加载错误时显示的文字，title:当鼠标悬停在图片上显示的文字，width:图片的宽度，height:图片的高度 ，border:图片的边框属性的特点1.属性之间部分先后顺序2.属性名与属性值之间以键值对的形式存在3.属性名与属性值之间以等号分隔属性值要以引号包裹; |
| 路径和连接 | |
| 路径 | 相对路径;在同一个文件夹直接找名字，向上一级./向下/绝对路径; 从盘符位置寻找 .从起点开始 |
| 链接标签 | <a></a>。1,外部链接<a href= htp://wwqq.comn"></a>写完整的协2,内部链接<a href= "index.html"></a>直接写文件名即可属性href:指定跳转的页面,title:鼠标悬停显示的文字,target: self(默认会覆盖原来的窗口) blank(会以新的窗口打开) 窗口的打开方式, #: 会阻止页面跳转但是会刷新页面 |
| 锚点 | 链接使用#,目标标签id值与连接#号后面一致,。编辑器使用Ctrl+/ 快捷键 |
| 注释与特殊字符 | |
<p> 空格 `
<p>大于号 ></p>
<p>小于号 <</p>
<p>圈R®</p>
<p>圈C©</p>
<p> 取地址符&</p>
<p>钱 ¥</p>
<p>100°c </p>`
空格 1 1
，大于号 >
，小于号 <
，圈R®
，圈C©;;
，取地址符&
，钱 ¥
，100°c`
4,列表类标签
| 列表 | 代码 |
|---|
| 无序列表 | <ul><li></li> </ul> |
| 有序列表 | <ol><li></li></ol> |
| 自定义列表 | <dl> <dt> </dt> <dd></dd></dl> |
5,表格类标签
| 标签 | 代码 |
|---|
| 表格 | <table> </table> |
| 行 | <tr></tr> |
| 单元格 | <td></td> |
| 表头加粗 加黑自动居中 | <th></th> |
| 结构头 | <caption> </caption>x |
| 结构头 | <thead> </thead> |
| 结构体 | <tbody> </tbody> |
| 结构底 | <tfoot> </tfoot> |
| 属性 | 代码 |
| --- | --- |
| 表格的边框默认的0 | border: |
| 宽度 | width: |
| 单元格与单元格之间的距离 | cellspacing: |
| 单元格与内容之间的距离 | cellspadding: |
注意:当给表格设置居中整个表格会居中 (文字不会居中)当指定tr或者td文字居中 | 。align: left/center/right |
| 列合并 | colspan: |
| 行合并 | rowspan: |
6.表单类标签
| input属性 | 代码 |
|---|
| 1.文本框 | text |
| 2.密码框 | password |
| 3.单选按钮 | radio |
| 4.复选框 | checkbox |
| 5.普通按钮 | button: |
| 6.重置按钮需要配合form表单才有作用 | reset |
| 7.提交按钮 | submit |
| 8.属性src | image |
| 9.文件按钮上传图片 | file |
| name属性1.发送后....2.name的标识对于单选按钮只能选择一个 | name |
| 文本框默认显示的文字, 可以写一个属性也可以属性名=属性值。 | value |
| 默认选中 | checked: |
| label用法 | 1.<label)>请输入<input type= "text'> <input type= "text*></label>2.<label for="a">请输入</label><input type="text" id="a'> |
| 文本域: 用户留言 | textarea: |
| 下拉列表 | <select><option>请选择</option><option >苹果</option><option selected>香蕉</option></select> |
| 下拉列表的默认选中 | selected |
| form表单 | 主要的作用:是收集用户信息发送后台，action:提交后台的地址，method="get/post"提交(传输)后台的方式，name ="a”告诉服务器由哪个表单提交过来的 |
感谢观看！！！
