目录
一：HTML介绍&快速入门
什么是HTML?
-
HTML是一门语言，所有的网页都是用这门语言编写出来的
- HTML(Hyper Text Markup Language):超文本标记语言
-
超文本：超越了文本的限制，比普通文本更强大。处理文字信息，还可以定义图片、音频、视频等内容
-
标记语言：由标签构成的语言
-
-
HTML运行在浏览器上，HTML标签由浏览器进行解析
-
HTML标签都是预定义好的。例如：使用
<img>展示图片 - W3C标准：网页主要由三部分组成
-
结构：HTML
-
表现：CSS
-
行为：JavaScript
-
快速入门
-
新建文本文件，后缀名改为.html
-
编写html结构标签
-
在
<body>主体中定义文字
代码展示：
<html><head><title>html 快速入门</title><body>乾坤未定，你我皆是黑马~</body></head></html>
小结一下
-
HTML文件以.htm或.html为扩展名
-
HTML结构标签
| 标签 | 描述 |
|---|---|
<html> | 定义HTML文档 |
<head> | 定义关于文档的信息 |
<title> | 定义文档的标题 |
<body> | 定义文档的主体 |
-
HTML标签不区分大小写
-
HTML标签属性值 单双引皆可
-
HTML 语法松散
二：HTML基础标签
| 标签 | 描述 |
|---|---|
<h1>~<h6> | 定义标题，h1最大，h6最小 |
font | 定义文本的字体，字体尺寸，字体颜色 |
<b> | 定义粗体文本 |
<i> | 定义斜体文本 |
<u> | 定义文本下划线 |
<center> | 定义文本居中 |
<p> | 定义段落 |
<br> | 定义换行 |
<hr> | 定义水平线 |
代码展示：
<!--html5标识-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--页面的字符集-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>
<hr> <!--水平分割线-->
<!--
html表示颜色：
1.英文单词：red、pink、blue...
2.rgb(值1,值2,值3) 值的取值范围：0~255 rgb(255,0,0)代表全红
3.#值1值2值3：值的范围：00~FF
-->
<font face="楷体" size="5" color="#ff0000">传智教育</font>
<hr>
在新时代，大学生要树立正确的人生观，首先必须明确自己的目标和追求。学习不再是应付考试，而是为了将来的工作和生活积累资本。此外，大学生还需要学会独立思考和批判性思维，不断提升自己的综合素质和能力。<br>
在新时代，大学生要树立正确的人生观，首先必须明确自己的目标和追求。学习不再是应付考试，而是为了将来的工作和生活积累资本。此外，大学生还需要学会独立思考和批判性思维，不断提升自己的综合素质和能力。
<hr>
<p>
在新时代，大学生要树立正确的人生观，首先必须明确自己的目标和追求。学习不再是应付考试，而是为了将来的工作和生活积累资本。此外，大学生还需要学会独立思考和批判性思维，不断提升自己的综合素质和能力。
</p>
<p>
在新时代，大学生要树立正确的人生观，首先必须明确自己的目标和追求。学习不再是应付考试，而是为了将来的工作和生活积累资本。此外，大学生还需要学会独立思考和批判性思维，不断提升自己的综合素质和能力。
</p>
<hr>
小桥流水人家<br>
<b>小桥流水人家</b> <br>
<i>小桥流水人家</i> <br>
<u>小桥流水人家</u> <br>
<hr>
<center>小桥流水人家</center>
</body>
</html>三：图片音频视频标签
| 标签 | 描述 |
|---|---|
<img> | 定义图片 |
<audio> | 定义音频 |
<video> | 定义视频 |
- img:定义图片
- src:规定显示图像的URL(统一资源定位符)
- height:定义图像的高度
- width:定义图像的宽度
- audio:定义音频。支持音频的格式：MP3、WAV、OGG
- src:规定音频的URL
- controls:显示播放控件
- video:定义视频。支持音频的格式：MP4、WebM、OGG
- src:规定视频的URL
- controls:显示播放控件
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 资源路径： 尺寸单位： 1.px:像素 2.百分比 --> <img src="a.jpg" width="300" height="500"> <audio src="b.mp3" controls></audio> <video src="c.mp4" controls width="500" height="300"></video> </body> </html>四：超链接标签&列表标签
超链接标签
标签 描述 <a>定义超链接，用于链接到另一个资源 - href:指定访问资源的URL
- target:指定打开资源的方式
- _self:默认值，在当前页面打开
- _blank:在空白页面打开
- 代码展示如下：
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="https://www.itcast.cn" target="_blank">黑马传智教育</a> </body> </html>
-
列表标签
- 有序列表（order list）(ol)
- 无序列表（unorder list）(ul)
-
标签 描述 <ol>定义有序标签 <ul>定义无序标签 <li>定义列表项 - type:设置项目符号，但一般不使用它
- 代码展示如下：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ol> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </body> </html>五：表格标签&布局标签
表格标签
标签 描述 <table>定义表格 <tr>定义行 <td>定义单元格 <th>定义表头单元格 - table:定义表格
- border: 规定表格边框的宽度
- width:规定表格的宽度
- cellspacing:规定单元格之间的空白
- tr:定义行
- align:定义表格行的内容对齐方式
- td:定义单元格
- rowspan规定单元格可横跨的行数
- colspan:规定单元格可横跨的列数
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" cellspacing="0" width="500"> <tr align="center"> <th>序号</th> <th>品牌logo</th> <th>品牌名称</th> <th>企业名称</th> </tr> <tr align="center"> <td>010</td> <td><img src="../img/三只松鼠.png" width="60" height="50"></td> <td>三只松鼠</td> <td>三只松鼠</td> </tr> <tr align="center"> <td>009</td> <td><img src="../img/优衣库.png" width="60" height="50"></td> <td>优衣库</td> <td>优衣库</td> </tr> <tr align="center"> <td>008</td> <td><img src="../img/小米.png" width="60" height="50"></td> <td>小米</td> <td>小米科技有限公司</td> </tr> </table> <br> <hr> <br> <table border="1" cellspacing="0" width="500"> <tr align="center"> <th colspan="2">品牌logo</th> <th>品牌名称</th> <th>企业名称</th> </tr> <tr align="center"> <td>010</td> <td><img src="../img/三只松鼠.png" width="60" height="50"></td> <td>三只松鼠</td> <td>三只松鼠</td> </tr> <tr align="center"> <td rowspan="2">009</td> <td><img src="../img/优衣库.png" width="60" height="50"></td> <td>优衣库</td> <td>优衣库</td> </tr> <tr align="center"> <td>008</td> <td><img src="../img/小米.png" width="60" height="50"></td> <td>小米</td> </tr> </table> </body> </html>
-
布局标签
标签 描述 <div>定义HTML文档中一个区域部分，经常与CSS一起使用，用来布局网页 <span>用于组合行内元素 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>我是div</div> <!--块级标签，占满一行--> <div>我是div</div> <span>我是span</span> <!--行内标签，不会占满一行--> <span>我是span</span> </body> </html>六：表单标签&表单项标签
表单标签
- 表单：在网页中主要负责数据采集功能，使用
<form>标签定义表单 - 表单项（元素）：不同类型的input元素、下拉列表、文本域等
-
标签 描述 <form>定义表单 <input>定义表单项，通过type属性控制输入属性 <label>为表单项定义标注 <select>定义下拉列表 <option>定义下拉列表的列表项 <textarea>定义文本域 - form:定义表单
- action:规定当提交表单时向何处发送表单数据，URL
- method:规定用于发送表单数据的方式
- get:浏览器会将数据直接附在表单的actionURL之后，大小会有限制
- post:浏览器会将数据放到http请求消息体中，大小无限制
- 代码展示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- from: action:指定表单数据提供的URL *表单项数据想要被提交，则必须指定其name属性 method:指定表单提交的方式 1.get:默认值 *请求参数会拼接在URL后面 *URL的长度限制4kb 2.post: *请求参数会在http请求协议的请求体中 *请求参数无限制 --> <form action="#" method="post"> <input type="text" name="username"> <input type="submit"> </form> </body> </html>
-
表单项标签
<input>:表单项，通过type属性控制输入形式-
type取值 描述 text 默认值，定义单行的输入字段 password 定义密码字段 radio 定义单选按钮 checkbox 定义复选框 file 定义文件上传按钮 hidden 定义隐藏的输入字段 submit 定义提交按钮，提交按钮会把表单数据发送到服务器 reset 定义重置按钮，重置按钮会清除表单中所有数据 button 定义可点击按钮 <select>:定义下拉列表,<option>定义列表项<textarea>|定义文本域
- 代码展示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="#" method="post"> <label for="username">用户名：</label> <input type="text" name="username" id="username"><br> <label for="password">密码：</label> <input type="text" name="password" id="password"><br> <br> 性别： <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" id="play"><label for="play">旅游</label> <input type="checkbox" name="hobby" value="2" id="film"><label for="film">电影</label> <input type="checkbox" name="hobby" value="3" id="game"><label for="game">游戏</label> <br> 头像： <input type="file"> <br> 个人描述： <textarea cols="20" rows="5"></textarea> 城市： <select name="city"> <option>北京</option> <option value="shanghai">上海</option> <option>广州</option> <br> </select> <input type="submit" value="免费注册"> <input type="reset" value="重置"> <input type="button" value="一个按钮"> </form> </body> </html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
