HTML基础知识总结
HTML：超文本标记语言（Hyper Text Markup Language）
-
是一种标记语言而不是编程语言
-
使用标签来标记网页
一、HTML基础语法
1、骨架标签
- <meta>:设置编码方式
- <html>：网页格式
- <title>：网页标题
- <head>：网页的元数据
- <body>: 页面正文
2、基本标签
- <h>：标题，从h1至h6，独占一行，依次变小
- <br>：单标签，用于文本中的换行（空格用&表示）
- <p>：段落，标签语义化：便于被搜索
- <!-- -->:注释
- <b/strong>：字体加粗，后者有特别强调的语义
- <i/em>：斜体，后者有一般强调的语义
- <s/del>：删除线,推荐用后者
- <img>：图片，src="图片名"，width="宽度"，height="高度"，title="页面显示的图片名称"，alt="图片未被正常加载时的名称"
- <a>:超链接，内容为链接名href="url（注意包含协议）或资源路径，#空链接：返回页面顶部"，target="_blank"：在新窗口打开
二、HTML常用标签
1、路径
(1) 相对路径：相对于当前html文件的路径
- 同级：位于相同目录下，直接写资源名称
- 上级：目标位于当前目录的上级，../资源名称
- 下级：目标位于当前目录的下级，文件夹名/资源名称
(2) 绝对路径：根目录到目标资源间的路径（不推荐使用）
2、列表标签
(1) 有序列表
<ol>
<li>列表<lt>
...
</ol>
(2) 无序列表
<ul>
<li>列表<lt>
...
<ul>
3、布局标签:无任何语义，方便后期设置内容样式
- <div>:各标签内容独占一行</div>
- <span>：标签内容合并成一行</span>
4、音/视频标签
(1) 音频
<audio src="资源路径" controls="controls"//显示播放器><audio>
(2) 视频
<video src="资源路径" controls="controls"//显示播放器><video>
三、HTML表单标签
1、表单基础
<form action="方法" method="请求方法，如post">
用户名：<input type="text" id="" placeholder="请输入用户名"//输入框内显示提示 autofocus="autofocus"//光标锁定输入框 />
密码：<input type="password" />
</form>
2、单选按钮radio
<input type="radio" />
<input type="radio" name="xb" checked="checked"//默认选中 id="nan"/>
<label for="nan">男</label>//点击文字"男"等同于点击单选按钮
<input type="radio" name="xb"//相同值只有一个能被选中 id="nv"/>
3、多选框(勾/复选框）checkbox
<input type="checkbox" id="cf"/>吃饭
//点击文字等同于点击多选框:
//<input type="checkbox" id="cf"/>
//<label for="cf">吃饭</label>
<input type="checkbox"/>睡觉
<input type="checkbox"/>打豆豆
4、下拉菜单select
<select name=""
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
5、文本域textarea
<textarea name="" cols="30" rows="10"></textarea>
<style type="text/css">
textarea{resize:none;}
</style>//禁止改变输入框尺寸
6、按钮
- 普通按钮：
<input type="button" value="这是一个普通按钮" />
- 重置按钮：
<input type="reset" value="这是一个重置按钮" />
- 提交按钮：
<input type="submit" value="这是一个提交按钮" />