什么是HTML
HTML(Hyper Text Marked Language)称为超文本标记语言，是一种标识性的语言。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。百度百科
HTML是网页的骨架，是开始学习制作网页的第一步，它是由一堆标签组合起来的
必需了解
- 每个标签都要有开始和结束，如：
-
<p></p>中<p>为开标签，</p>为闭标签，这种用于中间需要插入数据的标签，可以对插入的数据产生效果 -
<br/>这个的开始和结束写到了一起，用于不会对文本产生效果的标签；这里的这个标签意思为换行，不会对文本产生效果
-
- 有时候忘记写关闭标签了也不会报错，浏览器会自动解析，但是真正写项目不能忘
- 文件名后缀为
.html或.htm - 在文本上打多个空格时，html会自动将其变为一个；后面会说如何打多个空格
- html不区分大小写： 比如上面的
<br/>和<BR/>效果一样，但是一般建议小写 - 注释： ``
块元素和行内元素
简单了解，下面会详细介绍
后期可通过css把这两个互换
- 行内元素（内联元素）：
- 和其他元素都在一行上
- 高度、行高和顶以及底边距都不可改变
- 宽度就是它的文字或图片的宽度，不可改变
- 块元素
- 总是在新行上开始，占据一整行
- 高度，行高以及外边距和内边距都可控制
- 宽度始终是与浏览器宽度一样，与内容无关
- 它可以容纳内联元素和其他块元素
基本定义参考自百度百科
- 基本的行内元素有：
<a>、<b>、<em>、<i>、<u>…… - 基本的块元素有：
<p>、<div>、<span>、<h1>~<h6>……
基本文件结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
这是内容主体
</body>
</html>
-
<!DOCTYPE html>： 代表该文档使用html编写 -
<html lang="en"></html>： 所有的文件都写在这个标签的内部，lang="en"可以删除，不删除也可以写中文，只是让浏览器是否显示翻译为en则翻译 -
<head></head>： 网页头部信息 -
<meta charset="UTF-8">： 使用UTF-8编码 -
<title>HTML</title>： 网页标题 -
<link rel="stylesheet" href="style.css">： 引入css文件 -
<body></body>： 网页主体信息，我们主要修改这个地方
常用的标签
标题标签
只有六级，如果定义了其他级的，就会被复原成普通文本大小
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
效果：
常用的没有实际意义的标签
没有实际意义，就是不会产生效果
-
<p>标签，段落标签，是块元素，常用于定义一个段落，方便对那一个段落进行操作 -
<div>标签，对文档里的一个部分进行定义，是块元素，方便对那一个部分进行操作，也可以使逻辑更加清晰 -
<span>标签，定义文档的里的某一部分，是行内元素，比如对一段话中的两个字使用<span>就可以单独对那两个字进行操作
<!--常用操作-->
<div>
<p>这是一个段落</p>
<p>这是<span>第二</span>段</p>
</div>
效果：
没啥实际意义
其他
| 标签名 | 介绍 |
|---|---|
<header> |
头部信息 |
<nav> |
导航栏 |
<aside> |
侧边栏 |
<main> |
内容区域 |
<footer> |
底部信息 |
<article> |
文章详情 |
<section> |
页面分区 |
特殊标签
这是换行<br/>标签
这是
<hr/>
分割线标签
效果：
这是换行
标签
这是
分割线标签
文本样式标签
这些均可以用css实现
| name | 用法 |
|---|---|
<b> |
加粗 |
<i> |
斜体 |
<sub> |
下标 |
<del> |
删除线 |
<b>这是加粗的文本</b><br />
<i>这是斜体</i><br />
带下标 X<sub>3</sub><br />
<del>带删除线</del><br />
带上标 X<sup>2</sup>
效果：
文本样式
列表标签
-
<ul>无序列表 -
<ol>有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<br />
<ul>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
</ul>
效果：
列表项
超链接标签
用于从一个网页跳转到另一个网页
<a href="http://www.baidu.com/" target="_blank">点我跳转到百度</a>
-
href：用于指定跳转到的网页 -
target：指定打开该网页的方式-
_blank：在一个新的标签页上打开 -
_self： 在当前标签页打开
-
简书不太好演示效果，就不展示了
媒体标签
<!--图片标签-->
<img src="Test.png"/>
<!--视频标签-->
<video src="Test.mp4" controls>如果浏览器不支持，将显示这段话</video>
<!--音频标签-->
<audio src="Test.mp3" controls>如果浏览器不支持，将显示这段话</audio>
-
src：图片/视频/音频文件地址，可以用本地的或者网上的 -
controls： 向用户显示一个播放按钮，可更换为-
autoplay： 视频/音频在就绪后马上播放 -
loop： 每当播放结束后重新开始播放 -
muted： 音频/音频默认为静音播放
-
表格
<table align="center" border="1px" width="400px" height="200px">
<thead>
<tr>
<th >1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2">3-1</td>
<td>3-2</td>
</tr>
<tr>
<td rowspan="2">4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
<tr>
<td>5-2</td>
<td>5-3</td>
</tr>
</tbody>
</table>
-
<table>：说明我们要定义的是表格-
border：css样式，定义边框 -
width和height：定义高和宽 -
align： 相对于周围元素的对齐方式，可取值有： -
center：居中 -
left： 左对齐 -
right： 右对齐
-
-
<thead>：表格头部，不管是否在最上面定义，都会把这个标签中的内容放到第一行 -
<tbody>：表格体，主要内容 -
<tfoot>： 表格脚部，会把这个标签下的所有内容放到最后一行 -
<tr>： 定义一行 -
<th>： 用于定义头部的元素，会加粗显示 -
<td>： 用于定义每一个表格中的元素 -
colspan： 元素跨列，从左往右，不可从右往左 -
rowspan： 元素跨行，从上往下，不可从下往上
效果：
表格
表单
用于收集用户数据
<!--这里用了表格的一些标签帮助美化表单-->
<form action="www.hellowar.club" method="post">
<table align="center">
<tr>
<td>用户名：</td>
<td><input type="text" value="默认输入" name="username"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked="checked" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox" value="java" name="hobby"/>Java
<input type="checkbox" value="c" name="hobby"/>C
<input type="checkbox" value="js" name="hobby"/>JavaScript
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select name="county">
<option selected="selected" value="null">—请选择国籍—</option>
<option value="China">中国</option>
<option value="Japan">日本</option>
<option value="USA">美国</option>
</select>
</td>
</tr>
<tr>
<td>自我评价</td>
<td>
<textarea rows="10" cols="20" name="docs">这里是默认值</textarea>
</td>
</tr>
<tr>
<td><input type="reset"/></td>
<td><input type="submit"/></td>
</tr>
</table>
</form>
-
<from>：表单标签-
action： 设置服务器提交地址 -
method: 设置提交方式 -
get： 把数据直接添加到网址后，传输给服务器，通过查看网址可以看到数据，不安全，且传输数据量小（默认） -
post: 将表单数据附加到 HTTP 请求的 body 内，不显示数据，较安全，且数据量没有限制
-
-
<input type="">：type等于的值可以写为以下的-
text： 单行文本输入框 -
password： 密码输入框，输入密码可自动隐藏 -
radio： 单选框 - 必须要统一
name的值 -
checkbox： 多选框 -
reset： 重置按钮，不设置value时默认显示为重置 -
submit： 提交按钮，不设置value时默认显示为提交 -
button： 按钮，默认无文字显示
-
从这里往上的定义的value的值均为输入框的默认值或按钮显示的文字
-
<input type="">：-
file： 选择文件 -
hidden： 隐藏域，不可见，针对开发者使用
-
-
<select>： 下拉列表框-
<option>： 下拉列表框中的选项 -
selected="selected"： 设为默认选中 -
value： 上传数据时的标识
-
-
<textarea>： 多行文本输入框-
rows： 输入框的显示的行数 -
cols： 输入框显示的列数
-
表单没有正确提交给服务器的原因：
- 没有设置
name属性，只有表单中的项设置name属性后才能传给服务器 - 单选、复选、下拉列表项都应该
value属性，以便于发给服务器后做识别 - 表单项不在
<from>标签中
效果：
iframe内联框架
在一个网页中显示另一个网页，不常用
<iframe src="http://www.baidu.com" width="300px" height="300 px"></iframe>
效果：
内联框架
转义字符
| 字符 | 转义字符 |
|---|---|
| 空格 | |
| ＜ | < |
| ＞ | > |
很多请看字符对照表
HTML实例
<!DOCTYPE html>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<nav>
<a href="/">首页</a>
<a href="/about/index.html">关于</a>
<nav>
<header>
头部信息，欢迎来到我的博客
</header>
<aside>
侧边栏
</aside>
<main>
<section>
<article>这是一篇博客</article>
</section>
<section>
<div>
<p>这是一些描述</p>
<p>不知道写啥</p>
</div>
</section>
</main>
<footer>
底部信息
</footer>
</body>
</html>
效果：
差不多就这样了~~~
网友评论