HTML
Hyper Test Markup Language（超文本标记语言）
W3C标准
- World Wide Web Consortium（万维网联盟）
- Web技术领域最权威和最具影响力的国际中立性技术标准机构
- https://www.w3.org/
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
HTML基本结构
<html>
<head>
</head>
<body>
</body>
</html>< body>、等成对的标签，分别叫做开放标签和闭合标签
单独呈现的标签（空元素），如
；意为用 / 来关闭空元素
网页的基本信息
DOCTYPE声明
- < title> 标签
< meta> 标签
网页基本标签
标题标签
<h1>我是一级标题，最大的</h1>段落标签
<p>数据库是“按照数据结构来组织、存储和管理数据的仓库”。</p>换行标签
数据库是“按照数据结构来组织、<br>存储和管理数据的仓库”。水平线标签
<hr>字体样式标签
<strong>粗体： i love you</strong><br/> <em>斜体： i love you</em>注释和特殊符号
<!-- 我是注释--> 空格： 空格 大于号：> 小于号：< 版权符号：©版权所有---lz
图像标签
- JPG
- GIF
- PNG
- BMP
- ......
<!-- img学习
src：图片地址
相对地址（推荐使用），绝对地址
../ 上一级目录
alt：找不到的情况下返回
title：鼠标点到图片上，显示的文字
-->
<img src="../resources/img/1.jpg" alt="IMUT头像" title="悬停文字" width="300" height="300">超链标签
- 路径链接
- 图像链接
- 锚链接
- 功能性链接
href 链接路径(必填)
target 链接在哪个窗口打开
_blank：在新标签打开
_self：在自己网页打开
<a href="top">顶部</a>
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
<a href="3.图像标签.html" target="_blank">跳转到3.html</a>
<!-- 点击图像跳转-->
<a href="1.第一个网页.html">
<img src="../resources/img/1.jpg" alt="磊" title="点我" width="300" height="300">
</a>
<!-- 锚链接
1.需要一个锚标记
-->
<a href="2.基本标签.html#top">回到顶部</a>
<!-- 功能性链接-->
<!--
邮件链接：mailto：
QQ链接：QQ推广
-->块元素与行内元素
块元素
无论内容多少、该元素独占一行 (p、h1-h6...)行内元素
内容撑开宽度，左右都是行内元素的可以在排在一行 (a . strong . em ...)
列表标签
- 无序列表
- 有序列表
- 定义列表
<!-- 有序列表-->
<ol>
<li>Java</li>
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>python</li>
</ol>
<hr>
<!-- 无序列表-->
<ul>
<li>Java</li>
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>python</li>
</ul>
<!-- 自定义列表-->
<dl>
<dt>学科</dt>
<dd>11</dd>
<dd>22</dd>
<dd>33</dd>
<dd>44</dd>
<dt>位置</dt>
<dd>111</dd>
<dd>222</dd>
<dd>333</dd>
<dd>444</dd>
</dl>表格标签
- 单元格
- 行
- 列
- 跨行
- 跨列
<table border="1px">
<tr>
<!-- colspan 跨列-->
<td colspan="4">学生成绩</td>
</tr>
<tr>
<!-- rowspan 跨行-->
<td rowspan="2"> 张磊</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<!-- rowspan 跨行-->
<td rowspan="2">纪烁</td>
<td>语文</td>
<td>020</td>
</tr>
<tr>
<td>数学</td>
<td>010</td>
</tr>
</table>媒体元素
- 视频元素 video
- 音频元素 audio
<!-- controls 进度条-->
<!-- autoplay 自带播放-->
<video src="../resources/video/01.flv" controls autoplay>播放视频</video>
<audio src=""></audio>页面结构分析
- header 标题头部区域的内容
- footer 标记脚步区域的内容
- section Web页面中的一块独立区域
- article 独立的文章内容
- aside 相关内容或应用
- nav 导航类辅助内容
<header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页脚部</h2></footer>iframe内联框架
<!-- name：框架标识名-->
<iframe src="path" frameborder="0"></iframe>表单语法
form元素搜集用户输入
- 表单属性
- action属性 向何处发送数据
- method属性 get/post方法
- get 在url中可以看到，不安全，高效
- post url中没有参数，传输大文件，安全
表单元素格式
- type 指定元素类型
- name 指定表单元素名称
- value 元素的初始值
- size 指定表单元素的初始宽度
- maxlength type为text或者password时，输入的最大字符数
- checked type为radio或checkbox时，指定按钮是否是被选中
输入类型
- input元素
- text 文本输入
- password 密码输入
- submit 按钮，提交数据
- radio 圆圈选择
- checkbox 方块选择
- button 按钮
- select元素 下拉列表
- option元素 选项
- textarea元素 文本域
输入属性
- value 规定初始值
- readonly 规定只读
- disabled 规定禁用
- size 规定尺寸
- maxlength 允许最大长度