HTML-新手入门

article/2025/11/5 8:12:29

HTML系统结构

（1）

B/S架构：Browser / Server （浏览器/服务器的交互形式）

Browser支持哪些语言：HTML、CSS、 JavaScript

B/S架构的优缺点：

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

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

常见系统：京东、百度、天猫

（2）

C/S架构：Client / Server （客户端/服务器端的交互形式）

C/S架构的优缺点：

优点：速度快，体验好，界面炫酷

缺点：升级麻烦，维护成本较高

常见系统：QQ、微信、支付宝

**

HTML语法结构

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

    <标签><标签 属性名="属性值" 属性名="属性值"></标签></标签></标签>                          （结束标签）超文本: 流媒体、图片、声音、视频....

**

HTML开发工具与规范

开发HTML工具：

(1)文本编辑器，文件扩展名为 .html或 .htm

(2)DreamWeaver、HBulider…

运行HTML：

直接采用浏览器打开HTML文件

HTML的制定：

W3C：世界万维网联盟

W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。

HTML程序员也会按照这个规范去写代码。

HTML规范目前最高的版本是：HTML5.0，简称H5

前端网站帮助
提供大量文档：w3school、w3cschool
**

HTML基础结构

 <!doctype html><!--此行表示HTML5的语法，去除为H4--><html> <!--根--><head></head> <!--头--><title>网页标题</title><!--网页标题，显示在网页左上角--><body><!--体-->网页主体内容</body></html>

注意：HTML不区分大小写，语法不严格，最好具体写
**

HTML标签

（1）段落标签

<p>一段一段一段一段</p><p>一段一段一段一段</p>`

**

（2）标题字标签

h1~h6 从大到小

<h1>标题</h1> 
<h2>标题</h2>
<h3>标题</h3>	
<h4>标题</h4>	
<h5>标题</h5>
<h6>标题</h6>

**

（3）换行标签（独目标签）

<br>

**

（4）横线标签（独目标签）

属性：color（颜色）、width（宽度）

<hr>
<hr color="red" width="50%">
<!--颜色红色，宽度50%的线，居中--> 
<hr color='blue' width=30%>	
<!--"" '' 不用都可以-->

**

（5）预留格式

（写什么样子呈现出什么样子）

<pre>for;;;;;;sssss
</pre>

显示为：for;;;;;;sssss

**

（6）字体标签

（1）

<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>

显示为：
在这里插入图片描述
**
（2）
sup标签是字体右上加字
sub标签是字体右下加字

10<sup>2</sup>
10<sub>m</sub>

显示为
在这里插入图片描述
**
（3）
改变字体颜色、大小用font标签
属性：color（颜色）、size（大小）

<font color=red size=50>字体标签</font>

显示为：
在这里插入图片描述
**

HTML实体符号

（1）大于小于号

实体符号特点是：以&开始，以；结束
&lt是小于号，&gt是大于号（l和g按照箭头方向指向）

b&lt;a&gt;c  
<!--显示为b<a>c-->
<!--因为大于小于号和<>冲突，所以使用此符号来区分-->

**

（2）空格号

&nbsp：空格

 abc        def <!--直接加空格不显示--><!--正确写法如下-->
abc&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efg

**

HTML表格

（1）普通表格

1.table是表格 tr是行 td是列
2.align是HTML中的一个设置文本或者图片对齐方式的标签,center是align的一个属性值，表示居中，center是align的属性值。
3. border=“1px” 设置表格的边框为1像素宽度，width（ 宽度），height （高度）

   <body><center><h1>列表</h1></center><!--让标题居中--><hr> <!--横线--><table align="center" border="1px" width="30%" height="150px"><tr align="center"> <一行的数据都居中><td>a</td><td>b</td><td>d</td></tr><tr><td>e</td><td>f</td><td align="center">g</td><!--g居中--></tr><!--两行三列--></table></body>

显示为：
在这里插入图片描述
**

（2）合并表格

1.row（行）合并的时候，删除“下面的”的单元格
2.col（列）合并的时候，删除哪个无所谓

	    <tr><td>员工编号</td><td>员工薪资</td><td>部门名称</td></tr>

3.th标签也是单元格标签，比td多的是居中、加粗

  <body><center><table border="1px" width="50%"></center><!--border="1px" 设置表格的边框为1像素宽度--><!--width="50%"设置表格占页面总体宽度50%，可以随页面变化--><tr><th>员工编号</th><!--th居中加粗--><th>员工薪资</th><th>部门名称</th></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td rowspan="2">6 9</td><!--rowspan-行合并--></tr>	    <tr><td colspan="2" >7 8 </td>  <!--colspan-列合并--></tr></table></body>

显示为：
在这里插入图片描述
**

（3）thead tbody tfoot

thead tbody tfoot在table中不是必须的，只是便于后期的JS代码的编写

格式如下：

<!--头-->
<thead><tr><th>员工编号</th><th>员工薪资</th><th>部门名称</th></tr></thead><!--体-->
<tbody><tr><td>e</td> <td>f</td><td>g</td></tr></tbody><!--脚-->
<tfoot> <tr><td>h</td><td>i</td><td align="center">j</td></tr>
</tfoot>

**

HTML背景颜色和背景图片

   bgcolor:设置背景色background:设置背景图片以上的设置都是对背景进行设置注意：图片过小，背景会呈现重复现象

<html><head><meta charset="utf-8"><!--告诉浏览器用哪一种字符编码方式打开这个文件，并不是设置这个文件的字符编码方式--><!--文件用的是什么编码方式，就写哪种 GBK是简体中文--><title>HTML背景颜色和背景图片</title></head><body bgcolor="red" background="ing/111.jpeg"><!--图片是相对路径-->	</body>
</html>

**

HTML图片

1.设置图片的高度和宽度的时候，只设置宽度，高度会进行等比例缩放
2.img标签就是图片标签
3.src属性就是图片的路径
4.width设置宽度，height设置高度
5.title设置鼠标悬停时显示的信息
6.alt设置图片加载失败时显示的提示信息

<body><img src="ing/111.jpeg" width="100px" title="我是图片" alt="图片找不到"><br><br><br><img src="ing/111.jpeg" ><br><br><br><img src="in/111.jpeg"  alt="图片找不到">
</body>

**


http://chatgpt.dhexx.cn/article/DKNUiiWu.shtml

相关文章

nginx多域名及https配置（Tomcat服务器）

nginx多域名及https配置（Tomcat服务器）

主域名配置 二级域名配置 详细配置 #user nobody; worker_processes 1;#error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024; }http {include mime.typ…
阅读更多...
IIS配置HTTPS

IIS配置HTTPS

1&#xff0c;新建网站&#xff0c;选中类型为 https&#xff0c;然后更改SSL证书为你配置的SSL证书&#xff0c; 对于SSL证书的配置是这样的 点开第二步&#xff0c;然后点击 创建自签名证书 确定以后点开网站看到有个SSL&#xff0c; 双击进去&#xff0c;再选中 要求SS…
阅读更多...
配置HTTPS全过程

配置HTTPS全过程

HTTPS配置全过程 服务器配置https协议 HTTPS&#xff0c;是以安全为目标的HTTP通道&#xff0c;简单讲是HTTP的安全版。即HTTP下加入SSL层&#xff0c;HTTPS的安全基础是SSL&#xff0c;因此加密的详细内容就需要SSL。 配置HTTPS就需要证书&#xff0c;关于证书方面不做过多…
阅读更多...
linux配置https

linux配置https

背景说明 服务器为阿里云 ecs&#xff0c;操作系统为 centos 6.5。 部署配置说明 第一步&#xff0c;安装nginx 之所以要先安装 nginx&#xff0c;是因为下面配置域名解析的时候可以直接在浏览器看到效果&#xff0c;当然了&#xff0c;先配置域名&#xff0c;然后 ping 一…
阅读更多...
nginx配置https访问

nginx配置https访问

01、http&https HTTP&#xff08;HyperText Transfer Protocol&#xff1a;超文本传输协议&#xff09;是一种用于分布式、协作式和超媒体信息系统的应用层协议。 简单来说就是一种发布和接收 HTML 页面的方法&#xff0c;被用于在 Web 浏览器和网站服务器之间传递信息。 …
阅读更多...
IIS 配置 HTTPS

IIS 配置 HTTPS

前言 HTTPS&#xff08;全称&#xff1a;Hyper Text Transfer Protocol over Secure Socket Layer 或 Hypertext Transfer Protocol Secure&#xff0c;超文本传输安全协议&#xff09;&#xff0c;是以安全为目标的HTTP通道&#xff0c;简单讲是HTTP的安全版。使用SSL证书&…
阅读更多...
群晖 Docker Gitlab 安装 及 https配置

群晖 Docker Gitlab 安装 及 https配置

群晖 Docker Gitlab 安装 及 https配置 安装 新建共享文件夹gitlab&#xff0c;创建下级目录/config /logs /data 修改权限完全控制 Docker下载镜像 配置存储位置及端口 启动容器 配置 https配置 在gitlab/config/目录下新建文件夹ssl将阿里云SSL证书文件放到ssl下&…
阅读更多...
SpringBoot配置https

SpringBoot配置https

为什么要把网站转为https&#xff1f; https是网络数据传输协议&#xff0c;也就是说www的网站在传输数据的时候&#xff0c;都必须遵守这个协议&#xff0c;遵守统一的标准的协议&#xff0c;有利于数据更好的传送&#xff0c;而https则可以理解为是http的升级版或者安全版本…
阅读更多...
nginx 代理 http、https 配置

nginx 代理 http、https 配置

nginx 代理 http、https 配置 http配置ssl https 配置 nginx 部署安装在之前的文章中已有教程&#xff0c;这里不再叙述&#xff0c;详情访问&#xff1a;nginx在centos7环境下安装本文主要讲述配置代理&#xff0c;包含http 、https代理&#xff0c;配置文件在 nginx 安装目录…
阅读更多...
服务器https配置

服务器https配置

1.登录阿里云后台: https://www.aliyun.com 在右上角"产品与服务"->“证书服务” 在证书列表,点击右上角"购买证书"->选择免费证书 返回证书列表, 选择刚刚申请的证书, 点击右边的"补全" 补全资料 等待审核通过之后下载配置证书 选…
阅读更多...
Charles 抓包 Https 配置指南

Charles 抓包 Https 配置指南

一、说明 在做客户端开发的时候大家一定经常用到抓包工具去抓接口排查调试&#xff0c;非常的简捷方便。Charles 是一款非常好用的抓包工具&#xff0c;我在日常开发中也很喜欢用其进行接口联调、问题排查。 以前的客户端接口请求大多是 Http 传输的&#xff0c;抓接口直接配…
阅读更多...
Charles抓https配置

Charles抓https配置

环境:window10、charles4.6.1、ios14.4 1、第一步&#xff1a;pc安装证书 注意&#xff1a;证书存储的位置要选择‘受信任的根证书颁发机构’ 2、第二步&#xff1a;手机浏览器打开chls.pro/ssl下载安装证书 注意&#xff1a;下载安装完证书后&#xff0c;还需要如下设置 3、…
阅读更多...
Tomcat配置Https

Tomcat配置Https

前言&#xff1a; 对于tomcat配置https还是挺简单的&#xff0c;首先你需要一个网站证书&#xff08;里面包含了公钥和私钥&#xff09;&#xff0c;这个证书相当于钥匙&#xff0c;但是https证书是需要花钱买的&#xff0c;我们在练习模拟不需要花钱买&#xff0c;可以使用 j…
阅读更多...
Tomcat详解（七）——Tomcat使用https配置实战

Tomcat详解（七）——Tomcat使用https配置实战

今天继续给大家介绍Linux运维相关知识&#xff0c;本文主要内容是Tomcat使用https配置实战。 一、tomcat证书配置 首先&#xff0c;要实现https&#xff0c;就必须先具有tomcat证书。我们在安装tomcat的时候&#xff0c;肯定都先安装了JAVA&#xff0c;而JAVA中有自带的证书生…
阅读更多...
宝塔配置https

宝塔配置https

1. 2.左侧选中ssl&#xff0c;右上选中lets’encrypt 然后申请&#xff0c;结果如图 3.放行443 端口&#xff0c;我的是阿里云&#xff0c;其他云也是一样&#xff0c;要在安全组中出方向&#xff0c;添加开放443 4.宝塔中的设置&#xff0c;也要放行443端口的访问 5.然后用…
阅读更多...
tomcat的https配置（亲测有效）

tomcat的https配置（亲测有效）

tomcat的https配置 1、下载证书2、配置证书1.上传文件到服务器2、编辑conf/server.xml文件 3、配置http自动跳转到https4、最后重启tomcat服务器5、测试 1、下载证书 申请域名并通过审核后就可以下载电子证书 点击选择我的证书 我这里选择免费证书 然后按照提示下载 tomcat 的…
阅读更多...
nginx-http重定向到https配置

nginx-http重定向到https配置

第一步打开服务器找到nginx目录文件&#xff0c;找到nginx.conf文件进行配置 我们只需要找到http所在的那个服务加入一行代码 return 301 https://www.abc.com$request_uri; 就可以将http协议改成https http{include mime.types;server{charset utf-8;listen 443 s…
阅读更多...
Spring Boot 的HTTPS 配置

Spring Boot 的HTTPS 配置

HTTPS 配置 由于HTTPS具有良好的安全性&#xff0c;在开发中得到了越来越广泛的应用&#xff0c;像微信公众号、小程序等的开发都要使用HTTPS来完成。对于个人开发者而言&#xff0c;一个HTTPS 证书的价格还是有点贵&#xff0c;国内有一些云服务器厂商提供免费的HTTPS证书&am…
阅读更多...
https协议配置

https协议配置

前言&#xff1a;https协议配置&#xff0c;一般用于针对政府部门的终端有网络防火墙、网络过滤器等&#xff0c;使系统中的一些请求被拦截&#xff08;劫持&#xff09;&#xff0c;原因一般为在请求头中有存在敏感信息&#xff0c;被网络过滤的监听器发现即拦截&#xff0c;可…
阅读更多...
https配置

https配置

1.https定义： HTTPS（全称：Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。它是一个URI scheme（抽象标识符体系），句法类同http:体…
阅读更多...
推荐文章

Copyright @ 2022~2023