html基础-认识html
1.什么是html
html是浏览器可以识别的的标记语言,我们在浏览器浏览的网页就是一个个的html文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>认识html</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
将这串代码用记事本保存起来,更改.txt后缀名为.html,拖到浏览器中就可以看到效果了。
html的组成部分
html是有html标签(元素)组成的,有时候叫html标签,有时候叫html元素,都一个意思。
例如上面的<h1></h1>
标签 代表标题 <p></p>
标签代表段落
html 常用标签
双标记标签:
有开始有结尾 例如<h1>
是开始标签 </h1>
是结尾标签
单标记标签: 只有一个标记。如<img />
图片标签, <input />
输入框标签
1.标题标签 :html标题是通过<h1> -<h6>
标签来定义的
<h1></h1>
显示的标题字体最大。
<h6></6>
显示的标题字体最小。
2.段落标签:p标签
<p>
这是一个段落</p>
3.超链接标签:a标签
<a href = "https://www.baidu.com">
点击网址进入某个页面</a>
4.容器标签 div标签
5.列表标签
有序列表标签
<ol>
<li>这是有序标签</li>
<li>这是有序标签</li>
<li>这是有序标签</li>
</ol>
网页效果是这样子的
有序标签
<ul>
<li>这是无序标签</li>
<li>这是无序标签</li>
<li>这是无序标签</li>
</ul>
浏览器显示的效果是这样子的
6.表格标签
<table>
<tr>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</table>
table 代表这是一个表格容器,tr是表格中的行,td是表格中的单元格,相当于列的意思。
标签相对于标签 有加粗和居中的效果<table>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>13</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>14</td>
<td>女</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>15</td>
<td>男</td>
</tr>
</table>
浏览器显示效果是这样子的
7.表单标签
<form>
注册用户<br/>
<input type="text" placeholder="请输入昵称"/><br/>
<input type="password" placeholder="请输入密码"/><br/>
<input type="radio" name="sex" />男 <input type="radio" name="sex" >女<br/>
兴趣爱好有哪些?<br/>
<input type="checkbox">足球 <input type="checkbox"> 篮球 <input type="checkbox"><br/>
请选择图像上传<br/>
<input type="file"><br/>
您来自那个省份?<br/>
<select>
<option>湖北</option>
<option>湖南</option>
<option>河南</option>
<option>广东</option>
</select>
</form>
<form></form>
标签代表这是一个表单容器 <input />
是输入框标签,它有不同的类型 type="text | password |radio |checkbox |file"
type="text"
代表这是一个文字输入框
type="password"
这是一个密码输入框
type="radio"
这是一个单选框
type="checbox"
这是一个复选框
type="file"
这是一个文件选择器
type="reset"
这是一个重置按钮
type="submit"
这是一个确认提交按钮
type="button"
这是一个普通按钮
8.文本域标签
文本域标签也是表单组件里面的一种
<textarea cols="30" rows="10"></textarea>
9.块级标签
<div>
标签也是块级标签 但是div是一个标签独占一整行,<span>
标签只占一小块
<span>
hello</span>
10.音视频标签
音频
<audio src="" controls></audio>
视频
<video src="" controls width="500px" height="100px"></video>