本文详细介绍了HTML的基础知识，包括HTML标签的使用，如标题、段落、空格和换行的表示，以及文本格式化、图片、链接、表单等元素。还探讨了HTML属性，如设置图片大小、创建超链接、定义表单元素等。此外，文中还提到了HTML5的新标签，如<header>、<nav>等，展示了HTML在构建网页结构和内容呈现中的重要作用。
超文本标记语言(HyperText Markup Language),简称HTML。负责网页结构的搭建，是前端技术之一。
语法规则：
- <>：标签
- html的标签大都是成对出现
- html语法必须写在尖括号里面
- / 结束符号
html基础示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
解析：
<!DOCTYPE html>：声明为html5文档
<html> ：是 HTML 页面的根元素
<head> ：是html的head元素
<meta charset="utf-8">：定义网页编码格式为 utf-8，包含在head元素中间
<title></title>：网页的title名称
<body>：body元素，网页的正文，可见的页面内容
HTML 标题
HTML 标题是通过<h1> - <h6> 标签来定义的。
示例:
<h1>我是文章的标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
HTML 段落
HTML 段落是通过标签 <p> 来定义的。
<p>文章段落</p>
空格和换行
 空格
示例：
<!--  空格 -->
ctrl+s； 保存
br换行
示例：
<br/>
<br>
<br />
换行之后
整体示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- title:网页tab标题 -->
<title>我的第一个网页</title>
</head>
<body>
<!-- 以下是标题，h1-h6 -->
<h1>我是文章的标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!--  空格 -->
ctrl+s； 保存
<!-- br换行 -->
<p>换行之前</p>
<br/>
<p>行1</p>
<br>
<p>行2</p>
<br />
换行之后
<!-- p标签，
ctrl+/ 注释的快捷键，再按一次取消注释 -->
<p>文章段落</p>
</body>
</html>
执行结果：
HTML 文本格式化标签
<b></b>：加粗文字
<strong></strong>：是加粗特别强调文字
<i></i>：斜体文字
<em></em>：斜体一般强调文字
<s>原价999，s删除线</s>：删除线，不推荐
<del>原价999，del删除线</del>：删除线，推荐使用
<u></u>：下划线
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo02</title>
</head>
<body>
普通文字
<b>我是加粗文字，b</b>
<br>
<strong>我是加粗特别强调文字，strong</strong>
<br>
<u>我是下划线文字，u</u>
<br>
<i>我是斜体文字，i</i>
<br>
<em>我是斜体一般强调文字，em</em>
<br>
<!-- s和del都可以实现删除线D，s已不被推荐使用 -->
<s>原价999，s删除线</s>
<br>
<del>原价999，del删除线</del>
<br>
现价99
<br>
</body>
</html>
HTML属性
HTML 元素可以设置属性,属性总是以名称/值对的形式出现，比如：name=“value”。
图片标签
在 HTML 中，图像由 标签定义。
<!-- 图片标签，img标签,第二种是输入之后按了tab键
src代表资源，值是图片名称；多个属性之间用空格隔开
width宽度，height高度，如果只设置一个属性，另外一个会按照原图的比例进行缩放显示；如果宽度和高度不设置，按照图片原大小显示；
title="鼠标悬停提示文案"；
alt 图片未正常加载时显示的文字，网页阅读器读取此内容-->
<img src="03.jpg" width="800" height="600" title="鼠标悬停提示文案" >
<br>
<img src="0.jpg" alt="图片显示不出来显示的属性值">
执行结果：
HTML链接
HTML使用标签 <a>来设置超文本链接。可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
如：<a href="url">链接文本</a>
使用 target 属性，你可以定义被链接的文档在何处显示；
示例：
<!-- 超链接：点击之后实现页面内容跳转
打开网页页面-->
<a href="https://www.baidu.com">点击我打开百度</a>
<br>
<!-- 打开本地的网页 ，默认在当前窗口打开-->
<a href="Demo01.html">点击我打开demo01</a>
<br>
<!-- 新窗口打开超链接 -->
<a href="https://www.baidu.com" target="_blank">新窗口打开百度</a>
<br>
空链接示例：
<a href="###">点击我可以打开空链接#</a><br>
<a href="javascript:;">点击我可以打开空链接javascript</a><br>
<a href="javascript:void(0);">点击我可以打开空链接javascript void</a><br>
锚点链接：
<a href="#0605">锚点链接，点击跳转到指定位置0605</a>
HTML表单
我们可以使用 标签来创建表单。所有的用户输入都要写在form标签中嵌套的。
文本域：<input>，输入类型是由 type 属性定义。
- 普通的文本输入框：<input type="text">，type="text"文本输入框
id="":代表输入框的id编号，是唯一的，不可重复的
vaule="":文本框默认文字，需要用户手动删除
placeholder=""：html5属性，占位符；显示文本框提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失；不支持ie低版本；
autofocus="autofocus" 自动聚焦
示例：
用户名：<input type="text" placeholder="请输入用户名" autofocus="autofocus">
<br>
<!-- type="password" 密码框，用户输入的密码会加密 -->
密码框：<input type="password">
<br>
- 单选框：<input type="radio"> 标签定义了表单的单选框选项
checked="checked" 表示默认选中
name="性别" 单选框的名称，设置之后name的值要一致才可以实现单选效果；
label标签可点击，实现点击文字可选中，for="" 里面是取得id值 ，同时单选框标签要设置对应的id属性
示例：
性别：<input type="radio" id="nan" name="性别" checked="checked">
<label for="nan">男</label>
<input type="radio" name="性别" id="nv">
<label for="nv">女</label>
<br>
- 复选框：<input type="checkbox"/>，type="checkbox" 复选框
checked="checked" 表示默认选中
name="" 复选选框的名称
label标签可点击，实现点击文字可选中,for="" 里面是取得id值 ，同时单选框标签要设置对应的id属性
示例：
爱好：
<input type="checkbox" name="trip" id="trip" checked="checked" />
<label for="trip">旅游</label>
<input type="checkbox" name="run" id="run" value="" />
<label for="run">跑步</label>
<input type="checkbox" name="yoga" id="yoga" value="" />
<label for="yoga">瑜伽</label>
<input type="checkbox" name="climb" id="climb" value="" />
<label for="climb">爬山</label>
<br>
- 普通按钮：<input type="button" value="普通">，同<button type="button"></button>
- 重置按钮：<input type="reset" value="重置">，必须设置value属性，否则浏览器会出现兼容性问题
- 提交按钮：<input type="submit" value="提交">，必须设置value属性，否则浏览器会出现兼容性问题
下拉菜单：<select ></select>，嵌套若干option标签，每组option是一个下拉菜单的选项
如果设置多个下拉菜单，需要添加optgroup标签，并设置label属性；
selected="selected"设置默认选中
来自：
<select name="">
<option value="">美国</option>
<option value="" selected="selected">中国</option>
<option value="">印度</option>
<option value="">澳大利亚</option>
</select>
<select name="">
<optgroup label="上海">
<option>浦东</option>
<option>虹桥</option>
<option>闵行</option>
</optgroup>
<optgroup label="北京">
<option>朝阳</option>
<option>通州</option>
<option>海淀</option>
<option>顺义</option>
</optgroup>
</select>
文本域：<textarea></textarea>可以实现换行输入
cols和rows在不同浏览器解析会有差异，不建议；设置宽度和高度可以使用width和height
示例：
建议：<textarea name="" id="" cols="30" rows="10" placeholder="请输入建议"></textarea>
<br>
整体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- form表单标签
action="xxx.jsp" 把表单数据提交到后台程序处理-->
<form action="xxx.jsp" method="post">
<!-- 中文的冒号防止生成错误标签
input代表文本框标签
type="text"：普通的文本输入框
id="":代表输入框的id编号，是唯一的，不可重复的
vaule="":文本框默认文字，需要用户手动删除
placeholder=""：html5属性，占位符；显示文本框提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失；不支持ie低版本；
-->
用户名：<input type="text" placeholder="请输入用户名" autofocus="autofocus">
<br>
<!-- type="password" 密码框，用户输入的密码会加密 -->
密码框：<input type="password">
<br>
<!--
type="radio" 单选框
checked="checked" 表示默认选中
name="性别" 单选框的名称，设置之后name的值要一致才可以实现单选效果；
label标签可点击，实现点击文字可选中，for="" 里面是取得id值 ，同时单选框标签要设置对应的id属性
-->
性别：<input type="radio" id="nan" name="性别" checked="checked">
<label for="nan">男</label>
<input type="radio" name="性别" id="nv">
<label for="nv">女</label>
<br>
爱好：
<!--
type="checkbox" 复选框
checked="checked" 表示默认选中
name="" 复选选框的名称
label标签可点击，实现点击文字可选中,for="" 里面是取得id值 ，同时单选框标签要设置对应的id属性
-->
<input type="checkbox" name="trip" id="trip" checked="checked" />
<label for="trip">旅游</label>
<input type="checkbox" name="run" id="run" value="" />
<label for="run">跑步</label>
<input type="checkbox" name="yoga" id="yoga" value="" />
<label for="yoga">瑜伽</label>
<input type="checkbox" name="climb" id="climb" value="" />
<label for="climb">爬山</label>
<br>
<!--
select：下拉菜单，嵌套若干option标签，每组option是一个下拉菜单的选项
如果设置多个下拉菜单，需要添加optgroup标签，并设置label属性；
selected="selected"设置默认选中
-->
来自：
<select name="">
<option value="">美国</option>
<option value="" selected="selected">中国</option>
<option value="">印度</option>
<option value="">澳大利亚</option>
</select>
<select name="">
<optgroup label="上海">
<option>浦东</option>
<option>虹桥</option>
<option>闵行</option>
</optgroup>
<optgroup label="北京">
<option>朝阳</option>
<option>通州</option>
<option>海淀</option>
<option>顺义</option>
</optgroup>
</select>
<br>
<!--
textarea:文本域,可以实现换行输入
cols和rows在不同浏览器解析会有差异，不建议；设置宽度和高度可以使用width和height
-->
建议：<textarea name="" id="" cols="30" rows="10" placeholder="请输入建议"></textarea>
<br>
<!--
type="button" 普通按钮，js配合才可以实现效果,同<button type="button"></button>
type="reset" 重置按钮，value属性设置按钮文案，点击可重置内容，恢复默认值
type="submit" 提交按钮 value属性设置按钮文案
-->
普通按钮：<input type="button" value="普通">
重置按钮：<input type="reset" value="重置">
提交按钮：<input type="submit" value="提交">
</form>
</body>
</html>
执行效果：
其它-Html5新标签：
<!-- html5标签不适用ie低版本，不推荐pc端网站，可以用在手机网站 -->
<header>头部</header>
<nav>导航</nav>
<aside>侧边栏导航</aside>
<article>文章模块</article>
<footer>底部</footer>
扫一扫
1131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
