举例一个html语言,HTML简介及标签介绍（一）

11、HTML

(1)什么是HTML？

超文本标记语言(HyperText Markup Language，简称 HTML)

(2)怎么学HTML？

HTML 是一门标记语言，标记语言由一套标记标签组成，学习 HTML，其实就是学习标签

(3)开发工具

a、编辑器 ： Pycharm

b、浏览器 ：Chrome、Firefox

***(4)网页的基本组成：

a、HTML---负责一个网页界面的结构

b、JavaScript----主要负责与用户交互

c、Css--负责一个网页界面的样式

注意：JavaScript区分大小写，Css、HTML不区分大小写。

(5)HTML的基本模板

2、标签

2、1 什么是标签

(1)由尖括号包裹单词构成(例如：),所以标签不可能以数字开头

(2)标签不区分大小写，推荐小写

(3)标签可以嵌套，但不能交叉嵌套错误示例：

正确示例：

2、2 标签的使用样式及属性

(1)标签使用样式：

1. 开始标签标签体结束标签

2、 自闭合标签，例如：
,

---

,

(2)标签属性：

a.通常为键值对形式出现，例如：color=“red” id = ‘eat’

b.属性只能出现在开始标签和自闭合标签内

c.属性名字全部小写，属性值必须用单引或者双引包裹

d.如属性名和属性值完全一样，直接写属性名即可，例如：“readonly”(input标签属性)

(3)html文件各部分标签详解

块级标签和内联标签：

1 、块级标签：

/

/

1. /

• /

/

2 、内联标签：///_/^//

块级元素的特点：

1、 总在新行上开始

2、高度，行高以及外边距和内边距都可控制

3、宽度缺省，则是它容器的100%

4、它可以容纳内联元素和其他块元素

内联元素特点：

1、和其他元素在一行上

2、高，行高以及外边距和内边距不可改变

3、宽度就是其文字或图片宽度，不可改变

4、内联元素只能容纳文本或者其他内联元素

行内元素注意：

1、  设置宽度width无效

2、  设置高度height无效

3、设置margin只有左右margin有效，上下无效

4、 设置padding只有左右padding有效，上下则无效，注意元素范围是增大了，但是对元素周围的内容是没影响的。

(4)常用标签之块级标签

1、标题标签 (header)：一般用在文章的标题，有h1~h6

2、段落标签 (Paragraph)：会把 HTML文档 分割成若干段落

3、列表标签： 列表标签分为：有序列表(

)、无序列表(

)

注意：快捷键使用(打入下面式字按下Tab键即可)：

ul>li*n

ol>li*n

dl>dt+dd*n

4、div 标签(块状标签)：用于分化一个一个的区域

(5)常用标签之行内标签

1、图片标签(img)：图片标签，用于向页面插入图片

2、粗体/斜体标签：粗体标签将文字加粗，斜体标签将文字倾斜(和)

3、超链接标签：超链接标签其实就是 a 标签，一般用于网页之间的跳转还能做锚点，进行跳转()

4、文字标签：Span 标签是单纯的文字标签，只有配合 CSS 才能有效果

例子：

图形标签：插入图片

超链接标签:

链接显示的文本 ：实现网页跳转和本页内跳转(要注意目标网址的区别)

(6)行内元素和块级元素的转换

1、行内元素----->块级元素：display:block；

2、块级元素------>行内元素：display:inline;

3、特殊符号

(1)什么是特殊符号？

特殊符号就是网页上一些比较特殊的符号

(2)特殊符号如何写？

特殊符号以 & 开头，分号结尾

显示结果

4、表格

4、1表格整体结构

4、2 举例

显示结果

*****5、表单

5、1表单是什么？

(1)表单是什么：表单是搜集用户数据信息的各种表单元素的集合区域

(2)表单的作用：用于收取用户数据并向后台发送，前后交互的方式之一

(3)表单的应用：表单常应用于 登录注册，搜索，文件上传等

5、2 表单的属性

(1)action：提交时候的地址，默认使用当前页面

(2)method：提交时候的方法，有get 和 post 两种方法，默认使用 get

(3)entype：设置编码格式，有三种默认：application/x-www-form-urlencoded

上传文件：multipart/form-data

不建议使用：text/plain

5、3 表单中常用的标签

(1)Input 标签：表单中使用频率最高的标签，没有之一

1. name属性：表单提交项的键， 与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用

2. value属性:表单提交项的值

3. input标签中不同type，value值的不同type="button"/"reset"/"submit"--定义按钮上显示文本

type="text"/"password"/"hidden"--定义输入字段初始值

type="checkbox"/"radio"/"image"--定义与输入相关联的值

(2)textarea：文本域，一般用于多行文本

(3)select：下拉框，一般用于选项

5、4 Input常用的type属性值

checked="checked"默认选中文件上传

Input标签的其它属性：

5、5  select下拉框

(1)option(下拉选项)：下拉框的基本标签，有多少个option 就有多少个下拉选项

(2)selected(下拉状态)：表示选中某个下拉选项

(3)size(下拉框显示)：表示下拉框，显示多少个，默认为一个

(4)name(下拉框的名字)：表示下拉框向后台提交数据的时候，所传的名字

试题示例：

用代码写出下面的网页

试题代码