HTML
1、概念:Hyper Text Markup Language,超文本标记语言
特点:严格来说并不是编程语言,因为没有逻辑,定义了网页的骨架,它告诉Web浏览器该如何解析即网页的信息,进行展示。
2、HTML的基本骨架
<!DOCTYPE html><!-- HTML5文档的声明-->
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
主体部分
</body>
</html>
网页的头部(head)+主体部分(body)
3、基本的标签元素
(1)font:字体标签
对应的属性:字体颜色(color--16进制或者英文表示)、字体大小(最大值是7)、字体的类型(系统有的)
(2)hr:分割线标签
说明:自带换行功能,自闭合标签,也可以设置color、width(长度)、size(粗细,px为单位)、align、noshade(默认是有阴影)
(3) 空格
说明:浏览器不认识文档的换行符合空格符
(4)p:段落标签
说明:自闭合标签,首行缩进(???)
(5)b(加粗)、s(删除线)、u(下划线)、i(斜体)、small(比默认字体小一号)、big(比默认字体大一号)
说明:删除线常用在商品的打折或降价,下划线常用来表示强调
(6)h1--h6:标题标签
说明:h1---h6,字体是从大到小
(7)pre:预编译标签
说明:保持样式不变
(8)sup:上标 sub:下标
说明:上标用在数学上(平方,立方等);下标用在化学上(二氧化碳等化学式中)
(9)关于背景的属性:bgcolor、background
说明:bgcolor表示背景颜色,backgrounnd表示背景图片(资源的链接,可以写相对路径或绝对路径),如果两者同时存在,背景图片会覆盖背景颜色
(10)img:图片标签
说明:src属性可以链接任何的图片资源(JPG、GIF、PNG、BMP)等格式
其它属性:border:设置边框的大小(px为单位)
title:图片的描述(鼠标悬浮的时候显示)
alt:图片加载失败的显示
width、height:对图片大小进行设置
例1
(11)列表标签
1、ul:无序列表
属性:type(设置显示方式--空心圆,方块、实心圆(默认))
2、ol:有序列表
属性:type(1、A、I),可以通过start属性指定其实的编号
3、dl:自定义列表
说明:两个子标签dt(标题)、dd(标题的描述)
(11)特殊字符
>-- ">"大于号;< --"<"小于号
(12)超链接:a
属性:href(表示资源链接地址,可以是html、提交到后台、图片、音频、视频、文本、某个网站的域名、IP等)
target(打开方式:_blank--新建窗口打开;_self--自身打开→用户体验不好)
重点:锚链接(应用:小说中一章比较常,在首部可以跳到尾部,在尾部可以跳转到首部),局部链接
应用:举例在尾部跳到首部
首部:在对应的位置定义一个标记<a name="tar"></a>
尾部:<a href="#tar"></a> 说明:#表示本页面
注意:href的解析网站域名的过程
后续补充:超链接的应用场景
例1 锚链接的用法
(13)表格标签:table
说明:最初是为了排版布局,现在采用div+css的方式布局
子标签:tr(行)、th(单元格,不过是加粗的)、td(一般单元格,理解成列)
属性:bgcolor(背景颜色)、background(背景图片)、cellspaceing(边框的间隙,默认是有间隙(虚线)的,单位是px)
cellpadding(表格中的内容与边框四周的间距)
应用:表格的嵌套、表格的合并
表格的嵌套(在某个单元格中在写一个表格table)
表格的合并(三个例子来说明):tr中的属性
后续补充:表格的应用场景
(14)表单标签:form
属性:action(所提交后台的路径)、method(提交方式:常见get和post)
子标签:input 对应的属性
type:text(文本,一般用作用户名)、password(非明文,一般用作密码)、radio(单选框)、checkboxed(复选框)、file(文件上传)、submit(提交按钮,将数据提交到后台)
子标签:select(下拉选项)
子标签:option
子标签:textarea(文本域:常用来写个人描述),可以指定cols和rows的属性
说明:后续补充表单的应用场景
(15)终极应用:表格和表单的嵌套