HTML学习笔记

最新推荐文章于 2024-09-14 22:18:26 发布

少不入川。

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量895

点赞数 4

分类专栏：前端文章标签：前端 html

本文链接：https://blog.csdn.net/qq_52002412/article/details/123604840

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

1.系统结构
2.HTML

1.系统结构

1.1 B/S架构

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

Browser支持的语言：HTML CSS JavaScript

Server后端有很多语言：C、C++、Java、Python

1.1.1 优点

升级方便，只升级服务器代码即可

1.1.2 缺点

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

1.1.3 常见代表

京东、百度、天猫

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

1.2 C/S架构

1.2.1 缺点

升级麻烦，维护成本高

1.2.2 优点

速度快、体验好、界面炫酷。（娱乐性的系统多是C/S架构的。）

1.2.3 常见代表

QQ、微信、支付宝

2.HTML

2.1 概念

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

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

<标签1>
	<标签2>
		<标签3 属性名1=”属性值“ 属性名2=”属性值“>
        
        </标签3>
    </标签2>
</标签1>

2.2 开发

使用普通的文本编辑器就行，创建的文件扩展名是 .html或者 .htm

HTML也有专业的开发工具：DreamWeaver、HBuider

2.3 运行

运行直接使用浏览器打开HTML文件就行

2.4 第一个HTML

<!--
    1.这是HTML的注释
    2.加上以下代码就表示HTML5语法，去掉就表示HTML4
	3.HTML语法松散，对大小写要求不严格
-->
<!doctype html>
<!--根-->
<html>

    <!--头-->
    <head>
         <!--网页标题，显示在网页左上角-->
        <title>网页标题</title>
    </head>

    <!--体-->  
    <body>
        网页的主体内容，欢迎学习HTML！
    </body>

</html>

2.5 基本标签

2.5.1 段落标记

<p>段落1</p>

2.5.2 标题字

<h1>一级标题<h1>
<h2>二级标题<h2>
<h3>三级标题<h3>
<h4>四级标题<h4>
<h5>五级标题<h5>
<h6>六级标题<h6>

2.5.3 换行标记

Hello<br>World

网页展示效果：

Hello
World

2.5.4 横线，独目标记

<!--color和width都是hr的属性 -->
<!--属性右边单引号双引号都可以  -->
<hr color="red" width="50%">

网页展示效果：

2.5.5 预留格式

<!--当我们想让我们输入的东西以我们看到的格式保留在网页上，就可以使用预留格式-->

<pre>
	H
	e
	l
	l
	o
	!
</pre>

网页展示效果：

	H
	e
	l
	l
	o
	!

2.5.6 删除字、插入字、粗体字、斜体字

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

网页展示效果：

~~删除字~~
插入字
粗体字
斜体字

2.5.7 右上角、右下角加字

<!--比如10的2次方-->
<!--右上角-->
10<sup>2</sup>
<!--右下角-->
10<sub>2</sub>

网页效果展示：

10²
10₂

2.5.8 字体标签

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

网页效果展示：

字体标签

2.6 实体符号

<!--
	实体符号的特点是：以&开始，以;结束
	&lt;是小于号
	&gt;是大于号
	&nbsp;是空格
-->

2.7 表格

2.7.1 基本表格

<!--这是表格
	border表示边框像素大小
	width表示表格的宽度，60%表示宽度总是窗口的60%大小
	height表示高度，150px也是像素大小
	align表示对齐方式，对table、tr、td通用
		其中参数值可为：left center right
-->
<table align="center" border="1px" width="60%" height="150px">
    
    <!--tr是行，这是2行
		td是每行的格子，下面的代码中每行有2个格子
	-->
    <tr>
        <td>a</td>
    	<td>b</td>
    </tr>
    <tr>
    	<td>c</td>
    	<td>d</td>
    </tr>
    
</table>

2.7.2 单元格合并

<!--
	首先找到要和合并的单元格
	其次找到合并单元格下面的单元格的td标签
	然后使用rowspan

	注意事项：
		row合并的时候要删除“下面的”单元格，而col合并的时候没有要求。
-->
<table>
    <tr>
        <td>a</td>
        
        <!--这里表示的是将单元格b和d合并-->
    	<td rowspan="2">b</td>
        
    </tr>
    <tr>
    	<td>c</td>
    	<!--
		<td>d</td>
		-->
    </tr>
</table>


<table>
    <tr>
        <!--
        <td>a</td>
        -->
        
        <!--这里表示的是将单元格a和b合并-->
    	<td colspan="2">b</td>
        
    </tr>
    <tr>
    	<td>c</td>
		<td>d</td>
    </tr>
</table>

2.7.3 th标签

th标签和单元格标签一样，多的是加粗和居中。在实际的使用中，一般来说一张表的第一个<tr>标签中，会以<th>开头。

2.7.4 thead、tbody、tfoot

这三个标签可有可无，这样做会让我们的结构更加清晰，也方便后期 JS代码的编写。

2.8 背景颜色和背景图片

<!DOCTYPE html>
<html>
	<head>
		<!--下面这句表示让浏览器用什么编码打开-->
		<meta charset="utf-8">
		<title>背景颜色和背景图片</title>
	</head>
		<!--
			bgcolor设置背景色
			背景色在图片下面
			background设置背景图片
		-->
		<body bgcolor="black" background="imagine/6d1ffde61ff84984a225945dd3383da0.jpg">
	</body>
</html>

2.9 图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片</title>
	</head>
	<body>
		<!--
			1.设置图片高度的时候只设置width，高度会等比例的缩放，手动设置会导致失真
			2.img标签就是图片标签
			3.src属性是图片的路径
			4.width设置宽度，height设置高度
			5.title设置戍边悬停图片上时显示的信息。
			6.alt设置图片加载失败时显示的提示信息
		-->
		
		<!--如果开始标签和结束标签中不填写文本信息，可以采用下面的写法省略结束标签-->
		<img src="imagine/001.jpg" width="100px" title="这是张图片" alt="图片信息丢失"/>	
		
	</body>
</html>

2.10 超链接

2.10.1 基础

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		
		<!--href:hot reference
			该属性后面一定是一个资源地址
			
			超链接的特点：
				有下划线
				鼠标停留在超链接是上鼠标指针会变成手提示点击
				点击链接以后话可以跳转页面
		-->
		<a href="https://www.baidu.com">百度</a>
		
        <!--图片超链接-->
        <a  href="https://www.baidu.com/">
			<img src="imagine/002.png" width="120px">
            target="_self"
		</a>
        <!--target是超链接的属性之一
			可取值：
				_blank:点击超链接跳转新窗口
				_self:当前窗口跳转超链接（默认）
				_top:顶级窗口
				_parent:父窗口
		-->
        
	</body>
</html>

2.10.2 超链接的作用

1、通过超链接可以从浏览器向服务器发送请求。

2、浏览器向服务器发送数据（请求：request）

3、服务器向浏览器返回数据（相应：response）

B/S系统的结构每一个操作都会对应一个响应。不管是在浏览器输入URL还是点击超链接本质上都是向服务器发送请求。相对而言，超链接更加方便。

2.11 列表

2.11.1无序列表

		<!--无序列表-->
		<!--type是列表的属性
			该属性有三个可选值：
				disc：实心圆
				circle：空心圆			
				square：表示方块
				其等级由上往下
		 -->
		<ul type="disc">
			<!-- li表示列表项 -->
			<li>北京
				<!-- 嵌套使用，列表里面套列表 -->
				<ul>
					<li>海淀区
                    	<ul>
                            <li>DEMO</li>
                        </ul>
                    </li>
					<li>朝阳区</li>
				</ul>
			</li>
		</ul>

网页展示效果：

北京
- 海淀区
  - DEMO
- 朝阳区

2.11.2 有序列表

<!-- 无序列表 -->
		<!--
			type的可选值有四个
			1：以阿拉伯数字为序号
			A：以大写的英文字母为序
			a：以小写的英文字母为序
			i：以大写的罗马数字为序
			I：以小写的罗马数字为序
		-->
		<ol type="1">
			<li>水果
				<ol>
					<li>苹果</li>
					<li>桃子</li>
				</ol>
			</li>
			<li>蔬菜
				<ol>
					<li>西红柿</li>
					<li>土豆</li>
				</ol>
			</li>
		</ol>

网页展示效果：

水果
1. 苹果
2. 桃子
蔬菜
1. 西红柿
2. 土豆

2.12 表单

2.12.1 前提了解

表单可用于收集用户信息，用户填写表单，点击提交按钮后，将信息交给服务器。
表单的语法：<form>表单</form>
网页中可以有多个表单

<!-- 表单是需要给服务器的，属性action是用来填写url地址的 
		form表单method属性：
			get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
			post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
			当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。
-->
		
		<form action="http://192.168.111.3:8000/oa/save" method="method">
			<!-- 输入域标签 -->
			<!-- 
				这里type和value都是输入域标签的属性
				value表示的是按钮上展示的文本，对于submit默认value为”提交“
				
				type表示按钮的类型
				type有很多个值。下面我只展示常用的
				button:普通按钮
				checkbox:复选框
				submit:提交按钮（将表单提交给服务器）
				text:文本框
				password:密码框
				radio:单选按钮
				reset:清空
			-->
			<input type="" value="普通按钮"/>
			<!-- 超链接与表单类似，但是表单具有将信息提交给服务器的功能 -->
			<input type="submit" value="提交按钮"/>
			<!-- 为了整齐起见，我们可以在form里面嵌套table，再将按钮填充到表格里 -->
			
		</form>
<!--下拉列表-->
<!--
	表单中还有一个标签表示下拉菜单
	option标签表示菜单内的选项
	下拉列表有一个属性multiple。multiple=“multiple”表示支持多选，size设置显示条目数量。
			<select multiple=“multiple”，size="2"> 
				<option>河南省</option>
				<option>河北省</option>
				<option>湖北省</option>
				<option>湖南省</option>
			</select>
-->

下拉列表多选展示

<select multiple=“multiple”，size=“2”>
河南省
河北省
湖北省
湖南省

2.12.2 实例演练：做一个简单的用户登录页面

<!--
	表单是以什么格式提交数据给服务器的？
				http://localhost:8080/jd/login?username=abc&userpwd=111
				格式：action?name=value&name=value&name=value&name=value&name=value...
				W3C的HTTP协议规定的，必须以这种格式提交给服务器。
			
			重点强调：表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。
					
			文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
			
			当name没有写的时候，该项不会提交给服务器。
			当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。

-->		

		<form action="http://localhost:8080/jd/login">
			<table>
				<tr	align="center">
					<td>用户名</td>
					<td><input type="text" name="username" /></td>
				</tr>
				<tr	align="center">
					<td>密码</td>
					<td><input type="password" name="userpwd" /></td>
				</tr>
				<tr align="center">
					<td colspan="2">
						<input type="submit" value="登录" />
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="reset" value="清空" />
					</td>
				</tr>
			</table>
		</form>

网页展示效果：

	<form action="http://localhost:8080/jd/login">
		<table>
			<tr	align="center">
				<td>用户名</td>
				<td><input type="text" name="username" /></td>
			</tr>
			<tr	align="center">
				<td>密码</td>
				<td><input type="password" name="userpwd" /></td>
			</tr>
			<tr align="center">
				<td colspan="2">
					<input type="submit" value="登录" />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="reset" value="清空" />
				</td>
			</tr>
		</table>
	</form>

2.12.3 用户注册的表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册的表单</title>
	</head>
	<body>
		<!--
			用户注册：
				用户名
				姓名
				密码
				确认密码
				性别
				兴趣爱好
				学历
				简介
			
			form表单method属性：
				get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
				post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
				当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。
			
			method属性不指定，或者指定get，这种情况下都是get。
			只有当method属性指定为post的时候才是post请求。
			剩下所有的请求都是get请求。
			
			post提交的时候提交的数据格式和get还是一样的，只不过不再地址栏上显示出来。
			POST提交的数据还是：name=value&name=value&name=value.....
		-->
		<form action="http://localhost:8080/jd/register">
			用户名
			<input type="text" name="username"/>
			<br>
			密码
            <!-- 下面这个输入域没有value，因为它输入的值就是value -->
			<input type="password" name="userpwd" />
			<br>
			确认密码
			<input type="password"/>
			<br>
			性别
			<input type="radio" name="gender" value="1" />男
           	<!-- check修饰的单选按钮表示默认被选中 --> 
			<input type="radio" name="gender" value="0" checked/>女 <!--单选按钮的value必须手动指定-->
			<br>
			兴趣爱好
			<input type="checkbox" name="interest" value="smoke"/>抽烟
			<input type="checkbox" name="interest" value="drink" checked/>喝酒
			<input type="checkbox" name="interest" value="fireHair" checked/>烫头
			<br>
			学历
            <!-- 这里的select标签表示下拉菜单 -->
			<select name="grade">
                <!-- option标签表示菜单内的选项 -->
				<option value="gz">高中</option>
				<option value="dz">大专</option>
				<option value="bk" selected>本科</option> <!--默认选中-->
				<option value="ss">硕士</option>
			</select>
			<br>
			简介 <!--文本域，文本域没有value属性，用户填写的内容就是value，通过设置rows和cols可以限制字数-->
			<textarea rows="10" cols="60" name="introduce"></textarea>
			<br>
			<input type="submit" value="注册" />
			<input type="reset" value="清空" />
            
		</form>
		
		<!--超链接也可以提交数据给服务器，但是提交的数据都是固定不变的。-->
		<!--超链接是get请求。不是post请求。-->
		<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
		
		
	</body>
</html>

<!--
http://localhost:8080/jd/register?username=jack&userpwd=111&gender=1&interest=smoke&interest=drink&grade=ss&introduce=jackgoodman
-->

2.12.4 file控件

<!--用来上传文件-->
<input type="file" />

2.12.5 hidden控件

<input type="hidden" name="userid" value="111"/>

隐藏域，网页上看不到，但是表单提交的时候数据会自动提交给服务器。

2.12.6 readonly和disabled

<!--
	readonly和disabled相同点：都是只读不能修改。
	但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交。）
-->
<form action="http://localhost:8080/taobao/save">
	用户代码<input type="text" name="usercode" value="110" readonly />
	<br>
	用户姓名<input type="text" name="username" value="zhangsan" disabled />
	<br>
	<input type="submit" value="提交数据" />
</form>

2.12.7 maxlength

<!-- maxlength设置文本框可输入的字符数量 -->
<input type="text" maxlength="10">

2.13 HTML中元素的id属性

<form id="1">
    <input type="text" id="2">
</form>

在HTML中，任何一个元素都有一个唯一标识（id）
表单在提交时跟id没有关系
JavaScript可以对html文档中的任意节点（元素）进行增删改查操作，id就是为了方便我们查找节点
HTML文档是一棵树，树上有很多节点，每个节点都有唯一的id。JavaScript主要就是为了操作这颗dom树。

请添加图片描述

2.14 div和span

2.14.1 作用

div和span都可以成为图层，其目的是为了更i灵活的布局。图层就是一个一个的盒子，div嵌套div就是盒子套盒子。

最早的网页都是使用table进行布局，但是table不灵活。现代的网页开发中div布局使用最u都，几乎很少使用table进行布局。

div和span都可以定位，只要定下其左上角的xy坐标即可。div和span的区别就是：div独占一行，而span不行。

少不入川。

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录