一、HTML介绍
1、什么是HTML?
HTML定制网站是一门语言，定制网站所有的网页都是用HTML定制网站这门语言编写出来的。HTML(HyperText Markup Language):定制网站超文本标记语言。
- 超文本：定制网站超越了文本的限制，定制网站比普通文本更强大。定制网站除了文字信息，定制网站还可以定义图片、音频、定制网站视频等内容。
- 标记语言：定制网站由标签构成的语言
HTML定制网站运行在浏览器上，HTML定制网站标签由浏览器来解析
HTML定制网站标签都是预定义好的。例如:使用< img>展示图片
2、W3C标准:网页主要由三部分组成
- 结构:HTML
- 表现:css
- 行为:JavaScript
二、HTML快速入门
- 新建文本文件，后缀名改为.html
- 编写HTML结构标签
- 在< body>中定义文字
<html> html根标签 <head> 加载资源信息和标题 <title> </title> </head> <body> <font color = "red" >正文 </font> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
1、HTML文件以.htm或.html为扩展名
2、HTML结构标签
- < HTML>：定义HTML文档
- < head>：定义关于文档的信息
- < title>：定义文裆的标题
- < body>：定义文档的主体
3、HTML标签不区分大小写
4、HTML标签属性值单双引皆可
5、HTML语法松散
三、基础标签
1、< h1> ~< h6> ：定义标题，h1最大，h6最小；
用法：< h1>我是标题h1< /h1>
2、< font>：定义文本的字体、字体尺寸、字体颜色（css完成）；
用法：< font face = “楷体” size = “5” color = “red”> 字体大小和颜色 < /font>
html表示颜色：
（1）英文单词：red,pink,blue…
（2）rgb(值1，值2，值3)，红绿蓝，值的取值范围：0~255，如red(255,0,0)
（3）#值1值2值3：16进制，值的范围：00~ff
3、< hr>：定义水平线
4、< b>：定义粗体文本
5、< i>：定义斜体文本
6、< u>：定义文本下划线
7、< center>：定义文本居中(css完成)
8、< p > ：定义段落
9、< br>：定义换行
四、图片、音频、视频标签
1、img:定义图片
- src:规定显示图像的URL（统一资源定位符)
- height:定义图像的高度
- width:定义图像的宽度
2、audio:定义音频。支持的音频格式:MP3、WAV、OGG
- src:规定音频的URL
- controls:显示摇放控件
3、video:定义视频。支持的音频格式:MP4、WAV、OGG
- src:规定视频的URL
- controls:显示播放控件
4、资源路径：
- 绝对路径：完整路径
- 相对路径（更常用）：相对位置关系
5、尺寸单位：
- px：像素
- 百分比：占整个body的比例
五、超链接标签
< a> ：定义超链接，用于连接到另一个资源
（1）href：指定访问资源的URL
（2）target:指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开
通常在页面内部跳转使用_self，跳转到外部资源用_blank
<a href="http://www.baidu.com" target="_blank"> 点我有惊喜嗷</a>- 1
六、列表标签
< ol>：有序列表（标注123…）
- 序号可以使用type属性设置
< ul>：无序列表（用圆点标识）
< li>：定义列表项
<ol type = "A"> <li>咖啡</li> <li>牛奶</li> <li>奶茶</li></ol>- 1
- 2
- 3
- 4
- 5
七、表单标签及表单项标签
- 表单：在网页中主要负责数据采集功能，使用< form>标签定义表单
- 表单项(元素)：不同类型的input元素、下拉列表、文本域等
（一）form：定义表单
（1）action：规定当提交表单时向何处发送表单数据，URL；
表单项数据要想被提交，必须指定其name属性。
（2）method :规定用于发送表单数据的方式
- get：（默认值）浏览器会将数据直接附在表单的action URL之后。长度有限制
- post：浏览器会将数据放到http请求消息体中。长度无限制
<form action="#" method="post"> <!--定义文本输入框--> <input type="text" name="username"> <!--定义按钮，将内容提交到服务器--> <input type="submit"></form>- 1
- 2
- 3
- 4
- 5
- 6
（二）表单标签
< input>:表单项，通过type属性控制输入形式
< select> :定义下拉列表，< option>定义列表项
< textarea> ：文本域
< input>标签的type属性：
<body><form action="#" method="post"> <!--拓宽点击范围，想要点击文字就跳到对应的文本框里，使用label，属性for后面跟文本框的id--> <label for="username">用户名：</label> <input type="text" name="username" id="username"> <br> <label for="password">密码：</label> <input type="password" name="password" id="password"> <br> <!--单选框--> <!--想要多个单选按钮互斥，需要把他们的name设为一样的--> <!--要格外注意加value及对应的值，这样提交以后会把这个值提交进去，从而区分是男是女--> 性别： <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label> <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label> <br> <!--复选框--> 爱好: <input type="checkbox" name="hobby" value="1">旅游 <input type="checkbox" name="hobby" value="2">电影 <input type="checkbox" name="hobby" value="3">阅读 <br> <!--上传按钮--> 头像: <input type="file"><br> <!--定义下拉列表--> <!--如果有value值,则提交value值,无value值,则提交标签内的内容--> 城市: <select name="city"> <option>北京</option> <option value="shanghai">上海</option> <option>广州</option> <option>天津</option> </select> <br> <!--定义文本域,下面的五行二十列(也就是一行写20个字,一共五行)--> 个人描述: <textarea cols="20" rows="5" name="desc"></textarea> <!--定义隐藏字段--> <input type="hidden" name="id" value="123"><br> <!--注册按钮--> <input type="submit" value="注册"> <!--重置按钮--> <input type="reset" value="重置"> <!--按钮--> <input type="button" value="一个普通按钮"></form></body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66