1.实体
空格
<<
>>
&&
""
××
÷÷
2.标题和段落
<!-- h1——h6一共六级标题 -->
<h1>一</h1>
<h2>二</h2>
<h3>三</h3>
<h4>四</h4>
<h5>五</h5>
<h6>六</h6>
<hr>----是水平线分隔上下内容
<!-- p 段落 自动换行 -->
<p>离离原上草</p>
<p>一岁一枯荣</p>
<p>遥看瀑布挂前川</p>
<p>日照香炉生紫烟</p>
3.图片标签
<img src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" alt="美女"
width="300">
<img src="./images/钢铁侠.jpg" alt="gtx" width="300">
<img src="D:\A实训资料\01-HTML&CSS\code\images\雷神.jpg" alt="ls" width="300">
4.超链接
<!-- 超链接 -->
<!-- <a href="网站链接" title="鼠标悬停显示信息" target="_blank和_self b是打开新标签页 s是本标签页打开新页面"></a> -->
<!-- <a href="网站链接" title="鼠标悬停显示信息" target=""><img src="" alt=""></a> -->
<a href="https://www.runoob.com" title="菜鸟教程网址" target="_blank">点击跳转到菜鸟教程</a>
<a href="https://www.bilibili.com/" title="bilibili官网" target="_blank">
<img src="./images/bilibili.png" alt="bilibili" width="300">
</a>
<!-- 锚点 -->
<!--必须用#开头 以id赋值 点击回到值所在位置 如果只有"#"则回退到最顶端-->
<a href="#35">点击跳转遥看瀑布挂前川</a>
<a href="#">点击回到最上方</a>
<p id="35">遥看瀑布挂前川</p>
5.摁钮标签
<!-- 摁钮标签 button -->
<!-- <button type="button" 固定类型 onclick="alert('点击后会显示的内容')"> 用来点击的文本或者img图片</button> -->
<button type="button" onclick="alert('杜阔好帅！')">点击夸杜阔一句</button>
<button type="button" onclick="alert('蔡博就爱玩游戏')">
<img src="./images/钢铁侠.jpg" alt="gtx">
</button>
6.格式化标签
<!-- 格式化标签 -->
<!-- 1. `<strong>`加重语气的的文本
2. `<b>`加粗,bold的意思
3. `<em>`斜体效果，强调作用
4. `<i>`斜体效果itatic
5. `<pre>`预格式化文本
6. `<small>`更小的文本
7. `<code>`用于存放计算机代码
8. `<bdo>`文字显示的方向
9. `<blockquote>` 引用标签
10. `<q>` 双引号标签
11. `<del>` 删除文本
12. `<ins>`插入文本
13. `<sub>`下标文本
14. `<sup>`上标文本 -->
<body>
<hr>
<strong> strong这个标签有加粗效果,着重于加重语气的</strong> <br>
<b> b这个标签用于加粗,bold的意思</b> <br>
<hr>
<em> em 具有斜体效果，强调作用</em> <br>
<i> i 具有斜体效果</i> <br>
<hr>
<pre>
预格式化文本
即内容保留空格和换行符
</pre>
<hr>
<small>更小的文本</small> <br>
<code>用于存放计算机代码</code> <br>
<hr>
<bdo dir="rtl">文字显示的方向</bdo> <br>
<hr>
<blockquote>
<p>Life is what happens when you're busy making other plans.</p>
<footer>— John Lennon</footer>
</blockquote>
<p>
In his famous quote, Einstein said: <q>E=mc²</q>
</p>
<hr>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<hr>
<p>这个文本包含 <sub>下标</sub>文本。比如2<sub>3</sub></p>
<p>这个文本包含 <sup>上标</sup> 文本。比如2<sup>3</sup></p>
</body>
7.列表
（1）无序列表
<!-- 无序列表使用`<ul>`标签，列表项使用`<li>`标签-->
<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ul>
(2)有序列表
<!-- 有序列表始于 `<ol>` 标签。每个列表项始于 `<li> `标签 -->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
（3）自定义列表
<!-- 自定义列表以` <dl> `标签开始。每个自定义列表项以 `<dt>` 开始。每个自定义列表项的定义以 `<dd>` 开始。 -->
<dl>
<dt>cc</dt>
<dd>长春</dd>
<dt>sy</dt>
<dd>沈阳</dd>
</dl>
<!-- dd是对dt的解释 -->
（4）列表的嵌套
<!-- 学校排名 -->
<ul>
<li>1班
<ol>
<li>小明</li>
<li>张三</li>
<li>李四</li>
</ol>
</li>
<li>2班
<ol>
<li>张飞</li>
<li>关羽</li>
<li>赵云</li>
</ol>
</li>
<li>3班
<ol>
<li>dk</li>
<li>cbh</li>
<li>my</li>
</ol>
</li>
</ul>
8.表格
<!-- <table> 元素表示整个表格
在整体上可以分成四个部分：
<caption>为整个表格定义标题
<thead>表格的头部部分，内容有加粗效果，与普通单元格区分
<th>定义行数 <th>定义列的内容
<tbody>表格的主体部分
用<tr>定义主体部分的行数
在<tr>中用<td>定义列的单元格数据内容
<tfoot>可用于在表格的底部定义摘要、统计信息等内容
<table>中
border：表外边框大小
cellspacing：单元格之间的距离
cellpadding：内容去到单元格边框的内容
align：表格的整体位置——center left right
width：表格整体的宽度——可以是具体像素也可以是屏幕百分比
-->
<table border="1" cellpadding="3px" cellspacing="0px" width="50%" align="center">
<caption>2136班</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>dk</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>cbh</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>my</td>
<td>男</td>
</tr>
</tbody>
</table>
9.跨行跨列
<!-- colspan表示跨列
rowspaw表示跨行 -->
<table border="1px" cellspacing="0px" width="50%" v align="center">
<h1>课程表的练习</h1>
<tr>
<td colspan="2">时间/日期</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<td rowspan="2">上午</td>
<td>9:30~10:15</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td>10:25~11:10</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td colspan="7"> </td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>13:30~14:15</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<!-- <td></td> -->
<td>14:25~15:15</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
</table>
10.表单
<!-- form是整个表单父元素，action是form标签的属性，用于书写提交路径 -->
<!-- method属性： 用于书写提交方式，常用的值有get/post -->
<!-- 常用子元素：
label：用于设置文字标签 扩大点击域， for属性用于关联某一个input中id值，for值=id值
input： 作为输入框元素 type属性，可以根据type属性不同值来定义不同的输入类型，比如
1.text：文本框，该值为默认值，可以不写
2.password：密码框，特点是使用*或者.来替换真实的密码
3.radio： 单选框,name的值需要相同才能算作一组具有单选效果 checked默认选中不需要给值
4.checkbox:复选框，name值必须相同才能算作一组 chaecked默认选中
5.submit：提交类型，提交整个表单里输入的所有数据，提交到服务器
6.file：文件上传
7.hidden：隐藏域。该类型可以用于隐藏一些不需要展示或者修改的信息
select：表下拉菜单元素
name属性：用于定义提交到服务器的name的具体值
option子元素：用于定义下拉菜单的选项
option元素里的属性：
1.value属性：用于定义提交到服务器的选项的具体值。
2.selected属性：默认选中
textarea：文本域，注意与input的type=“text”的区别
可以设置行列数 rows cols
id属性：
1.为了关联label标签
2.id具有唯一标识，不能重复
name属性：用于定义向服务器提交的数据KeyValue对中的Key名字
value属性：接收用户输入的内容 -->
<form action="abc.dp" method="">
<fieldset><!-- fieldset子元素 表单的整个边框 -->
<legend>表单演示</legend><!--边框上如果想要使用表单标题，可以使用legend元素-->
<label for="username">姓名：</label>
<input type="text" id="username" name="myname" value="name">
<br>
<!-- 密码 ** -->
<label for="mypassword">密码：</label>
<input type="password" id="mypassword" name="mmypassword">
<hr>
<!-- 单选框 -->
<label for="">性别</label>
<input type="radio" name="gender" id="male" value="male" checked>
<label for="male">男</label> <!-- value提交到后台的值-->
<input type="radio" name="gender" id="female" value="female">
<label for="female">女</label>
<hr>
<!-- 复选框 多选框 -->
<label for="">爱好</label>
<input type="checkbox" id="book" name="hobby" value="book"><label for="book">读书</label>
<input type="checkbox" id="word" name="hobby" value="word"><label for="word">写字</label>
<input type="checkbox" id="sport" name="hobby" value="sport"><label for="sport">运动</label>
<input type="checkbox" id="movie" name="hobby" value="movie" checked><label for="movie">电影</label>
<hr>
<!-- 下拉选项 -->
<label for="">地址</label>
<select name="address" id="">
<option value="cc">长春</option>
<option value="sy">松原</option>
<option value="sp" selected>四平</option>
<option value="yj">延吉</option>
</select>
<hr>
<!-- 文件上传选项 -->
<label for="">文件上传</label>
<input type="file" name="myfile">
<hr>
<label for="id1">自我介绍</label>
<!--rows cols 规定行列数-->
<textarea name="myself" id="id1" rows="5" cols="10">
</textarea>
<hr>
<label for="">隐藏信息</label>
<input type="hidden" value="1001">
<hr>
<label for="color">颜色</label>
<input type="color">
<hr>
<label for="range">范围</label>
0<input type="range" id="range" name="range" value="50">100
<hr><br>
<input type="submit" value="提交">
</fieldset>
</form>
11.浏览器的自动纠正功能
<!-- 浏览器自动纠正功能：
1.当元素写在了根元素html的外面，回自动纠正到body里
2.p元素里如果放入了其他的块元素，则会将p元素分解成两个p元素，其他块元素相当于挪出来了
3.当根元素html里出现了除了head和body两个以外的子元素，则会自动纠正到body里
-->
12.音频标签
<!-- 音频标签：
audio：用于加载音频文件，支持的格式MP3，wav，ogg
属性：
src用于书写音频文件的路径
controls：提供用户可以操作的控件，比如播放暂停
autoply:自动播放
loop：循环播放
<audio src="./resource/audio.mp3" loop controls autoplay="autoplay" ></audio>
考虑浏览器兼容性 有些音频格式不支持
可以使用source子元素自上而下的寻找可以播放的音频文件
找到一个播放的就不会向下寻找
-->
<audio controls>
<source src="./resource/audio.mp3">
<source src="./resource/audio.ogg">
</audio>
12.视频文件
<!--
视频标签video：html5提供的新元素
属性：
src：用于书写视频的路径
controls：提供用户控件
loop: 循环播放
width：宽
height：高
只设置宽或高 会等比例缩放
video src="./resource/花.mp4"loop autoplay controls width="500px"></video>
考虑浏览器兼容问题 有些格式不被浏览器支持，可以使用source子元素，让浏览器自上而下寻找可用视频文件 -->
<video controls>
<source src="./resource/flower.webm">
<source src="./resource/花.mp4">
</video>
13.ifram
<!-- iframe标签：用于将另一网页嵌入到当前网页
属性：
1.frameborder 表示是否显示边框 0表示不显示 1表示显示
2.可以使用width和height属性来调整窗口的宽和高
-->
<h1>当前网页</h1>
<p>gogogo</p>
<iframe src="http://www.runoob.com" ;frameborder="0" width="500" height="500"></iframe>
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
