1、HTTP介绍与基本标签使用
一、HTML介绍
1、HTML文档结构
<!DOCTYPE html> 声明为HTML5文档
<html lang="zh-CN"> 声明语言
<head> head标签内的内容不对用户展示，而是定义一些配置给浏览器使用
<meta charset="UTF-8">
<title>这里是网页的标题</title>
</head>
<body> body标签内是网页的主题内容，也就是用户可见的内容
</body>
<html>
2、两种打开HTML文件的方式
- 找到文件所在的位置右键选择浏览器打开在pycharm内部，集成了自动调用
- 浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器
3、注释
# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
二、HTML标签
1、标签的分类
<!--双标签，这种标签的特点是有成双成对的，分为开始和结束，有/的标签代表结束-->
<h1></h1>
<!--单标签(自闭和标签)，孤零零只有一个，所以这个标签尾部带有/，但是其实不加/也是可以的-->
<img/>
2、head内常用标签
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<!-- 内部是用来书写CSS代码的-->
<style></style>
<!-- 引入外部css文件-->
<link rel="stylesheet" href="mycss.css">
<!-- 内部用来书写js代码-->
<script></script>
<!-- 用来引入外部js文件-->
<script src="myjs.js"></script>
</head>
小知识
设置keywords后面指定的关键字，当用户在用浏览器搜索这些关键字时，该网页都有可能被百度这类搜索引擎搜索出来展示给用户，例如淘宝网
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
当用户在没有点进网页之前在外面可以看到的描述性信息
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">
三、body内常用标签
1、基本标签
<h1>标题标签</h1> 分为6个级别的标题
<p>段落</p>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<br> 换行
<hr> 水平分割线
2、块级和行内标签
div——块级标签
span——行内标签
# 上述的两个标签是在构造页面初期最常使用的，页面的布局一般先用div和span占位之后再去调整样式，尤其是div使用非常的频繁
# div你可以把它看成是一块区域，也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可，而普通的文本先用span标签
（1）块级标签
h1~h6(标题)、p(段落)、div
特点是独占独占一行
1、块儿级标签可以修改长宽，而行内标签则不可以
2、块儿级标签内部可以嵌套任意的块儿级标签和行内标签不过p标签比较特殊，虽然是块级标签，但是它只能嵌套行内标签，不能嵌套块儿级标签
（2）行内标签
# 2 行内标签:自身文本多大就占多大
i(斜体)、u(下划线)、s(删除线)、b(加粗)、span
# 行内标签不能嵌套块儿级标签 可以嵌套行内标签
3、 特殊符号
<!--这类符号不需要去记，需要的时候去查就好了-->
空格
> 大于号
< 小于号
& &
¥ ¥
© 版权
® 商标
4、 img标签
<!--图片标签-->
<img src="" alt="">
src表示图片的路径，本地与网络路径都可以，如果图片路径在自己的上层，格式应该是../xxx
url 自动朝该url发送get请求获取数据
alt="XXX"
当图片加载不出来的时候 给图片的描述性信息
title="XXX"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
<!--示例-->
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg" alt="图片地址错误" title="哆啦A梦" height="300px">
5、a标签
# 链接标签
<a href="https://www.bilibili.com" title="bilibili" target="_blank">哔哩哔哩</a>
# 当a标签指定的网址从来没有被点击过，那么a标签的字体颜色是蓝色，如果点击过了就会是紫色（这是因为浏览器给你记忆了）
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
title：鼠标悬浮在链接上显示的信息
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank
a标签的锚点功能
利用id值，点击一个文本标题 页面自动跳转到标题对应的内容区域
<a href="" id="d1">顶部</a>
<a href="#d3">去往底部</a>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="" id="d3">底部</a>
<a href="#d1">回到顶部</a>
<a href="#d2">回到中间</a>
6、标签具有的两个重要书写
1.id值 类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值 该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的书写也可以有自定义的书写
<p id="d1" class="c1" username="jason" password="123"></p>
7、列表标签
无序列表使用较多，记住它可以了，另外两个做个了解即可
（1）无序列表
<ul>
<li>秦时明月汉时关，</li>
<li>万里长征人未还。</li>
<li>但使龙城飞将在，</li>
<li>不教胡马渡阴山。</li>
</ul>
<!--虽然ul标签很丑,但是在页面布局的时候,只要是排版一致的几行数据基本上用的都是ul标签-->
（2）有序列表
<ol type="A" start="D">
<li>床前明月光，</li>
<li>疑是地上霜。</li>
<li>举头望明月，</li>
<li>低头思故乡。</li>
</ol>
<!--type可以指定序号的样式，不指定默认是数字-->
（3）标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
浙公网安备 33010602011771号