HTML学习笔记 #

一、协议 #

首先说明我的文本遵从的是html协议 #

<!doctype html>

二、html解析的范围 #

<html> <html>

三、head标签 #

这里一般会写上编码格式(li)

<head><meta charset="utf=-8"></head>

四、标签，段落，链接, 图像 #

标签 #

<h1>标签分为h1到h6</h1>

段落 #

注意，如果不想在开启段落进行换行是加入标签

<p>段落</p>

链接 #

链接语法：
<a href="url">链接文本</a>
例子:
<a href="https://www.baidu.com">这里相当于链接的按键</a>

图像 #

<img loading="lazy" src="图片路径" width="宽" height="高">

五、加粗以及上下标斜体,换行 #

加粗 #

<big></big>（放大字体）
<smart></smart>(缩小字体)
<b></b>
<strong></strongs>

斜体 #

<em></em>

上标 #

<sup></sup>

下标 #

<sub></sub>

换行 #

<br>

六、对空行进行控制 #

空行控制 #

<pre></pre>

七、地址， #

填写信息的标签 #

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

隐藏显示显示内容 #

相当于将鼠标移动到文字上，会显示隐藏内容.

<abbr title="隐藏后鼠标方向要显示的信息">ect.</abbr>
<acronym title=""></acronym>

<!doctype Html>
<html>
<head>
  <meta charset="utf-8">
  <title>This is a head</title>
  </head>
  <body>
    <pre>
      Hello world
      <br>
      <a href="https://www.jianshu.com/"><strong><h1><acronym title="点击进入网站">Goto</acronym></h1></strong></a>
      </pre>
    </body>
</html>

八、文字方向打印 #

<bdo dir=""></bdo>

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>
<p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  
</body>
</html>

九、标签属性 #

属性
	eg:
		<a href="https://www.baidu.com(这是属性的值，href为属性)">你好(这里是元素)</a>
href属性指定网页链接等
id属性 定义属性的唯一ID
title属性 类似于工作标签
style属性 描述元素的行内样式
target属性，可以用于设置新窗口在何处显示
	eg:
		<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
base属性：定义页面中所有链接的默认链接地址

列表 #

有序列表 type 提供了

a: 小写字母
A: 大写字母
i: 小写罗马数字
I: 大写罗马数字
1: 数字

<ol>
	<li>选择您要是使用的网上银行</li>
	<li>显示您的应付总价，点击“确认无误，付款”</li>
	<li>确定您在有银行的预留信息，点击确定</li>
	<li>输入你的网银账号、登录密码、验证码</li>
	<li>支付成功，提示“”已完成付款</li>
</ol>

无序列表

circle
disc
square


<ul type="disc">
	<li>货到付款</li>
	<li>财付通</li>
	<li>支付宝</li>
	<li>网银在线</li>
</ul>