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="这是一个提交按钮" />