HTML基础笔记

2023-12-28 15:56:28

有意向后端发展的小伙伴们！后端的编程语言是必备！他是你以后做项目每天的都要接触到的!但是仅仅了解后端也是不够的，虽然现在有的前后端分离很严重，但也不代表你用去了解前端！前端三剑客在编程中也占有绝大比重！所以今天带来了前端三剑客之一---HTML，不过这个适用于一些基础的，因为后面的知识还没有整理出来，没有基础的同学们可以先看一下这一篇基础的，包学包会！下面就让我们进入正文吧！

1. HTML概述

1. 系统结构：

B/S结构：（以后主要是要走这个方向）

Browser /Server （浏览器 / 服务器的交互形式）

Browser支持哪些语言： HTML CSS JavaScript

前端页面的图片是有UI设计师完成的。（ps对java程序员没有太高的要求）

S是服务器的server端，server端的语言有很多，比如：c c++ Java python PHP ......（我们主要是使用java语言完成对服务器端的开发）

B/S架构的系统有什么优缺点？

优点：升级方便，只升级服务器端的的代码即可。维护成本低。

缺点：速度慢，体验不好，界面不炫酷。

结业内部的解决方案都是采用B/S的架构体系，因为企业办公需要的一些系统不需要炫酷的界面，也不需要特别好的用户体验，只要做出数据的增删改查即可。并且企业内部更注重维护的成本。

C/S架构：

client /server （客户端 / 服务端的交互形式）

2. 什么是HTML？怎么开发HTML？怎么运行html？

HTML： Hyper Test Markup Language（超文本标记语言）

由大量标签组成，每个标签都有开始标签跟结束标签

 <html>
     <head>
         <title>title</title>
     </head>
     <body>
     </body>
 </html>

HTML完整框架

 <!DOCTYPE html>
 <html lang="zh">
     <head>
         <meta charset="UTF-8">
         <title></title>
     </head>
     <body>
 
     </body>
 </html>

meta:元
属性：charset ：字符集
防止乱码

超文本标记语言：流媒体，图片，声音，视频.....

HTML开发的时候使用普通的文本编辑器就可以了，创建的文件拓展名是：.html或者.htm\
直接采用浏览器打开HTML文件就可以运行了。

2. HTML的语法

1. HTML的基本语法

双标签：例：这是一个双标签
双标签 == 开始标签 + 结束标签
单标签: <hr>,

2. 容器跟文本标签

文本级别标签

p ，span， img等

网页显示内容一般只能插入文字，或者是其他级别文本标签。不能嵌套相同文本标签。
否则学习样式的时候，网页布局会收到影响。

容器级别标签

div ，h1,dl,dt,dd,ul,ol,li等.

可以插入任意内容(文字，文字级别标签)，或者其他容器标签。

3. h系列标签

可以显示1-6级标题，h1~h6
是双标签，也是容器标签。（容器标签，指的是可以插入任意内容。）

啦啦啦

哈哈哈

//....

呵呵呵
```
             // 只能并列，不能嵌套其他h标签。 一个网页 只能有一个 h1 标签
```

4. p标签

p：paragraphs
- p：双标签，文本级别标签
- 在网页显示一个段落
- 注：文本级别标签：网页显示内容，可以是文字，其他类型文本级别标签，但是不能插入容器级别标签。

5. img标签

img: image. 常见格式：jpg，png，gif 级别：文本级别标签，单标签，“”当文字使用“”。常用属性： src：source 设置路径 width：设置宽度 height：设置高度 title：鼠标移到到图片上显示标题（提示文字）。 border：设置图片外层边框的宽度。 alt：设置图片没有图像的时候，用文字代替。

 //默认在body内完成
 
 
 <img src="web.jpg" width=500px height=500px title ="看什么看"  border =10px alt=“无法加载图片” />

6. 相对路径

就是一般的路径（从盘符出发）

7. a标签

a : anchor 锚俗称：

超链接
- 双标签，文本级别标签
- 常用属性
  - href ：跳转链接（相对路径，绝对路径），进入另一个网页
  - title：鼠标移动上去，提示文字。（可以是任意类型的字符）

 <a href="http://baidu.com">baidu</a>
 <a href="http://baidu.com" target="_self">baidu</a>
 <a href="http://baidu.com" target="_blank">baidu</a>
 <!--
     href : 设置连接的地址。
     target ：设置目标进行跳转。
             _self : 表示当前页面。
             _blank : 表示打开新页面进行跳转。
 
 -->

a. 锚点

两个位置进行跳转

b. href的属性值：# + id

 <p id="mao">xxxxxxxxxxxxxxxxxxxxxxx</p>
 // 假装中间有很多东西。
 
 <a href="#mao"> 锚点链接</a>
 // 一点锚点链接 ，跳转到第一个p

8. 列表

- 无序列表

无序列表
- 作用：可以在网页中搭建一个没有顺序的列表。
- 需用两个标签配合使用：ul和li。
- ul :unorder list 表示容器
- li : list item 表示容器
- li 需嵌套在ul 里面，不能单独使用，另外，ul的里面只能放li
- li 里面可以放任意内容。

 <ul>
     <li>xxxxxxxxxxx</li>
     <li>
         <h2>llll</h2>
         <ul>   ....   </ul>
     </li>
     
     <li></li>
 </ul>

- 有序列表

有序列表
- 作用：可以在网页中搭建一个有顺序的列表。
- 需用两个标签配合使用：ol和li。
- ul :order list 表示容器
- li : list item 表示容器
- li 需嵌套在ol 里面，不能单独使用，另外，ol的里面只能放li
- li 里面可以放任意内容。

 <ol>
     <li>xxxxxxxxxxx</li>
     <li>
         <h2>llll</h2>
         <ol>   ....   </ol>
     </li>
     
     <li></li>
 </ol>

<ol>
	<li>xxxxxxxxxxx</li>
	<li>
        <h2>llll</h2>
        <ol>   ....   </ol>
    </li>
    
    <li></li>
</ol>

- 定义列表

定义列表
- 定义：一个自定义标题和内容列表。
- 使用要求： dl,dt,dd 三个标签一起使用。
- dl：definition list 相当于列表最外层容器，大结构。
- dt：definition term 表示列表主题或者术语。
- dd：definition description 表示对于主题，术语的一个解释。
- dl 的内部放 dt 和 dd ，（dt和 dd 是并列的。）
- dt 后面可以有多个dd (可以有多个解释，没毛病)
- dt和dd 都属于容器级别标签，里面什么都可放

<dl>
    <dt>长城</dt>
    <dd>长城（The Great Wall），又称万里长城，是中国古代的军事防御工事，是一道高大、坚固而且连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。</dd>
    
    <dt>北京故宫</dt>
    <dd>北京故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。</dd>   
</dl>

效果如下：

长城

长城（The Great Wall），又称万里长城，是中国古代的军事防御工事，是一道高大、坚固而且连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。

北京故宫

北京故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。

9. 布局标签

布局标签： div 和 span , 俗称：”盒子“。

div：division 区域

div是双标签，容器级别标签。作用：划分页面区域，辅助页面布局。 span：小区域，小跨度。

span是双标签，经典的文本级别标签。作用：在不影响整体布局的时候，可以用于局部的调整。

10. 表格标签

至少需要3个标签

table：本身含义即表格，可以理解为最外围的框架 tr: table rows (表行) ，定义的是表格内部的行 td：table dock （表格单元格），定义的是每一行的单元格数目 th：table header 表头单元格，默认样式：字体居中，字相对较大,可以替换 td 嵌套关系： table -> tr -> td

<table border = 1px>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
     <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>

效果如下：

第一行第一列第一行第二列

第二行第一列第二行第二列

11. 表单元素

表单元素就是输入框

- form标签

form ：表单
- form标签不是一个结构性标签，而是一个功能性标签。
- **全部表单元素一般要书写到form标签内部。
- 作用：可以设置表单元素收集数据提交给谁，设置数据提交方式。
- 重要属性：
  - method：设置提交数据方式，get或者post方式
  - action：设置收集到列表单数据提交给谁的路径。

- 文本框

input ：表单元素
- 单标签，相当于一个特殊文字。
- 重要属性
  - type ：可以创建不同的表单元素
  - value : 设置默认值（自定义内容）

<form>
    <input type="test", value ="满满最帅"/>
</form>

- 密码框

只需要把type设置为password就可以了。

<form>
    密码：<input type="password" ,value ="输入密码" />
</form>

- 单选按钮

只需要把 type 设置为 radio(收音机) 即可
单选框：成组出现，而且有可能是互斥的。
设置互斥的方法：
- 同时添加 name属性并且为相同值

<form>
    <p>
    	性别：
        <input type=radio  name=sex/> 男
         <input type=radio  name=sex/> 女
    </p>
</form>

- 复选按钮

只需要把 type 设置为 checkbox（多选）即可

<form>
    <p>
    	你会哪几种语言：
        <input type=checkbox  name=hobby/> cpp
         <input type=checkbox  name=hobby/> java
            <input type=checkbox  name=hobby/> python
            <input type=checkbox  name=hobby/> GO
    </p>
</form>

- 按钮

通过input标签，还可以获得

三种不同类型的按钮
- button ：普通按钮
- reset ：重置按钮（按后，form标签内部的全部表单元素恢复起始状态、）
- submit：提交按钮，将数据提交给服务器。

  <form>
        密码：
        <input type=text value=“输入密码” />
        <p>
            性别：
            <input type=radio name=sex/> 男
            <input type=radio name=sex/> 女
        </p>
        <p>
            <input type="button" value="点我点我">
            <input type="reset" value="重置">
            <input type="submit" value="提交">
        </p>
    </form>

- 文本域

文本域可以让用户在多行输入文本内容。
- textarea: 双标签，文本级别标签。可以当做一个文字显示即可。
- 常用属性：
  - rows：行设置文本域显示的行数（超出行数会有滚动条出现），属性值是数字
  - cols ：列设置文本域显示的列数（宽），属性值是数字

  <textarea name="" id="" rows=5 cols=10>默认文字</textarea>

- 下拉菜单

下拉菜单：需要用
```
select
```
和
```
option
```
两个标签嵌套结合使用。
- select 和 option 都是 双标签，文本级别标签。
- 嵌套关系： select–> option
- select : 表示搭建下拉菜单的整体结构。
- option：表示下拉菜单中的每一项。

注：下拉菜单默认显示的是第一个选项。

如果想让某一项作为默认显示，则需要给这个option标签添加一个selected属性。属性值为selected

   你的选择是：
    <select name="" id="">
        <option value="">小姐姐1号</option>
        <option value="" selected="selected">小姐姐2号</option>
        <option value="">小姐姐3号</option>
    </select>

- 其他杂碎的知识点

1. 注释

写法
```

```

2. 字符实体

: 全称：non-breaking space 空格、

< ：全称 : less-than 小于号 <

> : 全称: greater-than 大于号 >

字符实体：以 & 开头，以；结尾

码农公寓