HTML
HTML是一门语言,所有的网页都是用HTML这门语言编写出来的HTML(HyperText Markup Language):超文本标记语言
超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容
标记语言:由标签构成的语言
HTML运行在浏览器上,HTML标签由浏览器来解析
HTML标签都是预定义好的。例如:使用<img>展示图片
W3C标准:网页主要由三部分组成
结构:HTML
表现:CSS
行为:JavaScript
1,HTML入门
1.新建文本文件,后缀名改为.html
2.编写HTML结构标签
3.在<body>中定义文字
<html><head><title>html 快速入门</title></head><body><font color="red">乾坤未定,你我皆是黑马~</font></body>
</html>
HTML结构标签:
标签 | 描述 |
<HTML> | 定义HTML文档 |
<head> | 定义关于文档的信息 |
<title> | 定义文档的标题 |
<body> | 定义文档的主题 |
HTML标签不区分大小写
HTML标签属性值单双引皆可
HTML语法松散
2,基础标签
标签 | 描述 |
<h1> ~ <h6> | 定义标题,h1最大,h6最小 |
<font> | 定义文本的字体、字体尺寸、字体颜色 |
<b> | 定义粗体文本 |
<i> | 定义斜体文本 |
<u> | 定义文本下划线 |
<center> | 定义文本居中 |
<p> | 定义段落 |
<br> | 定义折行 |
<hr> | 定义水平线 |
html表示颜色:1.英文单词: red , pink , blue . . .2. rgb(值1,值2,值3):值的取值范围:0~255 rgb(255,0,0)3.#值1值2值3:值的范围:00~FF
转义字符:
HTML源代码 | 显示结果 | 描述 |
< | < | 小于号或显示标记 |
> | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | " | 引号 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
| 不断行的空白 |
3,图片,音频,视频标签
标签 | 描述 |
<img> | 定义图片 |
<audio> | 定义音频 |
<video> | 定义视频 |
img:定义图片
src:规定显示图像的URL(统一资源定位符)
height:定义图像的高度
width:定义图像的宽度
audio:定义音频。支持的音频格式:MP3、WAV、OGG
src:规定音频的URL
controls:显示播放控件
video:定义视频。支持的音频格式:MP4, WebM、OGG
src:规定视频的URL
controls:显示播放控件
尺寸单位:px和%
资源路径:
1.绝对路径:完整路径
2.相对路径:相对位置关系
4,超链接标签
标签 | 描述 |
<a> | 定义超链接,用于链接到另一个资源 |
href:指定访问资源的URL
target:指定打开资源的方式
_self:默认值,在当前页面打开
_blank:在空白页面打开
<a href="http://www.itcast.cn" target="_blank">点我有惊喜</a>
5,列表标签
标签 | 描述 |
<ol> | 定义有序列表 |
<ul> | 定义无序列表 |
<li> | 定义列表项 |
type:设置项目符号
<ol><li>咖啡</li><li>牛奶</li><li>茶</li></ol><ul><li>咖啡</li><li>牛奶</li><li>茶</li></ul>
6,表格标签
标签 | 描述 |
<table> | 定义表格 |
<tr> | 定义行 |
<td> | 定义单元格 |
<th> | 定义表头单元格 |
table:定义表格
border:规定表格边框的宽度
width :规定表格的宽度
cellspacing:规定单元格之间的空白
tr:定义行
align:定义表格行的内容对齐方式
td:定义单元格
rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数
<table border="1" cellspacing="0" width="500"><tr><th>序号</th><th>品牌</th><th>品牌名称</th><th>企业名称</th></tr><tr align="center"><td>010</td><td>a</td><td>三只松鼠</td><td>三只松鼠</td></tr><tr align="center"><td>009</td><td>b</td><td>优衣库</td><td>优衣库</td></tr><tr align="center"><td>008</td><td>c</td><td>小米</td><td>小米科技有限公司</td></tr></table>
7,布局标签
标签 | 描述 |
<div> | 定义HTML文档中的一个区域部分,经常与cSS一起使用,用来布局网页 |
<span> | 用于组合行内元素 |
8,表单标签
表单:在网页中主要负责数据采集功能,使用<form>标签定义表单
表单项(元素):不同类型的input元素、下拉列表、文本域等
(1)表单
标签 | 描述 |
<form> | 定义表单 |
<input> | 定义表单项,通过type属性控制输入形式 |
<label> | 为表单项定义标注 |
<select> | 定义下拉列表 |
<option> | 定义下拉列表的列表项 |
<textarea> | 定义文本域 |
(1)form:定义表单
1)action:规定当提交表单时向何处发送表单数据,URL
#表单项数据要想被提交,则必须指定其name属性
3)method :规定用于发送表单数据的方式
【1】get:浏览器会将数据直接附在表单的action URI之后。大小有限制
请求参数会拼接在url后面
url长度有限制 4KB
【2】post:浏览器会将数据放到http请求消息体中。大小无限制
请求参数会在http请求协议的请求体中
(2)表单项
<input>:表单项,通过type属性控制输入形式
<select>:定义下拉列表,<option>定义列表项
<textarea>︰文本域
type取值 | 描述 |
text | 默认值,定义单行的输入字段 |
password | 定义密码字段 |
radio | 定义单选按钮 |
checkbox | 定义复选框 |
file | 定义文件上传按钮 |
hidden | 定义隐藏的输入字段 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据 |
button | 定义可点击按钮 |
<form action="#" method="post"><input type="hidden" name="id" value="123"><label for="username">用户名:</label><input type="text" name="username" id="username"><br><label for="password">密码:</label>密码:<input type="text" name="password" id="password"><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="trip"> <label for="trip">旅游</label><input type="checkbox" name="hobby" value="2" id="movie"> <label for="movie">电影</label><input type="checkbox" name="hobby" value="3" id="game"> <label for="game">游戏</label><br>头像:<input type="file"><br>城市:<select name="city"><option>北京</option><option>上海</option><option>深圳</option></select><br>个人描述:<textarea cols="20" rows="5"></textarea><br><br><input type="submit" value="免费注册"><input type="reset" value="重置"><input type="button" value="一个按钮"></form>