前端(二)

1.head内常用标签

<title>Title</title>	网页标题
<style>
     h1{
          color:greenyellow ;
       }
</style>	内部用来书写CSS代码

<script>
       alert(123)
</script>	内部用来书写js代码
<script src="myjs.js"></script>		还可以引入外部js文件
<link rel="stylesheet" href="mycss.css">	引入外部css文件

# keywords关键字
<meta name="keywords" content="老男孩教育,Python培训,Linux培训,
网络安全培训,云计算培训,Python基础教程,Linux运维培训,Python学习班,
linux培训机构,Python培训学校,SRE工程师培训,渗透测试培训">
当你在用浏览器搜索的时候，只要输入了keywords后面指定的关键字
那么该网页都有可能被百度搜索出来展示给用户

<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,
在线交易,交易市场,网上交易,交易市场,网上买,网上卖,
购物网站,团购,网上贸易,安全购物,电子商务,放心买,
供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,
打折,免费开店,网购,频道,店铺">

# description关键字
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，
提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，
同时提供担保交易(先收货后付款)等安全交易保障服务，
并由商家提供退货承诺、破损补寄等消费者保障服务，
让你安心享受网上购物乐趣！"> 网页的描述性信息

2.body内常用标签

2.1 基本标签

 <h1>我是h1</h1>		标题标签 1~6级标题
 <b>加粗</b>
 <i>斜体</i>
 <u>下划线</u>
 <s>删除线</s>
 <p>段落！</p>	
 <br>	换行
 <hr>	水平分割线

2.1.1 标签的分类2

1、块儿级标签：独占一行。	
	例如：h1-h6,p
	1、块儿级标签可以修改长宽，行内标签不可以，修改了也不会变化
	2、块儿级标签内部可以嵌套任意的块儿级标签和行内标签
		但是p标签虽然是块儿级标签，但是它只能嵌套行内标签，不能嵌套块儿级标签
			如果你套了，问题也不大，浏览器会自动帮你解开
总结：
	只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
	但是p标签只能嵌套行内标签(HTML书写规范)
2、行内标签：自身文本多大就占多大		
	例如：i,u,s,p
	行内标签不能嵌套块儿级标签
	行内标签可以嵌套行内标签

2.1.2 特殊符号

 	空格
>	大于号
<	小于号
&	&
¥	¥
©	©
®	®

2.2 常用标签

div		块儿级标签
apan	行内标签
上述两个标签是在构造页面初期最常使用的，页面布局一般先用div和span占位之后再去调整样式，尤其是
div使用非常频繁
div你可以把它看成是一块区域，也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签

2.2.1 img标签

图片标签：
<img src="" alt="" title="" height="" width="">
<img src="https://pic.baike.soso.com/ugc/baikepic2/17801/cut-20220104093846-101599459_jpg_687_859_51635.jpg/300"
     alt="德云社" title="秦霄贤" height="300px" width="300px">
src:
	1、图片的路径，可以是本地的也可以是网上的
	2、url		自动朝url发送get请求获取数据
alt:
	当图片加载不出来的时候，给图片的描述性信息
title:
	当鼠标悬浮到图片上之后，自动展示的提示信息
height="500px",width="500px":
	高度和宽度当你只修改一个的时候，另外一个参数会等比例缩放
	如果你修改了两个参数并且没有考虑比例的问题那么图片就会失真

2.2.2 a标签

1.链接标签：<a href=""></a>

<a href="http://guodegang.org/">德云社</a>
<a href="https://baike.baidu.com/item/朱自清" target="_self">朱自清</a>
<a href="https://baike.baidu.com/item/科比·布莱恩特/318773" target="_blank">科比·布莱恩特</a>
href:
	1.放的是url,用户点击就会跳转到该url页面
	2.放其它标签的id值，点击即可跳转到对应的标签位置(a标签用的多)
target:
	默认a标签是在当前页面完成跳转	_self
	你也可以修改为新建页面跳转		_blank
	
2.a标签的锚点功能
eg:
	点击一个文本标题，页面自动跳转到标题对应的内容区域
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px; background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px; background-color: green"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>

标签具有的两个重要属性

 - id值
	类似于标签的身份证号，在同一个html页面上id值不能重复
 - class值
	该值有点类似于面向对象里面的继承，一个标签可以继承多个class值

标签既可以有默认的属性也可以有自定义的属性

<p id="d1" class="c1" username="HTML" password="123"></p>

2.2.3 列表标签

• 无序列表

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ul>
emmet插件
ol>li{$}*3 然后tab键，会变成：
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>
虽然ul标签很丑，但在页面布局的时候，只要是排版一致的几行数据基本上用的都是url标签

• 有序列表

<ol type="A" start="5">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>

• 标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容2</dd>
  <dt>标题3</dt>
  <dd>内容3</dd>
</dl>