前端学习之回顾Html

回顾

Albresky 收录于前端 HTML 学习

2022-03-29 2024-09-15 - 次阅读 - 条评论

Html基本格式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<html>
  <head>
    <title>
      html基本格式
    </title>
  </head>
  <body>
    <!--这里是注释符号-->

    <!--这里是html主体-->
    XXXX
  </body>
</html>

1 基本标签

1.1 段落标记（分段）

1
2
3
4
5


<p>
<!--这里是待分段内容-->
我是要分
</p>
段的内容

预览

我是要分

段的内容

1.2 标题字

1
2
3
4
5
6


<h1>标题字1</h1>
<h2>标题字2</h2>
<h3>标题字3</h3>
<h4>标题字4</h4>
<h5>标题字5</h5>
<h6>标题字6</h6>

预览

标题字1

标题字2

标题字3

标题字4

标题字5

标题字6

1.3 换行标记

1
2
3


我是换
<br>
行符

预览

我是换
行符

注: <br>为独目标记

1.4 水平线

1
2
3
4
5


我是
<hr>
水平线
<hr color='red'>
我有颜色

注: <hr>为独目标记 color属性值单引号双引号均可！

预览

我是

水平线

我有颜色

1.5 预留格式

1
2
3
4
5


<pre>
for(int i=0; i<3; i++){
    cout<<"Hello World !";
}
</pre> 

预览

for(int i=0; i<3; i++){
    cout<<"Hello World !";
}

1.6 粗体字

1

<b>这里是粗体字</b>

预览

这里是粗体字

1.7 斜体字

1

<i>这里是斜体字</i>

预览

这里是斜体字

注: i表示italic

1.8 插入字(文字带下划线)

1

<ins>这里是插入字</ins>

预览

这里是删除线

1.9 删除字(文字带删除线)

1

<del>这里是删除线</del>

注: 类似markdown语法中的~~这里是markdown删除线~~

预览

~~这里是删除线~~

1.10 上标

1

E = mc<sup>2</sup>

预览

E = mc²

1.11 下标

1

A = a<sub>1</sub>

预览

A = a₁

1.12 font字体标签

1

<font color='red' size='6' font-style="黑体"></font>

预览

我是font字体标签

2 实体符号

HTML标签特征

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
      这里是正文
    </body>
</html>

注: charset表示浏览器对该html页面用何种字符集进行解析

2.1 空格

1
2
3
4


<!--显示空格-->
我是假空格

我是真&nbsp;&nbsp;空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

预览

我是假空格

我是真空格

2.2 小于号

1

我是小于号&lt;

预览

我是小于号<

2.3 大于号

1

我是大于号&gt;

预览

我是大于号>

3 表格

3.1 表格的基本操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<!--border为表格边框, align为对其格式-->
<table border='1px' align='center'>
  <!--第一行-->
  <tr align='left'>
    <td>我是第一行的第一个单元格</td>
    <td>我是第一行的第二个单元格</td>
  </tr>
  <!--第二行-->
  <tr align='center'>
    <td>我是第二行的第一个单元格</td>
    <td>我是第二行的第二个单元格</td>
  </tr>
    <!--第三行-->
  <tr align='right'>
    <td>我是第三行的第一个单元格</td>
    <td>我是第三行的第二个单元格</td>
  </tr>
</table>

预览

我是第一行的第一个单元格	我是第一行的第二个单元格
我是第二行的第一个单元格	我是第二行的第二个单元格
我是第三行的第一个单元格	我是第三行的第二个单元格

3.2 表格的合并

3.2.1 表格的列合并

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<!-- 合并表格的(1, 1)与(2, 2) -->
<table border='1px' align='center'>
  <!--第一行-->
  <tr align='left'>
    <td colspan='2'>我是第一行的第一个单元格</td>
    <!-- <td>我是第一行的第二个单元格</td> -->
    <!-- colspan属性值表示向右合并的列数 -->
    <!-- 注释掉开始合并列往右及其往右的1列 -->
  </tr>
  <!--第二行-->
  <tr align='center'>
    <td>我是第二行的第一个单元格</td>
    <td>我是第二行的第二个单元格</td>
  </tr>
    <!--第三行-->
  <tr align='right'>
    <td>我是第三行的第一个单元格</td>
    <td>我是第三行的第二个单元格</td>
  </tr>
</table>

预览

我是第一行的第一个单元格
我是第二行的第一个单元格	我是第二行的第二个单元格
我是第三行的第一个单元格	我是第三行的第二个单元格

3.2.2 表格的列合并

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<!-- 合并表格的(1, 2)与(2, 2) -->
<table border='1px' align='center'>
  <!--第一行-->
  <tr align='left'>
    <td>我是第一行的第一个单元格</td>
    <td rowspan='2'>我是第一行的第二个单元格</td>
    <!-- colspan属性值表示向右合并的列数 -->
  </tr>
  <!--第二行-->
  <tr align='center'>
    <td>我是第二行的第一个单元格</td>
    <!-- colspan属性值表示向下合并的行数, 删除这些行 -->
    <!-- <td>我是第二行的第二个单元格</td> -->
  </tr>
    <!--第三行-->
  <tr align='right'>
    <td>我是第三行的第一个单元格</td>
    <td>我是第三行的第二个单元格</td>
  </tr>
</table>

预览

我是第一行的第一个单元格	我是第一行的第二个单元格
我是第二行的第一个单元格	我是第一行的第二个单元格
我是第三行的第一个单元格	我是第三行的第二个单元格

3.3 th标签

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<!-- 作用: 自动加粗标题, 自带格式化作用 -->
<table border='1px' align='center'>
  <!--第一行-->
  <tr align='left'>
    <th>我是第一列标题</th>
    <th>我是第二列标题</th>
  </tr>
  <!--第二行-->
  <tr>
    <td>我是第一行的第一个单元格</td>
    <td>我是第一行的第二个单元格</td>
  </tr>
    <!--第三行-->
  <tr>
    <td>我是第二行的第一个单元格</td>
    <td>我是第二行的第二个单元格</td>
  </tr>
</table>

预览

我是第一列标题	我是第二列标题
我是第一行的第一个单元格	我是第一行的第二个单元格
我是第二行的第一个单元格	我是第二行的第二个单元格

3.4 thead-tbody-tfoot

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<table border="1" width="50%">
    <thead>
        <tr>
          <td>主语</td>
          <td>谓语</td>
          <td>宾语</td>
        </tr>
    </thead>
    <tbody>
          <td>我</td>
          <td>是</td>
          <td>谁</td>
    </tbody>
    <tfoot>
          <td>我</td>
          <td>来自</td>
          <td>地球</td>
    </tfoot>
</table>

预览

主语	谓语	宾语
我	是	谁
她	来自	地球

4 背景颜色与背景图片

4.1 背景颜色

1
2
3


<body bgcolor='blue'>
  <!-- 这里是body -->
</body>

4.2 背景图片

1
2
3
4


<!-- src的值当前为相对路径 -->
<body background='images/bg.png'>
  <!-- 这里是body -->
</body>

4.3 图片

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<body>
  <!-- 这里是插入图片 -->
  <img src='images/bg.png'></img>
  
  <!-- 如果过标签内没有内容,亦可以这么写: -->
  <img src='images/bg.png'/>

  <!-- 高度会自适应, 若再手动设置图片高度, 图片会变形失真 -->
  <img src='images/bg.png' width="60%"/>

  <!-- 鼠标悬停图片信息 -->
  <img src='images/bg.png' title="这里是光标悬停图片时的提示信息"/>

  <!-- 图片加载失败时的信息 -->
  <img src='images/bg.png' alt='这里是图片加载失败时的提示信息'/>
</body>

4.4 超链接

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


  <!-- href用来指定链接的路径 -->
  <!-- 网络URL -->
  <a href="http://cosyspark.space">这里是CosySpark</a>

  <!-- href亦可以是本地路径 -->
  <a href="C:\WINDOWS">这里是本地链接</a>

  <!-- 图片添加超链接 -->
  <a href="https://cosyspark.space">
    <img src="images/hyperLinkImg.png" title="这里是CosySpark"/>
  </a>

  <!-- 
    打开超链接的窗口
    target:
          _self:    当前窗口 
          _blank:   新窗口
          _parent:  当前窗口的父窗口
          _top:     当前窗口的顶级窗口
  --> 
  <!-- 当前窗口 -->
  <a href="https://cosyspark.space" target="_self"/>
  <!-- 新窗口 -->
  <a href="https://cosyspark.space" target="_blank"/>

5 B/S (Browser/Server) 原理

1 用户在浏览器输入URL
2 点击回车向服务器发送请求
3 服务器向浏览器进行响应, 一般会返回一段html代码
4 浏览器对Html进行解释

6 列表

6.1 无序列表

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<body>
  <!-- 无序列表 -->
  <ul>国家
    <!-- 列表项 -->
    <li>俄罗斯</li>
      <!-- 无序列表的嵌套 -->
      <ul>中国
        <li>北京市</li>
        <li>上海市</li>
        <li>重庆市</li>
      </ul>
    <li>美国</li>
    <li>日本</li>
  </ul>
</body>

预览

俄罗斯

北京市
上海市
重庆市

美国
日本

6.2 有序列表

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


<body>
  <!-- 有序列表 -->
  <ol>编程语言
    <!-- 列表项 -->
    <ol>解释型语言
      <!-- 有序列表的嵌套 -->
      <ol>面向对象语言
        <li>Python</li>
      </ol>
    <ol>编译型语言
      <ol>面向对象语言
        <li>C</li>
      </ol>
      <ol>面向过程语言
        <li>C++</li>
        <li>Java</li>
      </ol>
      <ol>其他
      <li>Golang</li>
      </ol>
    </ol>
  </ol>
</body>

预览

Python

C++
Java

Golang

7 表单Form

7.1 核心内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<form action="http://cosyspark.space">
  <!--表单的input标签的type属性值必须是`submit`-->
  <!-- id的属性值为该input标签的id -->
  <input type="submit" id="my_submit" value="提交"/>
</form>
<hr>
<form action="http://cosyspark.space">
  <!-- input标签的type属性值为password时, 浏览器会将其值作为密文显示; 为text是作为明文显示 -->
  <!-- 表单项必须含有name属性,否则该标签的value不会被包含在表单的提交列表中! -->
  <!-- 以下是无效表单（无动作） -->
  <input type="text" id="account" value="请输入你的账号"/>
  <input type="password" id="passwd" value="请输入你的密码"/>
  <input type="submit" id="my_submit">
  <!-- 以下是正确范例(value仅为与下文对比效果, 实际使用中不要设置该属性!) -->
  <br>账号
  <input type="text" id="account" name="account" value="请输入你的账号"/>

  <br>密码
  <input type="password" id="passwd" name="password" value="请输入你的密码"/>
  <input type="submit" id="my_submit" value="登录">
</form>

预览

7.2 拓展

7.2.1 占位符placeholder

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<!-- input标签的占位hint -->
<input placeholder="我是placeholder"/>

<!-- 与上文对比 -->
<form action="http://cosyspark.space">
  <br>账号
  <input type="text" name="account"  placeholder="请输入你的账号"/>
  
  <br>密码
  <input type="password" name="password" placeholder="请输入你的密码"/>

  <br>
  <input type="submit" id="my_submit" value="登录">
</form>

预览

7.2.2 URL键值对

如上文表单, 浏览器对服务器提交表单时, 真正请求的URL的为https://cosyspark.space?account=xxx&password=xxx
表单项成为了请求URL中的键值对A=a, B=b, 并通过&连接

7.2.3 单选按钮

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<form action="http://cosyspark.space">
  <br>账号
  <input type="text" name="account"  placeholder="请输入你的账号"/>
  
  <br>密码
  <input type="password" name="password" placeholder="请输入你的密码"/>

  <!-- 单选框 -->
  <!-- 使用radio时, `name`属性必须一致, 否则无法单选 -->
  <br>性别
  <input type="radio" name="sex"/>男
  <input type="radio" name="sex"/>女
  
  <br>
  <input type="submit" value="登录">
</form>

预览

7.2.4 复选框

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<form action="http://cosyspark.space">
  <br>账号
  <input type="text" name="account"  placeholder="请输入你的账号"/>
  
  <br>密码
  <input type="password" name="password" placeholder="请输入你的密码"/>
  <!-- 复选框 -->
  <br>熟悉的语言
  <input type="checkbox" name="lang" value="c++" checked/>C++
  <input type="checkbox" name="lang" value="java"/>Java
  <input type="checkbox" name="lang" value="python" checked/>Python
</form>

预览

7.2.5 下拉框

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<form action="http://cosyspark.space">
  <br>学历
  <select name="xueli">
    <option value="gz">高中</option>
    <option value="zk">专科</option>
    <option value="bk">本科</option>
    <option value="yjs">研究生</option>
  </select>
  <br><br>
  <input type="submit" value="登录">
</form>

预览

给作者倒杯卡布奇诺 ~

赞赏

支付宝

微信