HTML
1、什么是HTML
HTML
- HTML：Hyper Text Markup Language
- HTML不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签
- HTML使用标记标签来描述网页
- HTML文档包含了HTML标签以及文本内容
- HTML文档也叫做web页面
2、HTML标签
- HTML tag
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| 定义HTML文档 | ||
| 定义文档的主题 | ||
| 这是一个段落 | ||
| 这是一个链接 | ||
| 换行,在不产生一个新段落的情况下进行换行（新行） | ||
|
| 创建水平线 | |
| 定义注释 | ||
- | b标题 | |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo03</title>
</head>
<body>
<!--文本格式化-->
<b><del>加粗</del></b>
<br>
<strong>加粗</strong>
<br>
<strong>加粗<sup>上标</sup></strong>
<br>
<strong>加粗<sub>上标</sub></strong>
<br>
<big>放大</big>
<br>
<small>缩小</small>
<br>
<em>斜体</em>
<br>
<i><del>斜体</del></i>
<br>
<ins>新添加的文本</ins>
<br>
<del>已经删除的文本</del>
<br>
<!--缩写和首字母缩写-->
<abbr title="etcetera">etc.</abbr>
<br>
<acronym title="World Wide Web">WWW
</acronym>
<br>
<!--文字方向-->
<p><bdo dir="ltr">这段文字从左向右显示。</bdo></p>
<p><bdo dir="rtl">这段文字从右向左显示。</bdo></p>
<!--预格式文本-->
<pre>
用pre标签控制
回车和 空格 <h2>标题</h2>
</pre>
<!--图片-->
<img src="../StaticResources/pika.jpg" alt="皮卡皮卡">
<!--块引用 blockquote-->
<p>鸡汤：<q>既然所有的困难都需要克服，那为什么不是现在去做呢</q></p>
<!--缩进 cite-->
<p>aaa: <blockquote>
bbbccc
</blockquote>
<cite>Yu</cite>
</p>
<br>
<!--链接 -->
<a href="http://www.baidu.com" target="_blank" id="书签标记">百度</a>
</body>
<footer>
<address>
Written by <a href="yucode.cn">小胖小的小站</a>
Visit us at：
<br>
XiBuKaiYuan,DianZiErlu
<br>
China
</address>
</footer>
</html>
-
锚链接
- 用于页面间指定位置跳转 ： 快速定位目录
- 可以在同一页页面中跳转
- 也可以在不同页面中跳转 ：（需要掌握）
锚点
<!--标记A--> <a name="markerA">A</a>跳转到锚点
<a href="#markerA">A</a> <br> <a href="#markerB">B</a> <br> <a href="#markerC">C</a> <br> <a href="#mk1"></a> -
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格
-
HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签.通常标签 替换加粗标签 来使用, 替换 标签使用。
-
浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。
-
标签用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。
通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。提示和注释
**提示：**在某些浏览器中，当您把鼠标移至带有 标签的缩写词/首字母缩略词上时， 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。
标签定义及使用说明
标签定义文档作者/所有者的联系信息。如果
元素位于 元素内部，则它表示该文档作者/所有者的联系信息。如果
元素位于**提示：**不应该使用
标签来描述邮政地址，除非这些信息是联系信息的组成部分。提示：
元素通常被包含在 元素的其他信息中。3、块元素、行内元素
块元素
- 无论内容多少，都是独占一行的 （p，h1~h6）
行内元素
- 只根据内容的长度来扩展。 （a，strong，em….）
4、列表、表格、媒体元素
列表
有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<h4>编号列表：</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>大写字母列表：</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
无序列表
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>Java</li>
</ul>
自定义列表
<h4>一个自定义列表：</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
表格
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>单元格跨两行:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
音频、视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--音频播放-->
<audio src="../statics/audio/shui.m4a" controls>
</audio>
<video controls autoplay loop>
<source src="../statics/video/yezi.mp4">
<source src="../statics/video/yezi.mp4">
</video>
</body>
</html>
网页结构分析
- 页面的头部
- 页面的主体
- 页面的尾部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header>
头部
</header>
<nav>导航栏</nav>
<aside>侧边栏</aside>
<article>文章主题</article>
<section> 独立区域 </section>
<footer>
尾部
</footer>
</body>
</html>
5、表单
基础表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="test.html" method="post">
<p>名字：<input type="text" name="username"> </p>
<p>密码：<input type="password" name="password"> </p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
表单元素
<!--文本框 type="text"
-->
<p>
<input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>
<!--密码框-->
<p>
<input type="password" name="pwd" size="20">
</p>
<!--单选框-->
<p>
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex">女
</p>
<!--多选框 type="checkbox"-->
<p>
<input type="checkbox" name="hobby" value="code">打篮球
<input type="checkbox" name="hobby" value="music" checked>踢足球
<input type="checkbox" name="hobby" value="girl" disabled>乒乓球
</p>
<!--下拉列表框-->
<select name="科目">
<option value="1"></option>
<option value="2" selected>数学</option>
<option value="3">英语</option>
<option value="4">英语</option>
<option value="5">英语</option>
</select>
<!--按钮-->
<p>
<!--提交-->
<input type="submit" value="登录">
<!--重置--使用-->
<input type="reset" value="清空">
<!--普通按钮-->
<input type="button" value="点我">
<!--图片按钮 -->
<input type="image" src="../statics/images/bd.png">
</p>
<!--文本域-->
<textarea name="textarea" cols="10" rows="10">
</textarea>
<!--表单-->
<form action="test.html" method="get" enctype="multipart/form-data">
<input type="file" name="video">
</form>
<!--邮箱-->
<p>
邮箱：<input type="email" name="email">
</p>
<!--url网址-->
<p>
url：<input type="url" name="url">
</p>
<!--数字-->
<p>
数字：<input type="number" min="0" max="100" step="10">
</p>
<!--滑块-->
<p>
<input type="range" name="range" min="0" max="1000" step="2">
</p>
<!--搜索框-->
<p>
搜索： <input type="search" name="search">
</p>
表单的应用
<!--隐藏域-->
<p>
<input type="hidden" name="count" value="10">
</p>
<!--只读和禁用-->
<p>
用户名： <input type="text" name="username" readonly>
</p>
<p>
密码： <input type="password" name="pwd" disabled>
</p>
<!--标注-->
<p>
<label for="name">用户名： </label>
<input type="text" name="un" id="name">
</p>
为什么要表单验证 ？
减轻服务器压力，让一部分检验在前端做。
<!--默认提示-->
<p>
用户名：
<input type="url" name="username" placeholder="url格式">
<p>
<!--必填-->
<p>
密码： <input type="password" name="passwords" required>
<p>
<p>
<!--pattern:正则表达式-->
车牌号码： <input type="password" name="tel" required pattern="^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}">
</p>
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
