<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1.标题 -->
<h1>苍老师</h1>
<h2>小泽老师</h2>
<h3>吉泽老师</h3>
<!-- 2.段落 -->
<p>小刚暗恋小红</p>
<!-- 2)将超链接链到锚点上 -->
<p><a href="#cang">苍老师</a>吃醋了</p>
<!-- 3.列表 -->
<!-- 3.1有序列表 -->
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ol>
<!-- 3.2无序列表 -->
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<!-- 3.3列表嵌套 -->
<ol>
<li>河北省
<ul>
<li>石家庄</li>
<li>保定</li>
</ul>
</li>
<li>山东省
<ul>
<li>青岛</li>
<li>济南</li>
</ul>
</li>
</ol>
<p>
北京市<b>海淀区</b>北<u>三环</u>西路甲18号<span style="color:red">中鼎大厦</span>B座8层
</p>
<!-- 4.分区 在demo4.html-->
<!-- 5.空格折叠 -->
<p>
那是一个 秋天，<br>
</p>
<!-- 6.图片 -->
<!-- 6.1绝对路径 从盘符开始写出图片完整的路径，如:D:/day01/images/01.jpg
或/home/soft01/day01/images/01.jpg
在实际工作中，一般不使用这种方式。
因为在软件上线给客户安装时，客户可能改变代码存放的盘符，也可能根本就没有我们所写的盘符所以会导致找不到图片。-->
<img src="E:\Workspace\webbasic\src\main\webapp\day01\01.jpg" width="1000">
<!-- 6.2相对路径 根据HTML和图片的相对关系来写路径。
1)图片和网页平级
01.jpg
2)图片在网页下级
x/02.jpg
3)图片在网页上级
../03.jpg -->
<p>
<img src="01.jpg"/>
<img src="x/02.jpg"/>
<img src="../03.jpg"/>
<!-- 一般这样用 -->
<img src="../images/04.jpg"/>
</p>
<!-- 7.超链接 -->
<!-- 7.1链接到其他网页上 -->
<p>
<a href="http://www.baidu.com" target="_blank">百度</a>
</p>
<!-- 7.2链接到锚点(本网页的某个位置) -->
<!-- 1)将此位置做成锚点 -->
<p>
<a name="cang">苍老师</a>是个好老师
</p>
<p>
<!-- 网页的顶部默认是锚点，没有名字 -->
<a href="#">回到顶部</a>
</p>
<!-- 8.表格 -->
<!-- 8.1表格基本的语法 -->
<table border="1" cellspacing="0" width="30%">
<tr>
<td>苍老师</td>
<td>小泽老师</td>
</tr>
<tr>
<td>吉泽老师/td>
<td>松岛老师</td>
</tr>
</table>
<!-- 8.2跨行和跨列 -->
<table border="1" cellspacing="0" width="30%">
<tr>
<td colspan="2">苍老师</td>
<!-- <td>小泽老师</td> -->
</tr>
<tr>
<td>吉泽老师</td>
<td>松岛老师</td>
</tr>
</table>
<table border="1" cellspacing="0" width="30%">
<tr>
<td rowspan="2">苍老师</td>
<td>小泽老师</td>
</tr>
<tr>
<!-- <td>吉泽老师</td>-->
<td>松岛老师</td>
</tr>
</table>
<!-- 8.3行分组 -->
<br>
<table border="1" cellspacing="0" width="40%">
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>金额</td>
</tr>
</thead>
<tbody style="color:red;">
<tr>
<td>001</td>
<td>鼠标</td>
<td>50</td>
</tr>
<tr>
<td>002</td>
<td>键盘</td>
<td>1500</td>
</tr>
<tr>
<td colspan="2">合计</td>
<td>1550</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 4.分区 -->
<div>
<p>此处应该放一张logo图片</p>
</div>
<div style="color:red;">
<h1>宫保鸡丁的开发步骤</h1>
<p>首先要放油</p>
<p>然后放葱花炒炒</p>
<p>然后放鸡丁在炒炒</p>
<p>最后放盐</p>
</div>
<div>
<p>版权所有，违者必究。</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1.表单元素
用来划分一个范围在此范围内的控件中的数据才能够提交给服务器。
action 用来声明表单数据提交的目标。
method/enctype:将来再讲-->
<form action="http://www.tmooc.cn">
<!-- 2.表单控件:用来给用户输入数据的。 -->
<!-- 2.1 input元素(9) -->
<!-- 1) 文本框
value:设置默认值
maxlength:限制输入长度
readonly:设置只读-->
<p>
账号:<input type="text" value="admin" maxlength="10" />
</p>
<!-- 2) 密码框-->
<p>
密码:<input type="password"/>
</p>
<!-- 3)单选框
name:组名，同一组radio彼此互斥。
checked:设置默认选中。
value:将来再讲。-->
<p>
性别:<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女
</p>
<!-- 4)多选框
checked:设置默认选中。
value:将来再讲。-->
<p>
兴趣:
<input type="checkbox" checked>音乐
<input type="checkbox">运动
<input type="checkbox">摄影
</p>
<!-- 5)文件框 -->
<p>
头像:<input type="file"/>
</p>
<!-- 隐藏框
可以用来向服务器传递没必要被用户看到的数据。
通过value给它设置一个默认值。 -->
<p>
<input type="hidden" value="123"/>
</p>
<!-- 7)按钮
submit:用来提交表单
reset:用来充值表单内的数据
button:没用功能，需要js为它定制功能
通过value属性为按钮命名。 -->
<p>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="按钮测试"/>
</p>
<!-- 2.2 其他元素(3) -->
<!-- 1)label
用来管理表单中的文本，可以将文本与某个控件绑定在一起，使得点击此文本就相当于点击
这个控件，从而增加了控件的可点击面积，提高了易用性。
绑定的步骤:
a:在控件上加id
b:在文本外写label,并加for="id"
注:id是一个元素的唯一标识，相当于这个元素的身份证号，任何元素都可以有id属性。 -->
<p>
<input type="checkbox" id="c1"/>
<label for="c1">我已阅读并自愿遵守此协议!</label>
</p>
<!-- 2)下拉选
当选项少时候用单选，选项多时候用下拉选。
selected:设置默认选中。
value:将来再讲。 -->
<p>
家乡:
<select>
<option>请选择</option>
<option selected>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>杭州</option>
<option>成都</option>
<option>昆明</option>
</select>
</p>
<!-- 3)文本域
是一个可以输入多行文字的大框。
rows:设置高度
cols:设置宽度
readonly:设置只读
双标签中间的内容就是它的默认值。 -->
<p>
简介:
<textarea rows="5" cols="20">我的老家就住在这个屯</textarea>
</p>
</form>
</body>
</html>
分享到：
相关推荐
自己总结的html的笔记，绘制了详细的思维导图，每个思维导图中均有详细的博文解释，方便大家学习和理解，免费分享给大家。适合网页前端的爱好者和学习者
"HTML基础知识总结" HTML是超文本标记语言（Hyper Text Markup Language），是一种标记语言，而不是编程语言。HTML使用标记标签来描述网页，标签的简称为HTML标签。HTML是一种解释型语言，由浏览器解释执行。 HTML...
这份"html总结思维导图"资源包含了多个版本，旨在帮助学习者全面理解和掌握HTML的关键概念。以下是根据提供的信息，对HTML知识点的详细解读： 1. **HTML基本结构**：每个HTML文档都由<!DOCTYPE>声明开始，表明文档...
HTML总结思维导图,HTML总结思维导图
HTML总结.xmind
HTML总结思维图，总结这四天我们学过的知识
html总结 网页基础知识 HTML文件结构 网页属性 字体 HTML颜色 阅读 段落等等
根据w3c的HTML学习精心总结 w3c的HTML总结 HTML学习资源
html常用标签总结，包含各种表单标签 1.表单：<form></form> 主要属性：id name action method 2.input元素： 主要属性：name type value class type： text submit button radio checkbox hidden...
html总结.
内容非原创，但为纯手打的Xmind资源，学习过程中还是不要偷懒，亲自手打一遍印象比较深刻
1:jquery可以加载多个ready函数，而原始的js只能加载一次onload 2 2:用dom对象得到的对象不能使用jquery中的方法，比如var p=document.getElementById("id"),此时p不能这样使用p.html(),而应该使用innerHTML。...
...头部包含元信息，如字符编码、样式表链接和脚本引用；主体则是网页的主要内容区域；...元素可以是空元素，如，无需...通过阅读"HTML总结"这份资料，你可以系统地学习和回顾HTML的关键概念，进一步提升自己的前端技能。
HTML 知识点总结 HTML 知识点总结 HTML 知识点总结 HTML 知识点总结
HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结
培训时，自己整理装在手机里看的，适合初学者
在“html课程总结，accphtml课程总结”的主题下，我们可以深入探讨HTML的基本结构、元素、属性以及它在Web开发中的作用。 HTML由一系列的元素组成，这些元素通过标签来定义。每个HTML标签都由尖括号包围，如`<html>...
以下是对HTML5学习心得的总结： 首先，HTML（HyperText Markup Language）超文本标记语言，是一种用于创建网页和网络应用的标准标记语言。HTML不是编程语言，而是一种标记语言，用来描述网页的内容和结构。HTML通过...
经过一段时间的学习，对于HTML也有了基础的认识。所以我就一点点的总结一下各类常用的标签的用法。