HTML基础学习总结

岛雨QA
260 阅读4分钟

HTML

基本标签

标签用法备注
html<html></html>根节点
head<head></head>用于存放title（必须要有）、meta、base、style、script、link
title<title></title>页面标题
base<base target="_blank" />可以设置整体链接的打开状态
body<body></body>用于存放所有的HTML标签
h<hn></hn>标题标签，h1~h6
p<p></p>段落标签
hr<hr />水平线标签。单标签
br<br />换行标签。单标签
div<div></div>分区。定义文档中的节
span<span>价格</span>跨度、范围。定义文档中的节
b/i/s/u<b><i><s><u>加粗/斜体/删除线/下划线
strong<strong></strong>强调文本，加粗
em<em></em>强调文本，斜体
del<del></del>强调文本，删除
ins<ins></ins>强调文本，下划线
img<img src="图片url" alt="替换文字" />图像标签
a<a href="跳转链接" target="弹出方式">文本或图片</a>链接标签
!<!-- 注释语句 -->注释标签
ul<ul><li></li></ul>无序列表
ol<ol><li></li></ol>有序列表
dl<dl><dt></dt><dd></dd></dl>自定义列表
&nbsp&nbsp;&nbsp;特殊字符，表示空格

以下为html5新增标签：

标签用法备注
header<header></header>定义文档的页眉（头部）
nav<nav></nav>定义导航链接的部分
footer<footer></footer>义文档或节的页脚（底部）
article<article></article>定义文章
section<section></section>定义文档中的节（section、区段）
aside<aside></aside>定义其所处内容之外的内容 侧边

标签属性

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

注意：

  • 必须写在开始标签中，位于标签名后面
  • key="value"的格式表示内容
  • 建议，尽量不使用样式属性

html5常用新属性：

属性用法备注
placeholder<input type="text" placeholder="请输入用户名">占位符。当用户输入的时候，里面的文字消失，删除所有文字，自动返回
autofocus<input type="text" autofocus>规定当页面加载时当前input元素应该自动获得焦点
multiple<input type="file" multiple>多文件上传
autocomplete<input type="text" autocomplete="off">规定表单是否应该启用自动完成功能  有2个值，一个是on 一个是off。on 代表记录已经输入的值  1.autocomplete 首先需要提交按钮 2.这个表单必须给他名字
required<input type="text" required>必填项，内容不能为空
accesskey<input type="text" accesskey="s">规定激活（使元素获得焦点）元素的快捷键，采用 alt + s的形式

链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

  • href：用于指定链接目标的url地址；
  • href="#"，表示该链接暂时为一个空链接
  • 锚点：href="#id名"，使用相应的id名标注跳转目标的位置
  • target：取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开；

表格标签

<table>
    <caption>表格标题</caption>
    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>
  • <table>代表表格
  • <tr>代表一行数据
  • <td>代表一个单元格，里面可以容纳所有元素
  • <th>替换<td>可以设置为表头，一般在第一行或者第一列
  • <caption>标签必须紧随table标签之后，且只能有一个

合并单元格

跨行合并：rowspan     跨列合并：colspan

表单标签

包含：表单控件、提示信息、表单域

input

<input />标签为单标签，其常用属性如下表所示：

属性属性值描述
typetext单行文本输入框
password密码输入框
radio单选按钮
checkbox复选框
button普通按钮
submit提交按钮
reset重置按钮
image图像形式的提交按钮
file文件域
email输入邮箱格式
tel输入手机号码格式
url输入url格式
number输入数字格式
search搜索框（体现语义化）
range自由拖动滑块
time小时分钟
date年月日
datetime时间
month月年
week星期 年
name自定义即可控件的名称
value自定义即可input控件中的默认文本值
size正整数input控件在页面中的显示宽度
checkedchecked定义选择控件默认被选中的项
maxlength正整数控件允许输入的最多字符数

例子

账号：<input type="text" placeholder="请输入你的用户名" id="username"> <br />
密码：<input type="password" id="password" maxlength="6" placeholder="密码长度最大为6"><br />
性别：男<input type="radio" name="sex" id="male" checked="checked" /> 女<input type="radio" name="sex" id="female" /><br />
爱好：读书<input type="checkbox" name="fav" id="read" />看报<input type="checkbox" name="fav" id="news" />睡觉<input type="checkbox" name="fav" id="sleep" /><br />
<input type="button" value="搜索"> <br />
<input type="submit" value="提交"><br />
<input type="reset" value="重置" /><br />
<input type="image" src="../img/表情包.jpg" alt="替换文案"><br />
<input type="file" name="file" id="file"><br />

datalist

datalist。标签定义选项列表。与input元素配合使用该元素（html5新增）

<input type="text" placeholder="输入明星" /> <br>
<input type="text" placeholder="输入明星" list="star"/> <!--  input里面用 list -->
<datalist id="star">   <!-- datalist 里面用 id 来实现和 input 链接 -->  
    <option>刘德华</option>
    <option>郭富城</option>
    <option>张学友</option>
</datalist>
image.png

label

label 标签为 input 元素定义标注（标签）。

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

for属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male" />
		
<label>账号：<input type="text" /></label>
<label for="uname">账号：</label><input type="text" id="uname"/>
image.png

textarea

<textarea cols="20" rows="8"></textarea>

select

<select name="city" id="city">
    <option value="beijing">北京</option>
    <option value="hangzhou" selected>杭州</option>
    <option value="gaungzhou">广州</option>
</select>

form

method值为：get、post

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

fieldset

  • fieldset 元素可将表单内的相关元素分组，打包
  • legend（标题）搭配使用
<fieldset>
    <legend>用户登录</legend>请输入您的用户名和密码<br />
    用户名: <input type="text"><br />
    密　码: <input type="password">
</fieldset>

多媒体标签

  • embed：标签定义嵌入的内容
    • embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
  • audio：播放音频
    • autoplay属性：自动播放
    • controls属性：是否显不默认播放控件
    • loop属性：循环播放。loop = 2就是循环2次，loop或者loop = "-1" 无限循环
  • video：播放视频
    • autoplay 自动播放
    • controls 是否显示默认播放控件
    • loop 循环播放
    • width/height 设置播放窗口宽度和高度

综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTMl综合案例</title>
	</head>
	
	<body>
		<form action="#">
			<fieldset>
				<legend>学生档案</legend>
				<label for="userName">姓名：</label>
				<input type="text" name="userName" id="userName"><br />
				<label for="userPhone">手机号码：</label>
				<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br />
				<label for="userPhone">邮箱：</label>
				<input type="email" name="email" id="email" required><br />
				<label for="collage">所属院校：</label>
				<input type="text" name="collage" id="collage" list="cList" placeholder="请选择院校">
				<datalist id="cList">
					<option value="清华同方"></option>
					<option value="北大青鸟"></option>
					<option value="山东蓝翔"></option>
				</datalist><br />
				<label for="score">入学成绩：</label>
				<input type="number" name="score" id="score" max="100" min="0" value="0"><br />
				
				<form action="#">
					<fieldset>
						<legend>学生对象档案</legend>
						<label>姓名：<input type="text" placeholder="请输入对象的名字"></label><br />
						<label>手机号：<input type="tel"></label><br />
						<label>手机号：<input type="email"></label><br />
						<label>所属院校：<input type="text" placeholder="请选择你对象的院校" list="xueyuan"></label>
						<datalist id="xueyuan">
							<option value="北京电影学院"></option>
							<option value="上海戏剧学院"></option>
							<option value="山东蓝翔表演"></option>
						</datalist><br /><br />
						<label>出生日期：<input type="date"></label><br />
						<label>成绩：<input type="number"></label><br />
						<label>毕业时间：<input type="date"></label><br />
						<input type="submit" value="提交">  <input type="reset" value="重置信息">
					</fieldset>
				</form>
				
				<label for="inTime">入学日期：</label>
				<input type="date" name="inTime" id="inTime"><br />
				<label for="leaveTime">毕业日期：</label>
				<input type="date" name="leaveTime" id="leaveTime"><br />
				<input type="submit" value="提交个人资料">
			</fieldset>
		</form>
		
	</body>
</html>

image.png

avatar
文章
阅读
粉丝