html
标题标签:h1-h6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
段落标签
<p></p>
换行标签:
<br/>
文本格式化标签
粗体 <strong></strong>、<b></b>
斜体 <em></em>、<i></i>
删除线 <del></del>、<s></s>
下划线 <ins></ins>、<u></u>
div和span标签
<div></div>
<span></span>
图片标签
<img src="" alt="替换文本" title="提示文本" width="200" height="200" border="10"/>
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本。图像不能显示的文字 |
title | 文本 | 提示文本。鼠标放到图像上,显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
路径
目录文件夹(普通文件夹)和根目录(打开目录文件夹的第一层)
相对路径
- 同一级路径 直接填入文件名字; 例如: src=“1.jpg”
- 下一级路径 /;
- 上一级路径 …/; 其中…/表示跳出当前文件夹
绝对路径
指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
超链接标签 anchor
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,必须 |
target | 用于指定链接页面打开的方式,_self为默认值,_blank为新窗口打开 |
链接类型:外部链接、内部链接、空连接#、下载链接
- 锚点链接 #id名
注释标签和特殊字符
-
<!-- 注释字符 -->
-
特殊字符
特殊字符 | 字符代码 |
---|---|
空格符 |   |
小于号 | < |
大于号 | > |
和号 | & |
版权 | © |
注册商标 | ® |
表格标签
<table>
<thead>
<tr>
<th>表头单元格</th>
</tr>
</thead>
<tbody>
<tr>
<td>普通单元格</td>
</tr>
</tbody>
</table>
表格属性:align、border、cellpadding、cellspacing、width、height。
表格结构标签 <thead></thead>、<tbody></tbody>
合并单元格
跨行合并:rowspan="合并单元格的个数"
跨行合并:colspan="合并单元格的个数"
列表标签
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
自定义列表
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
</dl>
表单标签
<form action="" method="" >
<!-- input输入表单元素-->
<!-- type="属性值": text,password,radio,button,checkbox,file,hidden,image,reset,submit,text-->
<label for="text">用户名</label><input type="text" name="username" value="请输入用户名" maxlength="6" id="text"></input>
<input type="password" name="password" value="请输入密码" maxlength="6"></input>
<!--单选按钮-->
<input type="radio" name="sex" value="男" checked="checked"></input>
<input type="radio" name="sex" value="女" ></input>
<!--复选框-->
<input type="checkbox" name="hobby" value="吃饭" id="nan"><label for="nan">男</label></input>
<input type="checkbox" name="hobby" value="睡觉" checked="checked"></input>
<input type="checkbox" name="hobby" value="打豆豆" ></input>
<!--文件域-->
上传文件:<input type="file"></input>
<input type="file"></input>
<input type="button" value="发送短信验证码"></input>
<input type="reset" value="点击提交"></input>
<input type="submit" value="点击提交"></input>
<!-- 下拉表单元素-->
<select>
<option selected="selected">河北</option>
<option>天津</option>
<option>北京</option>
</select>
<!-- textarea文本域表单元素-->
<!-- cols:每行多少字符,rows:几行-->
<textarea cols="50" rows="4"></textarea>
</form>
注:学会查阅文档 推荐网址
百度、W3school(https://www.w3school.com.cn/)、MDN(https://developer.mozilla.org/zh-CN)
HTML5的新特性
- 新增的语义化标签
<header></header>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<footer></footer>
- video视频标签:支持mp4、webM、Ogg格式,尽量使用mp4格式
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题) |
controls | controls | 向用户显示播放控件 |
width | pixels | 设置播放器宽度 |
height | pixels | 设置播放器高度 |
loop | loop | 循环播放 |
preload | auto(预先加载视频) none(不应加载视频) | 规定是否预加载视频,如果有了autoplay,就忽略该属性 |
src | url | 视频url地址 |
poster | imgurl | 封面图片 |
muted | muted | 静音播放 |
- audio音频标签:支持mp3、wav、ogg格式
常见属性:autoplay、controls、loop、src。用法与video标签一致
-
input表单
属性值:email、url、date、time、month、week、number、tel、search、color
-
新增的表单属性
required(必填)
placeholder(提示信息)
autofocus(自动聚焦属性)
autocomplete(需要与name一起使用,值为off或者on)
multiple(可以多选文件提交)