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>