HTML 负责页面的结构(页面的元素和内容)
HTML由标签组成,标签都是预定义好的。例如<a>展示超链接,使用<img>展示图片,<vedio>展示视频。
HTML代码直接在浏览器中运行,HTML标签由浏览器解析。
编写 HTML 代码
创建一个文件,后缀名改成 html 就可以了。运行 html,有浏览器就行了。创建的时候一定要勾选文件扩展名:
-
创建文件,修改文件后缀为 .html
-
编写HTML结构标签
-
head是文件的头,title定义了页面标题,body是页面展示的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
</body>
</html>
HTML常见标签
注释
通过 <!---->
来完成注释
<body>
hello world!
<!--这里是注释-->
</body>
标题标签
- 标题标签一共有6个 h1 至 h6。
- 数字越小,里面的内容就越粗越大。
- 数字越大,里面的内容就越细越小。
段落标签
p 就是段落标签,可以对内容分段。通过 lorem 就可以自动生成段落。
<body>
<p>第一个段落 </p>
<p>第二个段落 </p>
<p>第三个段落 </p>
</body>
换行标签
br 就是换行标签,如果没有 换行标签 的话,HTML 是不会自动换行的。<br>
是一个单标签,加入到长段落当中就可以了。
<body>
<p>第一个段落 hello every
<br> my name is lihua.
</body>
转义字符
HTML 会把相邻的空格,合并成一个空格。如果需要多个空格,就需要使用转义字符,除了空格之外,像 < > & 等这些特殊符号,也需要使用转义字符。最常见的就是这些:
格式化标签
格式化标签,其实是针对 文本 进行一些样式上的调整。
- 加粗: strong 标签 和 b 标签
- 倾斜: em 标签 和 i 标签
- 删除线: del 标签 和 s 标签
- 下划线: ins 标签 和 u 标签
<body>
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
</body>
图片标签
使用 img 标签来表示图片。img 也是一个单标签,里面可以有好多属性,其中最重要的就是 src 属性。通过 src 来描述图片所在的位置。我们把图片放在项目的目录当中,然后在代码当中使用就好了
<body>
<img src="测试.png" alt="">
</body>
这里的 src,可以是相对路径,也可以是绝对路径,也可以是网络路径。
通过 width 和 height 来设置长宽
width:就是宽。height:就是高。设置尺寸的时候,单位:px,就是像素的意思。宽度和高度可以一起设置,也可以只设置一个,只设置一个的话,就不会导致图片形变。
超链接
通过 a 标签就可以实现超链接,跳转到其他的页面。
<body>
<a href="URL">超链接</a>
</body>
属性:
href:指定资源访问的url
target:指定在何处打开资源链接:_self:默认值,在当前页面打开 _blank:在新建页面打开。
用图片做超链接
代码如下:
<body>
<a href="https:URL"><img src="picture.png" ></a>
</body>
表格标签
表格标签是一组标签:
- table 就是表格
- tr: 表示表格的一行
- td: 表示一列
- th: 表示表头中的一列
<html>
<head>
<title>HTML 邓子</title>
</head>
<body>
<style>
td {
text-align: center;
}
</style>
<table border="2px" width="300" height="150" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>邓子</td>
<td>19</td>
</tr>
<tr>
<td>诩子</td>
<td>18</td>
</tr>
</table>
</body>
</html>
列表标签
- 无序列表:ul
- 有序列表:li
- 自定义列表:dt dd
<body>
<h3>无序列表</h3>
<ul>
<li>啦啦啦</li>
<li>哈哈哈</li>
<li>也一样</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>啦啦啦</li>
<li>哈哈哈</li>
<li>也一样</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>强强强强</dt>
<dd>啦啦啦</dd>
<dd>哈哈哈</dd>
<dd>也一样</dd>
</dl>
</body>
运行结果如下:
表单标签
表单标签是用户和页面之间交互的重要手段,用来采集用户输入数据,能够把用户输入的数据据提交到服务器上。例如:注册登入功能
标签:<form>
如下图这个整体就是一个表单,里面的每一项称为表单项
属性:
- action:规定提交表单时向何处发送表单数据,url
- method:规定用于发送表单数据的方式。GET(在url后面拼接表单数据,url长度有限制),POST(在请求体中传递)
表单项标签
1. input 标签
input 就是输入标签,通过type属性控制输入形式
<label><input type="redio" name="gender" value="1">男 </label>
<!-- 使用lable可以点击汉字也能选中,name用来分组互斥,value是选中后向服务器提交的数据-->
2.select标签
定义下拉标签,<option>定义下拉列表项
<body>
<form>
<select>
<option>-- 请选择年份 --</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</form>
</body>
3. textarea标签
textarea 来实现多行编辑
<body>
<form>
<textarea cols="30" rows="10"></textarea>
</form>
</body>
无语义标签
无语义就是没有明确的角色:div 和 span 这两个无语义标签。这两个无语义标签可以代替上面的绝大部分有语义标签的功能(但是 form 这一系列不能替换)。div 默认是一个块级元素(独占一行),span 默认是一个行内元素。