HTML(结构层 Hypertext Markup Language)超文本标记语言

HTML:===> 结构层 css:===> 表现层 js:===> 行为层

HTML开发需要环境:

开发环境:记事本、IDE(集成开发环境)

运行环境:浏览器(chrome)

l后缀名称:.html   .htm

l网页文档:开发网页,让其他人可以通过浏览器来访问我们的数据

HTML语法规则

u声明网页中的字符编码是UTF-8编码

1、常见的属性

src属性:指定要播放的视频的路径、目录、文件夹/文件

controls属性:用于展示播放器的控制台(播放、暂停、声音、全屏)

autoplay属性:是否自动播放

autoplay属性设置自动播放

展示指定位置的图片,网页中常用的图片后缀名有三个

.jpg  .gif  .png标签。


2、常见的html标签:

h1~h6标题标签:有加粗效果

small标签:表示变成原来的80%

B标签:文本加粗   

strong标签:文本加粗

i标签:文本斜体显示  

em标签:文本斜体显示

u标签:文本添加下划线

del标签:文本添加删除线

p标签:段落,本身带有一个换行

div标签:块标签

span标签:行标签

a标签:可以链接到其他页面或网站

br标签:换行标签

hr标签:表示一条分隔线

< :<   小于

> :>  大于

    空格

横向合并单元格:colspan[跨列] 

纵向合并单元格:rowspan[跨行]


这5个标签可以加也可以不加:

   

   


   

   


    

    


HTML(结构层 Hypertext Markup Language)超文本标记语言_第1张图片

h1~h6   和   small标签:

HTML(结构层 Hypertext Markup Language)超文本标记语言_第2张图片

div标签:


HTML(结构层 Hypertext Markup Language)超文本标记语言_第3张图片

a标签:

HTML(结构层 Hypertext Markup Language)超文本标记语言_第4张图片

span标签:

HTML(结构层 Hypertext Markup Language)超文本标记语言_第5张图片

img、video 、 audio  标签:

HTML(结构层 Hypertext Markup Language)超文本标记语言_第6张图片

锚点:

HTML(结构层 Hypertext Markup Language)超文本标记语言_第7张图片

href="#a" a表示下面body里面的内容,id选择器

HTML(结构层 Hypertext Markup Language)超文本标记语言_第8张图片


table布局:

tr表示行,td 表示列  th也表示列,但是他会默认给字体加黑并且居中


列表标签:

ul  li

ol  li

dl  dt dd

例子:

HTML(结构层 Hypertext Markup Language)超文本标记语言_第9张图片


form 表单:

HTML(结构层 Hypertext Markup Language)超文本标记语言_第10张图片

input 里面的类型种类:type

[type="text"、password、file、url、email、image、submit、

reset、button、checkbox、radio、hidden、number]

textarea (cols rows)

select (option value)

例子1:

HTML(结构层 Hypertext Markup Language)超文本标记语言_第11张图片

例子2:

HTML(结构层 Hypertext Markup Language)超文本标记语言_第12张图片
例子2:

例子3:

HTML(结构层 Hypertext Markup Language)超文本标记语言_第13张图片


例子4:

HTML(结构层 Hypertext Markup Language)超文本标记语言_第14张图片

你可能感兴趣的:(HTML(结构层 Hypertext Markup Language)超文本标记语言)