HTML引入
Hyper Text Markup Language 超文本标记语言
<h1>Hello, beautiful girl.</h1>
<a href="https://www.baidu.com/">click me! give you something to see</a>
<img src="https://008ts.cn/wp-content/uploads/2021/07/loading-%E5%89%AF%E6%9C%AC.jpg" />
如果想要让浏览器能渲染出自己写的页面, 就必须遵守HTML语法
我们在浏览器看到的页面, 内部其实都是HTML代码
HTML --> 书写网页的一套标准
HTML
注释
<!--单行注释 -->
<!--
多行注释
多行注释
-->
由于HTML代码非常的杂乱无章而且很多, 所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始 -->
导航条所有的html代码
<!--导航条结束 -->
<!--左侧菜单栏开始 -->
左侧菜单栏html代码
<!--左侧菜单栏结束 -->
文档结构
<html>
<head>
<!--head内的标签, 定义一些配置, 给浏览器看的 -->
</head>
<body>
<!--body内的标签, 浏览器加以渲染, 给用户看的 -->
</body>
</html>
<!--标准文档结构 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
标签分类1
1. 双标签
2. 单标签(自闭和标签)
head内常用标签
<title>Title</title> 网页标题
<style> 内部书写CSS代码
h1{
color: greenyellow;
}
</style>
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
<script> 内部书写js代码
alert(123)
</script>
<script src="myjs.js"></script> 引入外部js文件
https://www.taobao.com/
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
使用浏览器搜素时, 只要输入了keywords后面指定的关键字, 该网页就有可能被展示给用户
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">
网页的描述性信息
body内常用标签
<h1>一级标题</h1> 标题标签 1~6级标题
<p>段落标签</p>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<br> 换行
<hr> 水平分割线
特殊符号
空格
> 大于号
< 小于号
& &
¥ ¥
© © 版权
® ® 商标
常用标签
div 块级标签
span 行内标签
上述两个标签, 是在构造页面初期最常使用的
页面的布局一般是先用div和span占位之后再去调整
可以把div看成是一块儿区域
用div规划区域之后, 向区域中添加内容
普通的文本, 先用span标签占位
标签分类2
1. 块级标签 --> 独占一行
h1~h6 p div
2. 行内标签 --> 自身文本多大, 就占多大
i u s b span
标签嵌套
块儿级标签 可以修改长宽; 行内标签不可以, 修改了也不会变化
块儿级标签 内部可以嵌套任意的块儿级标签和行内标签
行级标签不能嵌套块级标签, 可以嵌套行内标签
<!--特例-->
p标签 虽然是块儿级标签, 但是它只能嵌套行内标签, 不能嵌套块儿级标签
写的时候嵌套的话, 浏览器会自动分开, 不会报错
(浏览器是直接面向用户的, 不会轻易的在明面上报错, 报错也是在console报)
img标签
图片标签
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp417238873.jpg&refer=http%3A%2F%2Fimg2.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652860983&t=9ae35d18e746645a926a5e3944348f66" alt="图片加载失败" title="喜羊羊"
height="800px" width="300px">
src
放图片的路径, 可以是本地的, 也可以是网上的
alt
图片加载不出来的时候给图片的描述信息
title
鼠标悬浮到图片上的时候显示的提示信息
hight
width
高度和宽度, 当只修改一个参数时, 等比例缩放
修改两个参数并不考虑比例问题时, 图片就会失真
a标签
链接标签
<a href="https://www.baidu.com">点了去百度</a>
href
放url, 用户点击会跳转过去
放其他标签(不是a也可以)的id值, 点击可跳转到对应位置
如果a标签指定的网址从来没有被点击过, a标签的字体颜色是蓝色
如果被点击过, a标签的字体颜色是紫色(浏览器记忆)
<a href="https://www.sogo.com" target="_self">点了去搜狗</a>
<a href="https://www.jd.com" target="_blank">点了去京东</a>
target
默认a标签在当前页面完成跳转 _self
可指定为新建页面跳转 _blank
<a href="" id="d1">顶部</a>
<div style="height: 1000px;background-color: black"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="#d1">回到开头</a>
<a href="#d2">回到中间</a>
a标签的锚点功能
点击标签, 页面自动跳转到标题对应的内容区域
重要属性
1. id值
类似于标签的身份证号, 同一个html页面上id值不能重复
2. class值
一个标签可以继承多个class值
标签可以有默认的属性, 也可以有自定义的属性
<p>id="d1" class="c1" username="matri" password="123"</p>
列表标签
无序列表
--> 使用较多
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
虽然ul标签很丑, 但是, 在页面布局的时候, 只要是排版一致的几行, 基本上都是用ul标签
type
默认是实心黑点, 可修改
circle --> 空心圆点
square --> 实心方块
...
有序列表
ol>li{$}*3 然后点一下Tab键 <!-- emmet插件语法, 写html快捷补全, 很好用 -->
<ol type="I">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
type
默认1, 可修改
I --> 罗马数字
A --> 大写字母
...
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
