HTML--文本标签/marquee/bgsound/列表标签/超链接标签/img 图像标签/转义字符/表格标签/表单提交/框架标签

发布时间:2021-08-05 10:07:08

HTML入门

1.软件结构分类
C-S结构(Client-Server 客户端-服务器端)
典型应用:
QQ
特点:
(1)必须安装特定的客户端程序
(2)服务器软件升级,客户端的软件同步升级


B-S结构(Broswer-Server 浏览器-服务器端)
典型应用:
163网站,华育官网,游戏官网
特点:
(1)不需要特定的客户(只需要浏览器软件)
(2)服务器软件升级,浏览器客户端不需要升级


2.网站
服务器端的网站都是基于bs结构的,这个软件俗*小巴尽薄M臼怯赏匙槌桑桓鐾尘褪怯蒆TML页面组成,HTML是一门网页制作的语言。


3.HTML语言
html是第一门网页制作语言,最简单的一门语言。hyperText Markup Language 超文本标记语言。
html语言由标记组成。学*html语言,掌握一些常用的标记即可。



基本标签的讲解

1.基本标签的讲解
?html开始标签


-- 文件头(用户在浏览器的主体是看不到的)

--文件体(用户在浏览器的主体看得到)

?html结束标签


2 . head文件头:作用:告诉浏览器如何解释该html页面。







这是标题











3 . 文本标签(body里面的标签)
(1)基本的:
*标题(h1~h6) align:设置位置


标题1
标题2
标题3
标题4
标题5
标题6

效果如下:

*水*线(hr) color:线的颜色



*换行(br)


*标签规定粗体文本(b)
*将文本以斜体显示(i)
*将文本以下划线显示(u)


我是b标签

我是i标签

我是u标签

效果如下:


*段落(p)



这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落。



这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落。


效果如下:


*段落缩进(blockquote)(主要用于解释或者强调)



这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落。



这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落,这是第二个段落。


段落缩进,用于解释说明或者强调。段落缩进,用于解释说明或者强调。段落缩进,用于解释说明或者强调。段落缩进,用于解释说明或者强调。段落缩进,用于解释说明或者强调。段落缩进,用于解释说明或者强调。

效果如下:


*上下标(sup和sub)(一般用于公式)y=x2 H2O CaCo3


y=x2

H2O

CaCO3

效果如下:


*原样输出(pre)(希望网页上的东西和代码里面写的样式完全一样的时候(写一首诗)


好雨知时节,当春乃发生。
随风潜入夜,润物细无声。
野径云俱黑,江船火独明。
晓看红湿处,花重锦官城。



好雨知时节,当春乃发生。
随风潜入夜,润物细无声。
野径云俱黑,江船火独明。
晓看红湿处,花重锦官城。

效果如下:


(2)marquee
behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动 )
bgcolor:字幕背景颜色
direction:设置字幕的滚动方向down(从上向下滚动) right(从左向右滚动) left(从右向左滚动) up(从下向上滚动)


我是滚动的

效果如下:


(3)bgsound
src:需要播放的音乐路径
loop=-1(无限循环)
autostart=”true”自动播放



(4)列表标签
*有序列表ol li(type属性更改序号类型)



  1. 章子怡

  2. 刘亦菲

  3. 贾玲


效果如下:


*无序列表ul li(用于条目的罗列,type属性更改序号类型)



  • 章子怡

  • 刘亦菲

  • 贾玲


效果如下:


*项目列表标签(dl dt dd)(一般用于有层次结构的列表)



财务总监

财务专员1

财务专员2

财务专员3


技术总监

程序员1

程序员2

程序员3



效果如下:


*下拉选项:




效果如下:


*行内标签(span) (html中用的非常少,css中用的非常多)
*块标签



(html中用的非常少,css中用的非常多)


4 . 超链接标签
(1)