HTML 超文本的含义:HTML不仅可以包含文字,也可以包含图片、音乐、视频、超链接等
标签:
标签
框架标签
vscode 代码格式化快捷键 :Shift + Alt + F
<html>
<head>
<title>
Hello
</title>
</head>
<body>
HELLO,everyone. This is my first page!
</body>
</html>
常用标签
字体标签
段落标签
换行
注意:
和
尽量不要混用
<html>
<head>
<title>first.html</title>
</head>
<body>
<!--这里是一个注释,只有程序员和队友才能看到-->
<p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。<br>在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</p>
<p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
</p>
</body>
</html>
标题标签
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>first.html</title>
<meta charset="utf-8">
</head>
<body>
<h1>标签1</h1>
<h2>标签2</h2>
<h3>标签3</h3>
<h6>标签4</h6>
</body>
</html>
图片标签
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>first.html</title>
<meta charset="utf-8">
</head>
<body>
log1: <img src="" alt="图片加载失败!"> <br>
<!-- windows上一下两种路径都可以 -->
<!-- 绝对路径 -->
log2: <img src="E:\学习\前端\慕课网--从网页搭建入门JavaWeb\常用标签\HTML入门源码\img\html\image\logo.png" alt="图片加载失败!"> <br>
<!-- 绝对路径 -->
log3: <img src="E:/学习/前端/慕课网--从网页搭建入门JavaWeb/常用标签\HTML入门源码/img/html/image/logo.png" alt="图片加载失败!"> <br>
<!-- 相对路径 -->
log3: <img src="../../img/html/image/logo.png" alt="图片加载失败!"> <br>
</body>
</html>
超链接
<html>
<head>
test1
</head>
<body>
<h1>test1 </h1>
<h1> 新链接 </h1>
<p> <a href="E:\学习\前端\慕课网--从网页搭建入门JavaWeb\常用标签\HTML入门源码\超链接\html\welcome.html"> 打开新链接 </a> </p>
<a href="http://www.imooc.com">慕课网 </a>
<a href="../img/html/image/songshulinzhicheng.jpg">打开图片 </a>
<a href="http://www.imooc.com" target="_blank">
<img src="../img/html/image/logo.png" alt="加载图片失败"/>
</a>
</body>
</html>
<html>
<head>
tes2
</head>
<body>
<h1> 新链接 </h1>
<a href="E:\学习\前端\慕课网--从网页搭建入门JavaWeb\常用标签\HTML入门源码\test\test1.html">
返回前一个链接
</a>
</body>
</html>
锚点
锚点和超链接的区别是:超链接打开的是某一个新的链接页面,锚点是本链接内容中的一个位置链接,文件的长度足够长,大于浏览器的显示范围,需要出现滚动条。
注意:
定义锚点
<!-- 锚点使用要先定义 -->
<!-- 定义锚点1 -->
<a name="锚点1">
<p> 锚点1辅导辅导费 </p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
</a>
使用定义好的锚点
<!-- 使用定义好的锚点 -->
<p> <a href="#锚点1">跳到锚点1</a> </p>
示例
<html>
<head>
锚点test1
</head>
<h1> 锚点test1 </h1>
<body>
<!-- 使用定义好的锚点 -->
<p> <a href="#锚点1">跳到锚点1</a> </p>
<p> <a href="#锚点2">跳到锚点2</a> </p>
<p> <a href="#锚点3">跳到锚点3</a> </p>
<p> <a href="锚点test2.html#锚点3"> 打开新链接中的锚点位置 </p>
<!-- 锚点使用要先定义 -->
<!-- 定义锚点1 -->
<a name="锚点1">
<p> 锚点1辅导辅导费 </p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
</a>
<!-- 定义锚点2 -->
<a name="锚点2">
<p> 锚点2辅导辅导费 </p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
</a>
<!-- 定义锚点3 -->
<a name="锚点3">
<p> 锚点3辅导辅导费 </p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
</a>
</body>
</html>>
效果
<html>
<head>
锚点test2
</head>
<body>
<p> <a href="锚点1.html"> 返回锚点1.html </a> </p>
<!-- 锚点使用要先定义 -->
<!-- 定义锚点1 -->
<a name="锚点1">
<p> 锚点1辅导辅导费 </p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
</a>
<!-- 定义锚点2 -->
<a name="锚点2">
<p> 锚点2辅导辅导费 </p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
</a>
<!-- 定义锚点3 -->
<a name="锚点3">
<p> 锚点3辅导辅导费 </p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
<p> fdfdfdfdf</p>
<p> fdfdfdfdfdf</p>
<p> fdfdfdf辅导费</p>
</a>
</body>
</html>
列表
无序列表
<html>
<head>
无序列表
</head>
<body>
<ul>
<li>
<a href="https://www.baidu.com"> 百度</a>
</li>
<li>
qqqqqqqqqqqqqqq
</li>
<li>
wwwwwwwwwwwwwwwwwwww
</li>
<li>
eeeeeeeeeeeeeeeeeeee
</li>
</ul>
</body>
</html>
有序列表
<html>
<head>
有序列表
</head>
<body>
<ol>
<li>
<a href="https://www.baidu.com"> 百度</a>
</li>
<li>
qqqqqqqqqqqqqqq
</li>
<li>
wwwwwwwwwwwwwwwwwwww
</li>
<li>
eeeeeeeeeeeeeeeeeeee
</li>
</ol>
</body>
</html>
表格
效果
<html>
<head>
table1
</head>
<body>
<!-- <table border="1" width="600px"> -->
<table border="1" width="50%">
<tr>
<td> </td>
<td> 星期1 </td>
<td> 星期2 </td>
<td> 星期3 </td>
<td> 星期4 </td>
<td> 星期5 </td>
</tr>
<tr>
<td>第一节 </td>
<td> 语文1 </td>
<td> 语文2 </td>
<td> 语文3 </td>
<td> 语文4 </td>
<td> 语文5 </td>
</tr>
<tr>
<td>第二节 </td>
<td> 数学1</td>
<td> 数学2</td>
<td> 数学3</td>
<td> 数学4</td>
<td> 数学5</td>
</tr>
<tr>
<td>第三节 </td>
<td> 外语1 </td>
<td> 外语1 </td>
<td> 外语1 </td>
<td> 外语1 </td>
<td> 外语1 </td>
</tr>
<tr>
<td>第四节 </td>
<td> 历史1</td>
<td> 历史2</td>
<td> 历史3</td>
<td> 历史4</td>
<td> 历史5</td>
</tr>
</table>
</body>
</html>
表单
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<input> 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态,根据不同的 type 属性。
这是本章中使用的类型:
<form>标签定义表单
表单本身是不可见的,相当于是一个容器。
单选框注意点:
单选框 name属性名相同认为是同一组复选款,同一组复选框只有一个可以被选中,不同组的复选可一个每个组可以选中一个
checked=“checked” 属性设置默认被选中的单选框
<input type="radio" name="" id="" checked="checked" placeholder="男"> 男
<input type="radio" name="" id="" placeholder="女"> 女
<html>
<head>
<p>表单1 </p>
</head>
<body>
<form action="/test" method="get">
<lable> 姓名:</lable>
<!--单行文本框-->
<input typr="text" name = "vv" id =""> <br>
<labe>密码:</lable>
<input type = "text" name = "bb" id =""> <br>
<lable>再次输入密码</lable>
<input type = "password" name="" id= ""> <br>
<labe>性别: </labe>
<!-- radio单选框 -->
<input type="radio" name = "f" id ="" value="男" checked="checked" > <lable>男</lable>
<input type="radio" name = "f" id = "" value="女"> <lable>女</lable> <br>
<!-- 复选框多选框 -->
<lable>兴趣爱好:</lable>
<input type="checkbox" name="" id="" value="1"> <label>看书</label>
<input type="checkbox" name="" id="" value="1"> <label>旅游</label>
<input type="checkbox" name="" id="" value="1"> <label>打球</label>
<input type="checkbox" name="" id="" value="1"> <label>跑步</label> <br>
<!-- 下拉列表 -->
<lable>生日:</lable>
<select>
<option value="1991" >1991 </option>
<option value="1992" >1992 </option>
<!-- selected="selected" 表示下拉框默认选中 -->
<option value="1993" selected="selected" >1993 </option>
<option value="1994" >1994 </option>
<option value="1995" >1995 </option>
<option value="1996" >1996 </option>
</select> <lable>年</lable>
<select>
<option value="1" >01 </option>
<option value="2" >02 </option>
<!-- selected="selected" 表示下拉框默认选中 -->
<option value="3" selected="selected" >03 </option>
<option value="4" >04 </option>
<option value="5" >05 </option>
<option value="6" >-6 </option>
</select> <lable>月</lable>
<select>
<option value="1" >01 </option>
<option value="2" >02 </option>
<!-- selected="selected" 表示下拉框默认选中 -->
<option value="3" selected="selected" >03 </option>
<option value="4" >04 </option>
<option value="5" >05 </option>
<option value="6" >05 </option>
</select> <lable>日</lable> <br>
<lable>头像:</lable> <img src="E:\学习\前端\慕课网--从网页搭建入门JavaWeb\常用标签\HTML入门源码\表单3\html\image\headLogo\1.gif">
<select>
<option value="1" >1 </option>
<option value="2" >2 </option>
<!-- selected="selected" 表示下拉框默认选中 -->
<option value="3" selected="selected" >13 </option>
<option value="4" >14 </option>
<option value="5" >15 </option>
<option value="6" >15 </option>
</select> <br>
<!-- 普通按钮只在前端处理不进入后端 -->
<input type="button" value="普通按钮">
<!-- 提交按钮将数据传入后端处理 -->
<input type="submit" value="提交按钮"> <br>
</form>
<!--多行文本框-->
<textarea rows="10" cols="80" name="" id="">
请输入
</textarea>
<!-- 选择本地文件 -->
<input type="file" name="" value="">
<input type="button" value="上传文件"> <br>
<!-- 普通下拉框 -->
<select size="5">
<option value="1">1 </option>
<option value="1">2 </option>
<option value="1">3 </option>
<option value="1">4 </option>
<option value="1">5 </option>
<option value="1">6 </option>
<option value="1">7 </option>
<option value="1">8 </option>
<option value="1">9 </option>
<option value="1">10 </option>
<option value="1">11 </option>
<option value="1">12 </option>
</select>
</body>
</html>
HTML中转义字符
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>first.html</title>
<meta charset="utf-8">
</head>
<body>
<p><慕课网>是垂直 的互联网"IT"技能免费学习网站。</p>
以独家视频教程、在线编程      工具、学习计划、问答社区为核心特色。</p>
在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。</p>
在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT©技术。</p>
</p>
</body>
</html>
作业
<html>
<head>
表单作业
</head>
<body>
<h1 align="center"> 注册信息</h1>
<form action="/test1" method="get">
<table width="500px" bgcolor="Azure" align="center">
<tr>
<td align="right"> <label>用户名:</label> </td>
<td> <input type="text" name="" id="" placeholder="请输入用户名"> </td>
</tr>
<tr>
<td align ="right"> <label>密码:</label> </td>
<td> <input type="password" name="" id="" placeholder="请输入密码"> </td>
</tr>
<tr>
<td align ="right"> <label>确认密码:</label> </td>
<td> <input type="password" name="" id="" placeholder="请再次输入密码"> </td>
</tr>
<tr>
<td align ="right"> <label>性别:</label> </td>
<td>
<input type="radio" name="" id="" checked="checked"> 男
<input type="radio" name="" id="" > 女
</td>
</tr>
<tr>
<td align ="right"> <label>兴趣爱好:</label> </td>
<td>
<input type="checkbox" name="" id="" checked="checked"> 看书
<input type="checkbox" name="" id=""> 打球
<input type="checkbox" name="" id=""> 跑步
</td>
</tr>
<tr>
<td align="right">生日:</td>
<td>
<select>
<option value="1991" >1991</option>
<option value="1992" selected="select">1992</option>
<option value="1993" >1993</option>
</select>
<select>
<option value="1" >01</option>
<option value="2" selected="select">02</option>
<option value="3" >03</option>
</select>
<select>
<option value="1" >01</option>
<option value="2" selected="select">02</option>
<option value="3" >03</option>
</select>
</td>
</tr>
<tr>
<td align="right">头像:</td>
<td>
<img src="E:\学习\前端\慕课网--从网页搭建入门JavaWeb\常用标签\HTML入门源码\表单3\html\image\headLogo\1.gif">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected="select">4</option>
</select>
</td>
</tr>
<tr>
<td align ="right"> <label >上传照片:</label> </td>
<td> <input type="file" name="" id=""> </td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</body>
</html>