Html
一.文字标签
h1-h6标签 是标题标签,从大到小
<h1>这是一个h1标题</h1>
p标签 是段落标签,
<p>这是一个段落标签</p>
b和strong标签 是加粗的作用
<b>这是一个加粗标签</b>
<strong> 这是一个加粗标签</strong>
区别:b是仅仅的加粗无强调含义,strong也有加粗的作用,但是有强调的含义
hr标签 是水平线
<hr>
hr是单标签,设置一个水平线
i和em标签 倾斜标签
<i>这是一个倾斜标签</i>
<em>这是一个倾斜标签 </em>
区别:相同点:i和em都有着倾斜的意思,在视觉上都会有倾斜的效果,
不同点:em有强调的作用,i只是仅仅的倾斜
sub和sup标签 下角标和上角标标签
H<sub>2</sub>O
10<sup>2</sup>
del和s标签 是删除线标签
<del>这是一个删除线标签</del>
<s>这是一个删除线标签</s>
区别:相同点:在视觉上都有着删除线的效果,没有区别
不同点:del的语义化更强
br标签 是换行的作用
<br> 在任意一个地方添加<br>,可以实现换行的作用
u标签 是下划线
<u> 这是下划线标签</u>
二.有序列表 无序列表 自定义列表
1.无序列表格式:
<ul type="square">
<!-- “circle空心圆/disc实心圆/square方形/none表示无” -->
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
2.有序列表格式:
<ol type=" " start=" ">
<!-- type="A/a/I/1" 表示类型--> <!-- start=" " 表示开始的顺序 填写的是数字-->
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ol>
3.自定义列表格式:
<dl>
<dt>可以是文字也可以是图片</dt>
<dd>是相关文字</dd>
<dd>是相关文字</dd>
</dl>
三.图片路径
<img src="这里放的是图片的路径" alt="这个地方可以放置文字,当图片加载不出来时,可以当做备注" title="当鼠标悬停时,会显示文本提示" width="" height="">
src="这里放的是图片的路径"
alt="这个地方可以放置文字,当图片加载不出来时,可以当做备注"
title="当鼠标悬停时,会显示文本提示"
width=" 设置图片的宽度"
height="设置图片的高度"
四.超链接标签
<a href="要跳转的地方,可以是文件也可以是图片" target="_blank 代表在新的页面打开/_self 表示在当前页面打开">文字,图片均可</a>
href="要跳转的地方,可以是文件也可以是图片"
target="_blank 代表在新的页面打开"
target="_self 表示在当前页面打开" self是默认值"
基本格式:<a>文字</a>
五.容器标签div
<div> </div>
<span> </span>
<div>没有具体含义,用来划分页面的区域
<span>没有具体含义,当与 CSS 一同使用时,元素可用于为部分文本设置样式属性
六.html中的特殊符号
&it 是小于号或者显示标记 <
> 是大于号或者显示标记 >
amp 显示其他特殊字符 &
" 引号
® 已注册
© 版权
&trade 商标
  不断行的空白
七.表单
<form method="get或者post" action="向何处发送表单数据">
get和post的区别:
1.单词意思上,get是获取,post是传送数据
2.get在传送过程中,用户可以在地址栏上看到传送过程,post是看不到的
3.get安全性较低,post的安全性比较高
<input type="sumbit"><!-- 提交按钮 -->
<button></button> <!-- 提交按钮 -->
<input type="button"> <!-- 普通按钮 -->
<input type="reset"> <!-- 重置按钮 -->
<input type="text"> <!-- 文本框 -->
<input type="password"> <!-- 密码框 -->
<input type="text" placeholder="简短的提示框信息" name="必须填写否则,用户在其输入的信息不会发送给服务器" value="可以设置按钮的值">
</form>
设置样式 给input添加outline:none ;可以去除type="text"点击时的黑色边框
1.表单相关的标签
个数 | 标签和属性 | 说明 |
1 | <fieldset> </fieldset> | fieldset表单字段集,相当于一个方框,fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象 |
2 | <legend> </legend> | 字段级标题 |
3 | <label for="box"> </label> | label 提示信息标签 for="绑定控件id名" |
4 | <input type="file"/> | 上传文件框 multiple="multiple" multiple属性可实现多选 |
5 | <input type="hidden"/> | 隐藏字段对于用户来说通常是不可见的,通常会存储一个默认值,通过js来修改 |
6 | <input type="radio" name="sex"/> | type="radio"单选按钮 单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样。 |
7 | <input type="checkbox" name="like" disabled="disabled" checked="checked"/> | type="checkbox" 多选按钮 name可加可不加 checked="checked"(选中) disabled="disabled"禁用 |
8 | <select> <option>北京</option> <option>上海</option></select> | 下拉菜单 |
9 | <textarea cols="40" rows="5">文本域</textarea> | 文本域 cols="字符宽度" rows="行数" resize="none" |
2.type新增加的属性值
3.表单新增加的属性
4.新增加的表单标签
八.音频标签
<audio src="路径" controls autoplay loop>哈哈哈</audio>
controls是显示播放音频的控件
autoplay的作用是浏览器加载完毕后会自动播放音频
loop当音频结束时会自动重新开始播放
<!-- !上方的哈哈哈 位置,当浏览器版本太低时,会执行其中的文字 -->
<video src="路径" controls autoplay loop muted>哈哈哈</video>
controls是显示播放音频的控件
autoplay的作用是浏览器加载完毕后会自动播放音频
loop当音频结束时会自动重新开始播放
muted添加该属性,视频会静音,并且开始自动播放
<!-- !上方的哈哈哈 位置,当浏览器版本太低时,会执行其中的文字 -->
九.表格的相关属性
<table border="1" width="1" height="1">
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>张三</td>
<td>100</td>
<td>优秀</td>
</tr>
</table>
<!-- border是设置边框的宽度 width是设置表格的宽度 height是设置表格的高度 -->
<!-- caption是表格的表题 -->
<!-- th只能适用于表头单元格 标签可以使文字水平居中对齐,并且加粗 -->
表格的基本格式
<table>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>100</td>
</tr>
</tbody>
<tfoot> <!-- 很少见 -->
<tr>
<td>张三</td>
<td>100</td>
</tr>
</tfoot>
</table>
<!-- rowspan跨行合并 上下合并,只保留最上面的,删除其他的
colspan跨列合并 左右合并,只保留最左边的,删除其他的 -->
HTML5新增标签
个数 | 含义 | 语法书写 |
1 | 头部** | <header></header> |
2 | 尾部 | <footer></footer> |
3 | 导航 | <nav></nav> |
4 | 媒体文件引入 | <embed src=""></embed> |
5 | 内容块 | <section></section> |
6 | 辅助信息 | <aside></aside> |
7 | 文章 | <article></article> |
媒体音频标签
一.视频标签(video)
1.video视频文件的书写方式
2.video视频文件的支持格式
二.Audio音频标签
移动端书写:
在移动端书写之前,需要在html的头部添加下面的代码,解决理想视口的问题.
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />