HTML基础讲解
1、HTML文件基本结构
<!doctype html> ----> 文档声明(告诉浏览器我的文件类型和版本)
<html> ----> 网页所有内容
<head> ----> 定义一些文档属性(在网页中不显示)
<meta charset="UTF-8">
<title>浏览器窗口名称</title>
</head>
<body> ----> 网页中显示的内容
</body>
</html>
注释方法:<!--注释内容-->
不会显示在网页中,给程序员自己看的
2、HTML元素
HTML文档是由HTML元素定义的。元素指的是从开始标签到结束标签的全部代码,开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。
例如:
开始标签 元素内容 结束标签
<p> this is my web page </p>
而形如<br />换行标签这样的标签叫空标签,也就是空元素,因为它里面没有元素内容。空元素在开始标签中以"/"进行关闭,不加"/"也能正常使用。
<br />标签与其他自带换行功能标签的区别在于行间距不同,换行标签行间距相对小。
大多数HTML元素可拥有属性,也可以嵌套使用。
如:
<p><a href="https://www.baidu.com/">百度一下,你就知道</a></p>
3、HTML基础标签
<head>、<body>
4、HTML标题
标题标签:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
自带样式:上下有间距;独占一行;字体加粗;字体大小从h1到h6逐渐变小
示例:
<!DOCTYPE html>
<html lang="en"><!--语言为英文网站-->
<head>
<meta charset="UTF-8"><!--字符编码格式为utf-8-->
<title>HTML基础</title>
</head>
<body>
HTML基础<!--正常-->
<h1>HTML基础</h1><!--h1-->
<h2>HTML基础</h2><!--h2-->
<h3>HTML基础</h3><!--h3-->
<h4>HTML基础</h4><!--h4-->
<h5>HTML基础</h5><!--h5-->
<h6>HTML基础</h6><!--h6-->
</body>
</html>
5、HTML段落
段落标签:<p>标签
在网页中显示文本文字;
自带样式:上下有间距;独占一行;
6、HTML属性
- 标签可以拥有属性为元素提供更多的信息。
- 属性以键值对的形式存在。
- 常用标签属性:
<h1>:align对齐方式
<body>:bgcolor背景颜色
<a>:target规定在何处打开链接
- 通用属性:
class:规定元素的类名
id:规定元素唯一ID
style:规定元素的样式
title:规定元素的额外信息
7、HTML链接
HTML单独有一博客,在这只简单提及
超链接标签:<a>
点击网页中显示内容可以跳转到指定的网页或者位置
自带样式:下划线;点击前蓝色;点击时红色;点击后紫色;
写法:<标签 属性名称=“属性的值”>网页显示内容</标签>
如:<a href="http://www.baidu.com">百度一下</a>
其中:
href属性:跳转地址属性;
取值:
1、网络地址:协议+域名 跳转到网页
2、 # : 返回当前页面最顶部
锚点功能:需要在想跳转到的位置上写一个标签,并且给这个标签设置一个id属性值,然后利用a标签的href属性值设置为#id值;
3、本地地址:最高盘符+目录结构+/文件名称;
6、常用标签
双标签:
标签名称 | 写法 |
---|---|
下划线 | u |
加粗 | b |
大号文本 | big |
小号文本 | small |
强调文本 | em |
删除线 | s |
上标 | sup |
下标 | sub |
加重 | strong |
插入字 | ins |
斜体 | i |
单标签:
换行标签 <br>或<br/>
水平线标签 <hr>或<hr/>
属性:width:长短,取值数字或百分比;
align:水平位置,取值left/center/right;
size:粗细,取值数字;
color:颜色,取值英文单词;
示例:
<!DOCTYPE html>
<html lang="en"><!--语言为英文网站-->
<head>
<meta charset="UTF-8"><!--字符编码格式为utf-8-->
<title>HTML基础</title>
</head>
<body>
HTML基础<!--正常-->
<hr width="100px" size="2px" align="left" color="red"><!--水平线标签-->
<u>HTML基础</u><!--下划线--><br/><br/><!--换行标签-->
<b>HTML基础</b><!--加粗--><br/><br/>
<big>HTML基础</big><!--大号文本--><br/><br/>
<small>HTML基础</small><!--h小号文本--><br/><br/>
<em>HTML基础</em><!--强调文本--><br/><br/>
<sub>HTML</sub>基础<!--下标--><br/><br/>
<sup>HTML</sup>基础<!--上标--><br/><br/>
<strong>HTML基础</strong><!--加重--><br/><br/>
<ins>HTML基础</ins><!--插入字--><br/><br/>
<i>HTML基础</i><!--斜体-->
</body>
</html>
7、HTML图像
图片标签:单标签 <img>或者<img />
1、alt属性:
该属性用来设定图片的文字说明。图片不显示时(比如下载失败,或用户关闭图片加载),图片的位置上会显示该文本。
2、width 属性,height 属性:
图片默认以原始大小插入网页,width属性和height属性可以指定图片显示时的宽度和高度,单位是像素或百分比。若width属性和height属性只设置了一个,另一个没有设置。这时,浏览器会根据图片的原始大小,自动设置对应比例的图片宽度或高度。
3、src属性:
该属性用来说明插入图片的路径。
- 绝对路径:最高盘符+目录结构+/文件名称
- 相对路径:要插入网页的图片相对于HTML文件的路径
- 同级目录下:文件名称
- 子级目录下:文件夹名称/文件名称
- 父级目录下:…/文件名称
示例:
<img src="D:/HTML.png"width="30%"height="30%">
8、HTML音频
语法:
① 链接单个音频文件:
<audio controls>
<source src=“赵雷 - 鼓楼.mp3" type="audio/mpeg">
</audio>
② 链接多个音频文件 source:
<audio controls>
<source src="天下无双.mp3" type="audio/mpeg">
<source src="第五元素.mp3" type="audio/mpeg">
</audio>
audio属性:
autoplay:false 是否自动播放
controls:flase 是否显示播放控件
loop:flase 是否循环播放
muted:false 是否静音
8、HTML列表
列表标签:无序列表和有序列表
列表项:<li></li>
1、无序列表 <ul></ul> unorder list
type属性:列表标识的类型
取值:disc 实心圆点(默认)
circle 空心圆
square 实心矩形
2、有序列表 <ol></ol> order list
type属性:列表标识的类型
取值:1 数字(默认)
a 或 A 字母
i 或 I 罗马数字
start属性:起始位置
取值:数字 表示从第几个位置开始
9、HTML表格
表格:table标签
table表格>tr行>td单元格
table标签属性:border边框;cellspacing 单元格之间的距离;cellpadding 单元格和内容之间距离;
td单元格标签属性:colspan 跨列合并;rowspan 跨行合并;
align 内容水平位置:可取值left/center/right
合并单元格三个步骤:
1.在最前面的单元格标签中写属性;
2.跨行rowspan跨列colspan属性;属性值为合并单元格的个数;
3.将被合并的单元格删除;
10、HTML分区
分区标签:div标签和span标签
div:块级分区标签;span:行内分区标签;
块级元素:div ol ul li p h1~h6;独占一行;
行内元素:span u i s b sub sup a;不独占一行;
11、HTML表单
表单:<form></form>收集用户信息提交给服务器
表单控件:在表单中提供不同的功能;
1.input标签:单标签,<input>或者<input />
type属性:取值 text 文本框;password 密码框;
submit 提交按钮;button 普通按钮;reset 重置按钮;
radio 单选框;checkbox 复选框;
2.select和option标签:下拉选项框
3.textarea标签:双标签,文本域
cols属性:显示多少列,如果超出会自动换行;
rows属性:显示多少行,如果超出会出现滚动条;
4.数据提交给服务器
1.在form表单标签中action和method属性
action属性:取值发送服务器的链接
method属性:发送的方式,取值get和post
2.在表单控件中name属性和value属性
name属性:表单控件名称,发送数据的名称;
value属性:表单控件的值,发送数据的值;
12、HTML特殊字符
1.当我们想在网页中显示尖括号时,浏览器认为尖括号是标签,它不显示,就需要使用特殊字符:
< 左尖括号 <
> 右尖括号 >
2.浏览器解析执行时会将多个空格符只显示一个空格,如果我们需要显示多个空格符,使用特殊字符:
空格
© 版权符号
® 商标符号
相关链接:
HTML颜色
HTML字体
HTML特殊字符编码