<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--meta标签描述了一些基本的元数据
通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务-->
<meta name="keywords" content="为搜索引擎定义关键词">
<meta name="description" content="描述网页内容">
<meta name="author" content="网页作者">
<meta http-equiv="refresh" content="300">
<!--每300秒刷新当前网页-->
<title>html learn</title>
<base href="" target="_blank">
<!--base标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接-->
<link rel="stylesheet" type="text/css" href="htmltest1.css">
<!--link标签定义了文档与外部资源之间的关系-->
<style type="text/css">
body{
background: ;
}
p{
color: blue;
}
</style>
<!-- style标签定义了HTML文档的样式文件引用地址-->
<script type="text/javascript">script标签用于加载脚本文件,如: JavaScript</script>
<!---->
</head>
<body>
<!-- HTML学习 -->
<h1>h1 标题</h1>
<h2>h2 标题</h2>
<h3>h3 标题</h3>
<h4>h4 标题</h4>
<h5>h5 标题</h5>
<h6>h6 标题</h6>
<p>p 段落</p>
<a href="https://mo.fish">a 链接</a><br>
<img src="./image1/img1.jpg"><br>img 图片<br>
<p>hr 水平线</p>
<hr>
<!-- HTML注释 -->
<p>html 会省略代码 中多余的 空白字符</p>
<hr>
<h3>HTML文本格式化标签</h3>
<b>b 加粗文本</b><br>
<i>i 斜体文本</i><br>
A<sub>sub下标</sub><br>
B<sup>sup上标</sup><br>
<em>em 着重文字</em><br>
<small>small 小号文字</small><br>
<strong>strong 加重语气</strong><br>
<ins>ins 插入字</ins><br>
<del>del 删除字</del><br>
<hr>
<h3>HTML计算机输出标签</h3>
<code>code 计算机代码</code><br>
<kbd>kbd 键盘码</kbd><br>
<samp>samp 计算机代码样本</samp><br>
<var> var 变量</var><br>
<pre>pre 预格式文本</pre><br>
<hr>
<h3>HTML引文,引用,及标签定义</h3>
<abbr>abbr 缩写</abbr><br>
<address>address 地址</address><br>
<bdo>bdo 文字方向</bdo><br>
<blockquote>blockquote 长的引用</blockquote><br>
<q>q 短的引用</q><br>
<cite>cite 引用、引证</cite><br>
<dfn>dfn 一个定义项目</dfn><br>
<hr>
<h3>HTML链接</h3>
<a href="https://mo.fish" target="_blank" rel="noopener no referrer">a 链接 新页面打开</a><br>
<hr>
<p>HTML图像,src 指 "source"。源属性的值是图像的 URL 地址。<br>
alt 属性用来为图像定义一串预备的可替换的文本。<br>
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
</p>
<img src="image1/img2.jpg" alt="liverpool">
<hr>
<p>HTML表格 table,行 tr,单元格 td,表头 th,表格标题 caption</p>
<table border="1">
<caption>Empolyee Information</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
<tr>
<td>Gini</td>
<td>29</td>
<td>男</td>
</tr>
<tr>
<td>Mane</td>
<td>28</td>
<td>男</td>
</tr>
</table>
<hr>
<h3>HTML列表</h3>
<ol>
<li>有序列表 ol,列表项目使用数字进行标记</li>
<li>列表项 li</li>
</ol>
<ul>
<li>无序列表 ul,列表项目使用粗体圆点(典型的小黑圆圈)进行标记</li>
<li>列表项 li</li>
</ul>
<dl>
<dt>自定义列表不仅仅是一列项目,而是项目及其注释的组合</dt>
<dd>自定义列表以 dl 标签开始</dd>
<dt>每个自定义列表项以 dt 开始</dt>
<dd>每个自定义列表项的描述以 dd 开始</dd>
</dl>
<hr>
<hr>
<h3>HTML区块</h3>
<div>
<p>大多数 HTML 元素被定义为块级元素或内联元素。<br>
块级元素在浏览器显示时,通常会以新行来开始(和结束)。<br>
HTML内联元素在显示时通常不会以新行开始。</p>
</div>
<div>
div 定义了文档的区域,块级 (block-level)
<p>这是<span style="color: red">span元素</span>用来组合文档中的行内元素, 内联元素(inline)</p>
</div>
<hr>
<h3>HTML表单</h3>
<p>form 表单,input 输入元素</p>
<form name="information" action="https://mo.fish" method="get">
文本框1<input type="text" name="name"><br>
文本框2<input type="text" name="age"><br>
textarea 文本框<textarea>输入</textarea><br>
密码字段<input type="password" name="pwd"><br>
单选按钮<input type="radio" name="bodyindex" value="healthy">健康
<input type="radio" name="bodyindex" value="injured">受伤<br>
复选框<input type="checkbox" name="company" value="taobao">TB
<input type="checkbox" name="company" value="pingduoduo">PDD
<input type="checkbox" name="company" value="jingdong">JD<br>
<label for="b">B</label>
<input type="radio" name="char" id="b" value="B">
<label for="a">A</label>
<input type="radio" name="char" id="a" value="A">
<select name="select1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C" selected>C</option>
<option value="D">D</option>
</select>
<input type="submit" name="提交">
</form>
<br>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="0"> =
<output name="x" for="a b">50</output>
</form>
<br>
<hr>
<h3>HTML框架 iframe</h3>
<iframe src="https://mo.fish" width="800" height="300"></iframe>
<iframe src="https://s.weibo.com/top/summary?cate=realtimehot" width="800" height="300"></iframe>
<br>
<hr>
<h3>HTML颜色 三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。<br>
141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124).<br>
17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色。
</h3>
<pre>
颜色值由十六进制来表示红、绿、蓝(RGB)。
每个颜色的最低值为 0(十六进制为 00),最高值为 255(十六进制为FF)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。
三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。
</pre>
<ol>
<li style="color: #000000">#000000</li>
<li style="color: #FF0000">#FF0000</li>
<li style="color: #00FF00">#00FF00</li>
<li style="color: #0000FF">#0000FF</li>
<li style="color: #FFFF00">#FFFF00</li>
<li style="color: #FF00FF">#FF00FF</li>
<li style="color: #00FFFF">#00FFFF</li>
<li style="color: #FFFFFF">#FFFFFF</li>
<li style="color: #888888">#888888</li>
</ol>
<hr>
<h3>HTML 脚本</h3>
<script type="text/javascript">
document.write("javascript脚本")
</script>
<noscript>
只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容
</noscript>
<hr>
<h3>HTML 字符实体</h3>
<p>HTML 中的预留字符必须被替换为字符实体。在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)</p>
<p>A 1<2,5>3, & " '
¢ £ ¥ € § &cpoy;
® ™ × ÷ </p>
<hr>
<h3>HTML URL 统一资源定位器</h3>
<p>URL(Uniform Resource Locators) 是一个网页地址。</p>
<pre>
一个网页地址语法规则:
scheme://host.domain:port/path/filename
例子:http://www.nowcoder.com/html/html-tutorial.html
说明:
scheme - 定义因特网服务的类型,最常见的类型是 http。
host - 定义域主机(http 的默认主机是 www)。
domain - 定义因特网域名,比如 nowcoder.com。
port - 定义主机上的端口号(http 的默认端口号是 80)。
path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
filename - 定义文档/资源的名称。
常见的 URL Scheme:
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页,加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。
URL 字符编码:
URL 只能使用 ASCII 字符集 。
</pre>
<br><br>
</body>
</html>