html的网页基本特征是什么,html的基础

前端主要由三大块组成：

1、Html网页内容的载体，是“结构层”

2、Css对页面进行修饰，是“表现层”

3、Javascript实现页面特效(动画、交互)，是“行为层”

一、认识html

1、定义：超文本标记语言。

超文本：音频、视频、图像等；

标记：标签。

2、开发环境：文本编辑工具—sublime

优点：轻量级，开发速度快

使用sublime时，用“ctrl+n”新建文件，“ctrl+s”保存文件

注意：输入文件名时要自己添加后缀“.html”。

3、运行环境：浏览器   谷歌，火狐，IE，opera

二、html5结构

版本标识html5

语言是：English

使用meta标签中的属性charset，防止中文乱码

Document页面标题

内容

三、html常用标签(标签有语义)

1、p标签：段落标签，用来存放大量的文字

特征：(1)默认宽度是父元素宽度的100%

(2)可以设置宽/高

(3)独占一行

2、h标签：标题标签

特征：(1)h1-h6 字体由大到小，默认加粗

(2)默认宽度是父元素宽度的100%

(3)可以设置宽/高

(4)独占一行

这是标题一

这是标题二

...

这是标题六

注意：h1标签在一个页面上只能使用一次，与SEO(搜索引擎)有关：优先选择title“网页标题”相关内容，其次选择h1相关内容，h1多写会被SEO认为滥用。

3、div和span标签：没有任何语义，用来实现页面布局

(1)div：是一个块元素，无语义，可以包含其他html标签，可以将网页分为几个区块，用于排版布局。

(2)Span：是一个行内元素，通常用来定义一小段文字样式。

特征：a.同一行显示，

b.宽度由内容决与p标签不同，不换行

注意：与标签区分开。

可以使用“p*3 “ctrl+e””直接生成三行

4、格式化标签(都是双标签、行内元素，格式化标签可嵌套)

(1)：粗体文字(bold)

(2)：粗体，加重语义

(3)：大号字

(4)：斜体(emphasized)，加重语义

(5)：斜体(italic)

(6)：小号字

(7)_{：下标字(subscript)}

(8)^{：上标字(superscript)}

(9)：删除字

注意：(1)“与”，“与”这两组语义相同，但SEO在搜索时会优先筛选加重语义的标签信息。

(2)i：icon(小图标意思)，图标首选标签。

5、img标签(单标签，为网页插入图片)

(1)src：规定显示图片的URL(地址/存放位置)，可以是gif、PNG、JPEG等；

(2)alt：图片加载失败后的显示文本；

(3)title：图片加载成功时鼠标滑过显示的文本。

注意：<1>绝对路径：

b.从盘符开始的路径：C:\Users\images\go.jpg

<2>相对路径：

a.当图片所在文件夹与当前的html文件在同一个文件夹时(同一层)：src=”images/go.jpg”

b.不在同一层：src=”../imgages/yes.jpg”

6、a标签：双标签，插入链接

百度

四种状态：

(1)link 访问前 黑色

(2)visited 访问后 紫色

(3)hover 悬停时 可设置颜色

(4)active 按住不放 红色

属性：

(1)href：规定链接指向的页面的URL

(2)target：在何处打开

默认是“_self ”在当前窗口打开；

“_blank”在新窗口打开

★各种链接类型★：

(1)文字链接

小米手机

(2)图片链接

(3)空链接

空链接  ##可多个

不进行页面跳转，但显示网址

空链接

不进行页面跳转也不显示网址

(4)锚点链接：可以连接到同一页面的指定位置

步骤：1.在被连接的位置上输入id：

..

2.在建立连接的对象上添加a标签：

小米手机4

7、高级标签table(tr行，td 列)

1.属性：(1)border：加边框

(2)cellspacing：单元格边沿与内容间距

(3)cellpadding：单元格边沿之间间距

(4)colspan：列跨度

(5)rowspan：行跨度

例1：

姓名	语文	数学	英语
小丽	88	87	66

例2：

菜单		备注
青椒炒肉	糖醋里脊

2.结构：

多个

..可省略

多个

..

多个

..可省略

8、form表单

1.应用场景：登陆页面、注册页面、搜索等跟服务器进行数据传递的地方。

2.表单元素：

(1)action：它的值是form表单需要提交的地址

Img和a标签的路径

(2)mathod属性取值(默认get)：

get：信息追加到URL后面，不安全

post：不将信息追加到URL后边，安全，但效率低于get

(3)input中type属性取值：

<1>text：文本输入

<2>password：密码

<3>checkbox：复选框

1

2

3

<4>radio：单选按钮

男

女

注意：指定相同的name，才能实现互斥，即只选一个,返回值value代表信息

<5>submit：自动提交按钮(不同的浏览器默认显示的不一样，例如“提交”、“登陆”、“自动提交”等，可以用value定义)

<6>button：普通按钮

=button按钮

<7>reset:重置

<8>hidden：隐藏域

<9>fiel：文件域

<10>image：图片域

height="100" width="100">

3.其它标签：

(1)textarea：多行文本框

rows="10">

(2)select：下拉框

属性：Size:显示行数；multiple：默认选择三个。

郑州

...

信阳

(3)label：将label属性“for”与input属性“id”绑定

点击label文本，对应id的input标签获取交代

方式一：女

女

方式二：用户名：

name="username">

(4)fieldset打包：

是标题哦

带格式粘贴：ctrl+shift+v

四、什么是标签语义化？

1、合适的标签做合适的事情

2、不需要添加CSS，也可以看到页面结构，结构清晰

3、有利于SEO搜索

4、推荐使用有语义的标签，少用无语义的标签