什么是HTML?
-
是一门语言,可以用来写网页
-
是一个超文本标记语言。超文本是说不止是文字信息,还可以有图片视频,标记语言是说由标签构成的语言,就像xml。
-
html是运行在浏览器上的,会被浏览器解析
-
标签都是预定义号的,例如:会展示图片,我们学习html,就是学习语法和标
-
w3c标准:网页由三部分组成——结构:html,表现:css,行为:JavaScript
HTML快速入门
需求:写一个html文件,用浏览器打开后展示一句话。
流程:
- 新建文本文件,后缀改成html
- 编写html结构标签
- 在 < bidy> 中定义文字
<html>
<head>
<title>html 快速入门</title>
</head>
<body>
乾坤未定,你我皆是黑马
</body>
</html>
修改文字颜色
<body>
<font color="red">乾坤未定,你我皆是黑马</font>
</body>
这里注意,html不区分大小写
语法也比较松散,写错了也会识别出来,比如< /font>丢了,或者red没加引号,都能显示。
基础标签
-
< h1> - < h6>代表标题大小,h1最大
-
< font>字体、尺寸、颜色
-
< b>粗替,< i>斜体,< u>下划线
-
< center>文本居中
-
< p>定义段落
-
< br>定义换行(加一个在末尾即可)
-
< hr> 定义水平线,< hr color = “red”>控制水平线样式
-
转义字符:
图片、音频、视频标签
- img标签定义图片
- src定义图像的url(统一资源定位符)
- height,定义图像的高度,可以写百分比,也可以写像素值。
- width,定义图像的宽度
- audio标签定义音频,支持MP3,WAV,OGG。
- src定义音频的url(统一资源定位符)
- controls显示播放控件(就是播放按钮)
- video标签定义视频。支持的音频格式MP4、WebM、OGG
- src定义视频的url(统一资源定位符)
- controls:显示模仿控件(这个也有款和高)
scr可以写绝对路径,也可以相对路径(./xxx,,/就是当前目录)( . ./是上一级的意思)。
超链接标签与列表标签
超链接
< a>
有两个属性:
- href:指定资源的URL
- target:指定打开资源的方式
- _self:默认值,在当前页面打开
- _blank:在空白页打开
<h2>
<a href="https://www.baidu.com/" target="_self">我是标题</a>
</h2>
列表标签
有序列表:ol,
无序列表:ul
定义中间的列表项:li
可以加type属性,设置符号,但是我们一般不要前面的符号。
<ol>
<li>咖啡</li>
<li>奶茶</li>
</ol>
表格标签
- table定义表格
- tr定义行
- td定义单元格
- th定义表头单元格
也就是,先一个table,然后第一个tr是表头,中间包裹的是th。后边的都是记录,所以包裹的是td
<table>
<tr>
<th>hh</th>
<th>hs</th>
</tr>
<tr>
<td>ss</td>
<td>sd</td>
</tr>
</table>
下面进行几个优化,
首先加边框,合并边框,在table里加。
然后居中显示,是tr的属性
然后合并单元格,有竖着合并和横着合并,这里注意,使用方法是,第一条记录里设置跨的单元格个数,然后第二条记录就相当于少了一个单元格,也就是说竖着合并的时候,那个共有的单元格时算上边那条记录里的。
代码如下
<table border="1" cellspacing="0">
<tr align="center">
<th colspan="2">hh</th>
</tr>
<tr align="center">
<td rowspan="2">ss</td>
<td>sd</td>
</tr>
<tr align="center">
<td>ss</td>
</tr>
</table>
布局标签
表单标签
用于数据的采集功能,也就是那些要填的框框
- form:定义表单
- action:规定提交表单向何处发送表单数据(指定URL)
- method:规定用于发送表单数据的方式
- get:浏览器会讲数据直接附在表单的action URL之后,大小有限制,4kb
- post:浏览器会将数据放到http请求消息体中。大小无限制。
- 表单项标签
表单项标签还有个属性name。他会把获取到的信息和name的值组成键值对传递。
细节:
标签里有属性:name,id。
可以用lable来扩大框的范围,点名字也能选中框。
对于单选框,很多需要互斥,这时候,把两个input的name设置成一样的就可以互斥了,并且,要在后边加个value = “1”和2,这样就提交的是1和2.不然会提交相同的“on”。
性别: <input type="radio" name = "sex" value="1">男
<input type="radio" name = "sex" value="2">女
文字直接写就行,因为在body包裹里
提交等按钮,可以value重命名
<input type="submit" value="免费注册"><br>
下拉列表:
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
文本域texrarea