HTML+CSS 学习笔记 02
2020-06-11 本文已影响0人
coderzwx
一.网页的基本元素
1.1 一个完整的html(网页)包含哪些基本元素呢?
- 文档定义声明(ddt)
- HTML文档说明,告诉浏览器当前页面时html5页面,让浏览器以html5标准去解析此页面
- 必须放在html文件的第一行,不可省略,省略会有兼容性问题
- HTML5的声明比之前的版本要简明的多
- html元素(根元素,有且只有一个)
- html元素是HTML文件的根元素,有且只能有1个,其他所有的元素都是它的后代元素
- w3c标准建议给html元素加上个lang属性,其作用是:
- 帮助翻译工具确定要使用的翻译规则
- 帮助语音合成工具确定要是用的发音
- lang="en":告诉浏览器这个HTML文档语言为英文
- lang="zh-CN":告诉浏览器这个HTML文档语言为中文
- head元素(头部元素,对网站进行配置)
- head元素的内容是一些元数据(描述数据的数据),一般用于描述网页的各种信息,如网页标题,网页图标,字符编码等
- 以下元素都是在head元素中常用的
- meta
- title
- style
- link
- base
- script
- noscript
- body元素(所有页面看得见的元素都是body里的元素)
- body元素的内容就是用户在浏览器中可以看到的实际内容
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>网页基本结构</title>
</head>
<body>
<h1>网页基本构成</h1>
</body>
</html>
二. h元素,p元素和strong元素
2.1 h元素
- 共有6个等级,h1-h6
- 作为网页的标题元素,对于搜索引擎的优化有着极其重要的作用
- 一个网页中h1只能有1个,且应该尽可能的体现网站的内容,易于被搜索引擎抓取
- h元素会提高网站被抓取的权重,但是如果乱用的话会被搜索引擎视为k站,那就不好了
2.2 p元素
- 段落元素,表示文章的一个段落
- 块级元素,独占一行
- 浏览器会忽略编辑的换行,空格
2.3 strong元素
- 用于强调某些文本,粗体的显示效果
三. code,br,hr
3.1 code 元素
- 用于显示程序代码,使用等宽字体,可用css设置代替,不推荐使用
3.2 br元素
- 单标签,强制换行,一般也不用
3.3 hr元素
- 分割线,一般也不用
四.字符实体
html中有些字符是预留下来做特殊用途的,如<(小于),>(大于),如果直接写,会被浏览器直接解析为标签,这显然不是我们想要的
所以,必须使用字符实体,书写格式一般有两种
- &entity_name
- &#entity_number
注意:实体字符不需要记忆,用时直接去查实体字符表即可
五. div元素和span元素
5.1 span元素
-
行内元素,不会独占一行
-
默认情况下和普通文本是没有什么区别的
-
但是可以将其特殊对待,设置特殊的样式
5.2 div元素
- 块级元素,独占一行
- 常作为其他元素的父元素,容器元素,方便控制元素的样式
- 用于把网页分割成很多独立部分,也是网站中用到的元素最多的元素
六. img元素
6.1 对于img元素的基本认识
-
img元素是专门来显示图片(img是image的简写)
-
img元素是单标签
<img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/144621/1/409/96347/5ee0bfbdE9ee19f5f/1ec02f792bdfb9e1.jpg.webp" alt="图片" width="600" height="400"> -
主要属性解析:
-
src: 用于设置图片的地址(路径)
- 网络地址:网络上的资源
- 本地地址:电脑上的图片资源
- 绝对路径:相对于根目录的路径
- 相对路径:相当于该文件的路径,建议使用相对路径
-
alt::当图片资源不可用或者加载失败时的提示信息,开发时一定要写上这个属性
-
width/height:设置图片的宽高,默认单位是px,只设置width/heght,height/width会根据图片宽高比自动压缩
-
6.2 常见图片格式
- png:静态图片,支持透明
- jpg|jpeg:静态图片,不支持透明
- gif: 动态图片,支持透明
