HTML基础

最新推荐文章于 2022-07-18 16:50:10 发布

置顶黄敢敢i

最新推荐文章于 2022-07-18 16:50:10 发布

阅读量697

点赞数 1

分类专栏：学习文章标签： html

本文链接：https://blog.csdn.net/weixin_43729330/article/details/108681048

版权

学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

参考：https://www.runoob.com/html/html-tutorial.html

Wed 概念概述及HTML基础~

JavaWed

使用java语言开发基于互联网的项目

Java Web 其实b就是一个技术的总和,把Web看成一个容器而已主要使用JavaEE技术来实现.在加上各种中间件(SSH等) JavaWeb其实做什么都可以,你可以通过JavaWeb制作一个软件,一个ERP,一个网页,甚至是一个网络游戏都可以。

软件架构

1、 C\S ： Client / Server 客户端 / 服务器端

在用户本地有一个客户端程序，在远程有一个服务器端程序
是计算机软件协同工作的一种模式
如：QQ、迅雷、我们手机中安装的微信、qq、王者荣耀等应用程序就是C/S结构。
优点：用户体验好
缺点：开发、安装、部署、维护麻烦
C\S结构图：

在这里插入图片描述

2、 B/S : Browser / Server 浏览器 / 服务器端

只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序
在手机或电脑上用浏览器上百度搜索、看新闻等就是在使用“B/S”结构进行数据交互。
优点：开发、安装、部署、维护简单
缺点：
1、如果应用过大，用户的体验可能会受到影响

2、对硬件的要求过高

B\S结构图：

B/S架构详解

资源分类

1. 静态资源

   使用静态网页开发技术发布的资源。

   特点： 所有用户访问，得到/看到的结果是一样的

   	如：文本、图片、音频、视频、**HTML、CSS、JavaScript**

   	如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。

   	浏览器内置了静态资源的解析引擎，可以展示静态资源

   	HTML：用于搭建基础网页，展示页面的内容

     CSS   ：用于美化页面，布局页面

   	   JavaScript  ： 控制页面的元素，让页面有一些动态的效果

2. 动态资源

使用动态网页技术发布的资源。

特点：所有用户访问，得到/看到的结果可能不一样

如：JSP  /   servlet  、PHP  、asp...

 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，

再发送给浏览器 （浏览器只能去解析静态资源）

HTML

1. 概念 ：最基础的网页开发语言

                 Hyper Text  Markup Language  超文本标记语言

     超文本：是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本

     标记语言：由标签构成的语言。<标签名称>  如 html  ，xml 

                       标签语言不是编程语言

   

2. 快速入门：

   语法：

     html 文档后缀名 ： .html  或者  .htm

       标签分为：

   1. 围堵标签   ：有开始标签和结束标签。如` <html> </html>`
   2. 自闭和标签  ：开始标签和结束标签在一起。如`<br/>`  换行标签

         标签可以嵌套：
                需要正确嵌套，不能你中有我，我中有你
                正确：`<a><b></b></a>`
         在开始标签中可以定义属性。属性由键值对构成，值需要用引号（单双都可）引起来

最基础的html代码：

<html>
	<head>
		<title></title>
	</head>
	<body>
		<font color="blue"> Hello World </font><br/>
	</body>
</html>

<html> 标签告知浏览器这是一个 HTML 文档 , 是 HTML 文档中最外层的元素。
<body> 标签定义文档的主体 , 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）
<title> 标签定义文档的标题 ,一个 HTML 文档中不能有一个以上的 <title> 元素。
<head> 头标签，用于指定html 文档的一些属性，引入外部资源。

文本标签

和文本有关的标签

<h1> <h6> 标题标签

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

<p></p> 段落标签

<p>这是一个段落。</p>

<br/> 换行标签

<p> 
使用 br 元素<br>在文本中<br>换行。 
</p>

<hr> 显示为一条水平线。标签定义 HTML 页面中的主题变化（比如话题的转移）
<hr> 的属性 color ：颜色 width ：宽度 size ：高度
align ：对齐方式 ——> center 居中、 left 左对齐 right 右对齐

<hr color= "red" width="200" size="10" align="left"/>

<b> 字体加粗

<p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p>

<i> 字体斜体

<p>He named his car <i>The lightning</i>, because it was very fast.</p>

<font> 字体标签

<font face="verdana" color="green">这是一些文本!</font>

 注释

<!--这是一个注释，注释在浏览器中不会显示-->

图片标签

<img> 图片标签
相对路径的表示方法：
以 .开头的路径 * ./: 代表当前目录 * ../: 代表上一级目录

列表标签

<ol> 定义一个有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul> 定义一个无序列表

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

链接标签

<a></a> 链接标签

href ：指定访问资源的URL（统一资源定位符）
target ：指定打开资源的方式
_self :默认值，在当前页面打开
_ blank : 在空白页面打开

 <a href="https://www.runoob.com">这是一个链接</a>            <!--在当前页面打开-->
 <a href="https://www.runoob.com" target="_blank">这是一个链接</a>   <!--在空白页面打开-->
<a href="./本地标签.html"> 本地标签</a>       <!--打开本地标签-->

div 和 span

<div> 标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。块级标签
每一个div占满一整行。块级标签
<span> 用于对文档中的行内元素进行组合。行内标签，内联标签
文本信息在一行展示

语义化标签

html5 中为了提高程序的可读性，提供了一些标签。

<header> 标签定义文档或者文档的一部分区域的页眉。
注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

<footer> 标签定义文档或者文档的一部分区域的页脚。

表格标签

<table> 定义表格
<tr> 定义行
<td> 定义单元格
colspan : 合并列
rowspan : 合并行

<th> 定义表头单元格

表单标签

<form> 用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

属性： 1、action : 指定提交数据的URL
2、methon：指定提交方式
分类：一共7种，2种比较常用
get ： 请求参数会在地址栏中显示，会封装到请求行中
请求参数大小/长度是有限制的
不太安全
post : 请求参数不会在地址栏中显示，会封装在请求体中
请求参数的大小/长度没用限制
较为安全
表单项中的数据要想被提交：必须指定其name属性

* 表单项标签：
	* input：可以通过type属性值，改变元素展示的样式
		* type属性：
			* text：文本输入框，默认值
		 			* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息	
					* password：密码输入框
					* radio:单选框
						* 注意：
							1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
							2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
							3. checked属性，可以指定默认值
					* checkbox：复选框
						* 注意：
							1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
							2. checked属性，可以指定默认值
					* file：文件选择框
					* hidden：隐藏域，用于提交一些信息。
					* 按钮：
						* submit：提交按钮。可以提交表单
						* button：普通按钮
						* image：图片提交按钮
						* src属性指定图片的路径	

		   * label：指定输入项的文字描述信息
			  	 * 注意：
				 * label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
		* select: 下拉列表
			* 子元素：option，指定列表项
			
		* textarea：文本域
			* cols：指定列数，每一行有多少个字符
			* rows：默认多少行。