HTML入个门
HTML是什么?
1、HTML是用来编写网页的
2、浏览器解析页面,只能识别HTML、CSS、JavaScript
3、HTML 页面的结构、内容;CSS 页面的样式;JavaScript 动态修改页面,与后端交互等
HTML案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<h1>HelloWorld</h1>
<p>HelloWorld</p>
</body>
</html>
<!DOCTYPE html>
,声明html的版本为html5。这也是目前最常用的html版本。
常用标签
标题:h1~h6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>标题标签:h1~h6</h1></title>
</head>
<body>
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
</body>
</html>
段落:p
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落</title>
</head>
<body>
<p>我是一个段落</p>
</body>
</html>
文本格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本格式化</title>
</head>
<body>
<b>b加粗</b><hr/>
<strong>strong加粗</strong><hr/>
<i>i斜体</i><hr/>
<em>em斜体</em><hr/>
<small>small小号字</small><hr/>
<sub>下标字</sub><hr/>
<sup>上标字</sup><hr/>
<ins>插入字</ins><hr/>
<del>删除字</del><hr/>
</body>
</html>
链接:a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>连接:a</title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank" title="baidu">逛百度</a>
<a href="#maodian">我跳转到锚点</a>
<a name="maodian">我是锚点</a>
</body>
</html>
head中定义的属性
- meta:文档元信息
- title:文档标题
- base:文档内链接默认标签
- style:css样式
- link:外部css、js
- script:文档内js
html中定义css
- 内联样式:标签的style属性中定义样式
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
- 内部样式:style标签中定义样式
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
- 外部样式:link引入css文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
图片:img
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
表格:tr、td、th
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="2">
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1,列1</td>
<td>行1,列2</td>
<td>行1,列3</td>
</tr>
<tr>
<td>行2,列1</td>
<td>行2,列2</td>
<td>行2,列3</td>
</tr>
</tbody>
</table>
</body>
</html>
列表:ul、ol、li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body>
<h1>无序列表</h1>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>有序列表</h1>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>
</html>
区块元素:div、span
html中的每一个元素都可以分为块级元素和行内元素。
他们在html中有不同的展现策略。
如果需要需要将一堆html元素整合在一起,以一个整体进行操作,这个时候我们往往会在这些元素的外层包裹div。
把div理解为画布就行
div,是块级元素,浏览器在展示的时候永远会新起一行
span,是内敛元素,并不会新起一行,一般用来包裹文字
html布局
html是无法单独布局的,往往需要结合css才行。
在古早时期,才会使用html的table实现布局。
本质上就是把画面当做一个表格,然后通过单元格在横纵坐标方向上的合并,实现排版的效果,
目前已经没人在这么干了
表单:form、input、label、select
网页除了展示之外,另一个重要功能就行执行用户交互。
用户是通过表单将数据传递给后端的。
而一次提交的数据,就是被封装在了一个表单中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="/" method="post"></form>
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
</body>
</html>
iframe
当需要在页面中嵌入页面的时候,会用到iframe功能
<iframe src="URL"></iframe>
html5新特性
以上都是最基础的html标签,在html中提供了更多的功能
新元素
标签 | 描述 |
---|---|
<canvas> | 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
新多媒体元素
标签 | 描述 |
---|---|
<audio> | 定义音频内容 |
<video> | 定义视频(video 或者 movie) |
<source> | 定义多媒体资源 <video> 和 <audio> |
<embed> | 定义嵌入的内容,比如插件。 |
<track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
新表单元素
标签 | 描述 |
---|---|
<datalist> | 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 |
<keygen> | 规定用于表单的密钥对生成器字段。 |
<output> | 定义不同类型的输出,比如脚本的输出。 |
新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构:
标签 | 描述 |
---|---|
<article> | 定义页面独立的内容区域。 |
<aside> | 定义页面的侧边栏内容。 |
<bdi> | 允许您设置一段文本,使其脱离其父元素的文本方向设置。 |
<command> | 定义命令按钮,比如单选按钮、复选框或按钮 |
<details> | 用于描述文档或文档某个部分的细节 |
<dialog> | 定义对话框,比如提示框 |
<summary> | 标签包含 details 元素的标题 |
<figure> | 规定独立的流内容(图像、图表、照片、代码等等)。 |
<figcaption> | 定义 <figure> 元素的标题 |
<footer> | 定义 section 或 document 的页脚。 |
<header> | 定义了文档的头部区域 |
<mark> | 定义带有记号的文本。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> | 定义导航链接的部分。 |
<progress> | 定义任何类型的任务的进度。 |
<ruby> | 定义 ruby 注释(中文注音或字符)。 |
<rt> | 定义字符(中文注音或字符)的解释或发音。 |
<rp> | 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。 |
<section> | 定义文档中的节(section、区段)。 |
<time> | 定义日期或时间。 |
<wbr> | 规定在文本中的何处适合添加换行符。 |
web存储:localStorage 和 sessionStorage
客户端存储数据的两个对象为:
- localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
- sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
sse的支持
websocket的支持
HTML学习总结
HTML甚至不能称之为一种编程语言,就是一种标记符号。由标签和属性构成。
日常中常用的标签、属性,用的多了也就熟悉了。对于不熟悉的部分,知道有这么些个东西,用的时候查阅手册即可。