HTML常用标签
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>我是标题,浏览器小窗体显示</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name='Keywords' content='关键字'>
<meta name='Description' content='简要概述'>
<!-- css样式引入 -->
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<!-- JS引入 -->
<script src='main.js'></script>
</head>
<body>body内的内容</body>
标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落
<p>这是一个段落</p>
图片
- src图片的相对路径(当前目录.上级目录…);
- alt:当文件未加载出来显示alt的文字;
- title:光标在图片上显示的文字
<img src="../image/about.jpg" alt="我是关于" title="关于">
<img src="../image/my.jpg" alt="我的" title="我的">
<img src="../image/shop.jpg" alt="我是商店" title="商店">
<img src="https://imgsa.baidu.com/forum/w%3D580/sign=55b015d7b91bb0518f24b3200678da77/98c1a40f4bfbfbed57a32f8a72f0f736aec31f3f.jpg" alt="我是商店" title="商店">
超链接
- href:路径
- target ——blank新页面打开
<a href="http://www.baidu.com">百度</a>
<a href="test.html" target="_blank">页面</a>
列表
无序列表
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
有序列表
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
元素分类
- 行级元素:多个占一行 eg. span,a,i,strong
- 块级元素:单个占一行 eg. div,p,ul,li,h,textarea
- 行块元素 : 兼具1和2 eg. input,button
加粗,斜体,颜色
<strong>strong加粗</strong>
<span style="color:red">span-style变色</span>
<i>i斜体</i>
表格
- 表格:table
- tr是行,td是列
- cellpadding:单元格边距
- border=边框
- cellspacing:单元格内间距
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>111</td>
<td>223</td>
</tr>
</table>
表单元素
- 标签:lable
- 输入框:input
- input内type值的设置
input内type值的设置 :
checkbox复选框,:
radio单选眶,
text文本,
password密码框
submit提交
- 下拉框 : select表示下拉框,option表示选项
- 文本域:textarea
- 按钮:button
- 换行:br
<form action="">
<label for="username">用户名:</label>
<!-- 文本框 -->
<input type="text" id="username">
</br>
<label for="pwd">密码:</label>
<!-- 密码框 -->
<input type="password" id="pwd">
</br>
<!-- 单选框 ,name -->
性别:<input type="radio" name="sex">男
<input type="radio" name="sex">女
</br>
<!-- 下拉框 -->
学校:
<select>
<option value="">黑大</option>
<option value="">理工</option>
<option value="">林大</option>
</select>
</br>
<!-- 复选框,name -->
爱好:
<input type="checkbox" name="hobby"> 吃饭
<input type="checkbox" name="hobby"> 睡觉
<input type="checkbox" name="hobby"> 听音乐
</br>
文本域:
<textarea></textarea>
</br>
<button>按钮</button>
<input type="submit">
</form>