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