前端之HTML
一、HTML简介
超文本标记语言
所有的网站内部都是HTML
二、HTML文档结构
<!DOCTYPE html> <!--声明为HTML5文档-->
<html lang="zh-CN"> <!-- 设置HTML编码格式 -->
<head></head> :head内的标签不是给用户看的而是定义一些配置主要给浏览器看的
<body></body>：body内的标签用户是可以直接看到的,写内容
</html>
- HTML文件后缀：文件名.html
注意：
（1）前端HTML标记语言是没有格式的，可以全部写在一行。只是人们习惯缩进来表示代码
（2）HTML标记语言不区分大小写。
三、两种打开HTML文件方式
- 找到文件所在位置右键选择浏览器打开
- 在Pycharm内部，集成了自动调用浏览器的功能，直接点击即可。
四、标签
4 .1 注释
(1)单行注释
<!--单行注释-->
(2)多行注释
<!--
多行注释1
多行注释2
多行注释3
-->
（3）HTML书写格式
由于HTML代码非常杂乱无章并且很多，所有我们习惯用注释来划定区域方便后续查找
<!--导航条开始-->
导航条所有html代码
<!--导航条结束-->
4 .2 标签的分类
- 双标签
- 单标签（自闭合标签）
<h1></h1> # 双标签
<a href="https://www.baidu.com/"></a> # 双标签
<img/> # 单标签
4 .3 head 内常用标签
书写HTTP标记语言时只需要写标签名，然后TAB键补全
- title
定义网页标题
<title>标题<title>
- style
定义内部样式表，内部书写css代码
<style>
h1 {
color: greenyellow;
}
</style> 内部用来书写css代码
- script
内部书写js代码，还可以引入外部JS
<!--# 内部用来书写js代码-->
<script>alert(123)</script>
<!-- # 还可以引入外部js文件-->
<script src="myjs.js"></script>
- link
引入外部css文件或者网站图标
<link rel="stylesheet" href="mycss.css"> # 引入外部css文件
- meta
定义网页原信息
<!--作用：百度搜索关键词-->
<!--当你再用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户-->
<!--kyewords-->
<meta name="keywords" content="老男孩教育，老男孩，老男孩培训，Python培训，Linux培训，网络安全培训，Go语言培训，人工智能培训，云计算培训，Linux运维培训，Python自动化运维，Python全栈开发，IT培训">
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
<!--作用： 网站的描述信息 -->
<!-- description -->
<meta name="description" content="淘宝网 - 亚洲较大的网络交易平台，提供各类服饰、美容、家居、话费/点券....">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
4.4 body 内常用标签
** 基本标签**
| 序号 | 功能 | 标签 |
|---|---|---|
| 1 | 标题 | <h1>我是h1</h1> 标题标签 1~6级标题 |
| 2 | 加粗 | <b>加粗</b> |
| 3 | 斜体 | <i>斜体</i> |
| 4 | 下划线 | <u>下划线</u> |
| 5 | 删除线 | <s>删除线</s> |
| 6 | 段落标签 | <p>大梦谁先觉，平生吾自知</p> # 段落标签 |
| 7 | 换行 | <br/> # 换行 |
| 8 | 水平分割线 | <hr># 水平分割线 |
4 .5 块级标签与行内标签
在构造页面初期最常使用的页面的布局一般先用div和span占位之后再去调整样式，尤其是div使用非常频繁，通常用来做网页的页面布局。
（1）块级标签div
作用：div可以提前规定所有区域，布局网页
特征：独占一行
属于块级标签的有
| 功能 | 代码 |
|---|---|
| 标题 | <h1>``</h1> 标题标签 1~6级标题 |
| 段落标签 | <p>段落标签</p> |
| 块级标签 | <div>块级标签</div> |
- 1.块儿级标签可以修改长宽 行内标签不可以 修改了也变化不大
- 2.块儿级标签内部可以嵌套任意的块儿级标签和行内标签
- ★ 但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签，如果你套了 问题也不大 因为浏览器会帮你解开前端基本上不会报错。
总结：
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签，但是p标签只能嵌套行内标签（HTML书写规范）
（2）行内标签span
作用：普通文本先用span标签
特征：自身文本多的就占多的
属于行内标签的有
| 功能 | 标签 |
|---|---|
| 斜体 | <i>斜体</i> |
| 下划线 | <u>下划线</u> |
| 删除线 | <s>删除线</s> |
| 加粗 | <b>加粗</b> |
| 行内标签 | <span>行内标签</span> |
**注意：**行内标签不能嵌套块儿级标签，可以嵌套行内标签
4 .6 img图片标签
标签名：img
# 图片标签
<img src="" alt="">
属性：
- src
src
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据
- alt
alt=""
当图片不存在时给图片添加描述信息
- title
title="图片"
当鼠标悬浮到图片上之后 自动展示的提示信息
- height
高度
height="800px"
- width
width=""
高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
如果修改两个参数 并且没有考虑比例的问题 那么图片就会失真
4. 7 a标签
a标签为链接标签，当a标签指定网址从来没有被点击过，那么a标签的字体颜色是蓝色的，如歌点击过就会是紫色的。
<a href="网站链接"></a>
a标签示例：
<a href="https://www.jd.com">点我有你好看</a>
<a href="https://www.sogo.com/">点我去搜狗</a>
(1)a标签的属性：
（a）href
- 放url,用户点击九会跳转到该url页面
- 放其他a标签的id值，点击点击即可跳转到对应的标签位置
（b）target
| 属性值 | 作用 |
|---|---|
| _self | 默认a标签是在当前页面完成跳转 |
| _blank | 新建页面跳转 |
标签示例：
<a href="https://www.sogo.com/" target="_self">点我去搜狗</a>
<a href="https://www.sogo.com/" target="_blank">点我去搜狗</a>
71
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
