知识点:
一:html的基本结构
分为两个区域:
head 描述区
body 内容区
< !DOCTYPE html> < !–声明文档类型–>
< html lang=“en”> < !–根标记、根标签、根元素 lang=“en” 语言形态–>
<head>
<!-- head描述区 -->
<meta charset="UTF-8">
<!-- 字符编码格式 UTF-8 国际性编码格式-->
<!-- charset="GB2312/GBK" -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 控制视口的比例 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 按照IE最高版本 去渲染当前网页 -->
<title>欢迎走入胖帅心里</title>
<!-- 当前网页的标题 - 显示在状态栏上面 -->
</head>
<body>
<!-- 内容区域 -->
只要是网页中能看到内容,都是放在body里面胖帅
</body>
二:html的语法
1:html标签 分为两类:
单标记(空标记)
双标记(常规标记) : 成对出现都属于双标记
2:语法:
双标记:
<标签名称 属性名="属性值"> </标签名称>
单标记:
<标签名称 属性名="属性值">
html语法说明:
a:在尖角号后面的第一个单词就是标签的名称。
b: 在标签后面,用空格隔开是属性
c: 属性和属性值之间用等号连接
d: 属性值放在引号里面(单双引号都可以)
e: 如果一个标签拥有多个属性的时候,属性和属性之间用空格隔开
三:html的常用标签
1:标题标签
< h1> </ h1> 唯一性:在一个页面只能出现一次 放logo
< h2> </ h2>
< h3> </ h3>
< h4> </ h4>
< h5> </ h5>
< h6> </ h6>
特点:拥有自己默认的大小、文本也是加粗状态
h2 - h6 可以是网页板块的标题、也可以是一段内容的标题、没有唯一性
5:加粗标记:
<b></b>
<strong></strong>
特点:默认显示加粗状态
strong标签偏向强调语气的作用。
3:文本倾斜:
<em></em>
<i></i>
4:下划线
<u></u>
5:强制换行符
<br>
特点:浏览器只要遇到br 就会把后面的内容放在下一行显示
6:水平线
<hr>
7:上标 下标
<sup></sup>
<sub></sub>
8:段落标记
<p></p>
9:代表单个字符或者一小段文本
<span></span>
10:转义字符:
空格
> < 左右尖角号
© 版本符号(备案图标)
11:div
<div></div>
div 是个盒子!
作用:专门给网页划分布局的
四:html的列表
无序列表:
< ul>
< li></ li>
< li></ li>
< /ul>
有序列表:
<ol>
<li></li>
<li></li>
</ol>
拓展:
改变列表符号的样式:
type=""
属性值:a / A
属性值:i / I
改变列表符号开始的符号:
start=""
属性值为一个数字,代表从第几个开始
自定义列表:
<dl>
<dt>一般情况下放的是图片</dt>
<dd>放的是对图片的解释</dd>
</dl>
五:超链接
超链接:
< a>< /a>
a里面的属性:
href="跳转的地址"
target=""
属性值:
_self(默认值 :在当前页面打开)
_blank(新创建一个窗口打开)
title="" 提示信息(大部分标签都能支持title属性)
六:图片
网页的图片展示两种:
一种是img标签导入的图片
一种是通过css添加的背景图
< img>标签的应用:
img标签里面的属性:
src="图片的路径"
alt="文本替换图片"
alt说明:(alt属性,属性值为空也尽量别删除)
a:当图片加载不出来的时候,alt里面的文本替换图片
b:有利于seo优化!方便搜索引擎对图片进行检索。
title=""
title说明:
a:提示信息
b:title作为图片的一个小标题
width="" 图片的宽
height="" 图片的高
border="" 图片的边框
七:相对路径的写法
1: 同级找同级 ./目标名称
2: 父级找子级 ./文件夹的名称/目标文件的名称
3:子级找父级 …/ 返回上一级
八:表格
表格的作用:显示数据
<table>
<tr>
<td></td>
</tr>
</table>
tr 行
td 列
表格里面的属性:
width=""
height=""
border=""
bordercolor="" 边框颜色