HTML基础篇笔记

、系统结构：

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

Browser支持的语言：HTML、CSS、JavaScript；S是服务器端Server支持的语言有：C、C++、Java等
B/S架构系统有什么优点和缺点？ 优点：升级方便，只升级服务器代码即可，维护成本低。缺点：速度慢、体验不好、界面不炫酷
企业大部分使用B/S架构
B/S架构的系统代表有：京东、百度、天猫等

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

C/S架构的优点和缺点？
优点：速度快、体验好、界面炫酷（娱乐性多数是C/S架构）
缺点：升级麻烦、维护成本较高。
C/S架构的系统代表有：QQ、微信、支付宝等

2、 HTML概述

① 什么是HTML？② 怎么开发HTML？③ 怎么运行HTML?

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

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

•超文本：图片、声音、视频等

② HTML开发使用普通的文本编辑器就行，创建扩展名是.html或.htm

•编辑器有：HBuilder、vscode等

③ 直接采用浏览器打开HTML文件就能运行

④ HTML是谁制定的？

④ W3C：世界万维网联盟

•W3C制定了HTML的规范：每个浏览器生产厂家都会遵守规范。HTML也会按照规范去写代码

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

•我们现在主要学的HTML4.0（基本用法）

为了方便中国Web前端程序员开发，提供了大量帮助文档。为开发提供方便。

•w3school：先出现的，和W3C无关

•w3cschool：后出现的，和W3C无关

•W3C制定了很多规范：HTML/XML/http协议/https协议……

3、第一个HTML

4、基本标签

p：段落标记
h1~h6：标题字，与word的标题字相同
br：换行标记（独目标记）
hr：横线（独目标记）
color：横线颜色
width：横线宽度（可以px和%）
pre：预留格式
del：删除字
ins：插入字（有下划线）
b：粗体字
i：斜体字
sup：上标
sub：下标
font：字体标签
color：字体颜色
size：字体大小（1~7）

页面效果图：

5、实体符号：为了避免和标签冲突，所以需要使用实体符号

<：<
>：>
空格：
注：html中按多个空格键，在网页中只显示一个空格。

6、HTML表格

table：表格
tr：行
td：列
th：列（比td加粗居中）
合并行：rowspan（一个格占两个位置）
注：row合并的时候，删除下面的单元格
合并列：colspan（一个格占两个位置）
注：col合并的时候，删除哪个没有要求

7、thead、tbody、tfoot标签

thead、tbody、tfoot不是必须的，便于后期JS编写。

8、body的背景颜色和背景图片

bgcolor：背景色
background：背景图片
背景图片在背景色的上面

9、img标签

src：图片的路径
只设置width，height会等比例缩放
只设置height，不起作用
title：鼠标悬停时显示的信息
alt：设置图片加载失败时显示的提示信息

10、超链接或热链接

href：hot references 热引用；
后面一定是一个资源的地址。
后面的路径可以是绝对路径也可以是相对路径，可以是网络某个资源的路径。
target：
_blank：新窗口
_self：当前窗口（默认）
_top：顶级窗口
_parent：父级窗口

超链接的作用：

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

11、request与response的概念

request：浏览器向服务器发送数据（请求）
B --》S
response：服务器向浏览器发送数据（响应）
S--》B

12、列表

有序列表：ol
type：1、A、a、I、i
无序列表：ul
type：circle（○）、square（□）、disc（●）

13、表单（重点）

action：写提交的URL地址
method：默认get；还有post
表单有什么用？
答：收集用户的信息。表单展现之后，用户填写表单，点击提交。（submit）
怎么画一个表单？
答：用form标签
一个网页可以有多个表单form
表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址。
action属性用来指定数据提交给哪个服务器
action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
http://192.168.111.3:8080/oa/save 这是请求路径，
表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。
input中的type取值:
radio：单选控件
checkbox：多选控件
submit：提交控件
reset：重置控件
button：普通控件
text：文本控件
password：密码控
file：文件控件
上传文件专用
hidden：隐藏域
网页上看不到，但是表单提交的时候数据会自动提交给服务器。
input中的value属性用来指定按钮上显示的文本信息。
超链接a与表单form的区别？
答：表达form可以收集信息，而超链接a无法收集信息。
表单提交里面的按钮input中属性必须定义name，不然提交不了。
表单是以什么格式提交数据给服务器的？
格式：action?name=value&name=value&name=value..
HTTP协议规定的，必须以这种格式提交给服务器
java中String split('&');
重点强调：表单项写了name属性的，一律会提交给服务器。不想提交就不要写name属性。
文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
当name没有写的时候，该项不会提交给服务器
但是当value没有写的时候，value的默认值是空字符串"",将空字符串提交给服务器。java代码得到的是：String s = "";

效果图：

地址栏提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我没有value属性；&position=ln&myFile=&myHidden=

14、表单的说明：

① 用户手动输入的文本框，都不需要给value赋值
② textarea没有value属性
③ radio、checkbox默认选项需要使用，checked="checked"（简写：checked）
④ select中的option属性：• selected="selected" 为默认选中 •size：显示条目数量
multiple="multiple" 支持多选(select的属性)
⑤ input的属性
readonly和disabled：
都是只读不能修改
数据不会提交
maxlength：设置文本框中输入的字符数量。

15、HTML中的结点

在HTML文档中，任何元素（结点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档中id值不能重复。
注意：表单提交数据的时候，只和name有关系，和id无关
id有什么作用？
javascript语言：可以对HTML文档中的任何节点进行增删改操作。
获取节点时，通常通过id来获取节点
HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id（DOM树）

16、div和span

div和span有什么用？
div和span都可以称为图层。
有什么用？
图层的作用为了保证页面可以灵活的布局。
div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
div和span的区别？
di独占一行
span不会独占一行

TML标签：

基本标签：

<html></html>双标签开头结尾 HTML标签为最大的标签称为根标签

<head></head> 文档头部标签且必须设置title

<title></title> 页面标题

<body></body> 文档的主体包含页面的内容

<h1>-<h6> HTML提供6个等级的页面标题有大到小

<p></p> p标签用于定义段落可以将页面分为若干个段落根据窗口大小自动换行

<br/>单标签换行标签（break打断）

格式化标签：

加粗 <strong></strong>or<b></b>

斜线 <em></em>or<i></i>

删除线 <del></del>or<s></s>

下划线 <ins></ins>or<u></u>

div和span标签：

没有语义属于一种盒子来装内容

<div></div> 表示分割分区用来布局一行一个大盒子

<span></span>意为跨度，跨距一行可以哦有多个小盒子

图像标签：

<img src="图像路径(url)"/> 定义页面中的图像

图像标签包含多个属性

src 图片路径必须属性

alt 文本替换文本图像不能显示的文字

title 文本鼠标放到图像上显示文字

width 像素宽度

height 高度

border 边框

相对路径和绝对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

分类：下级路径/ 上级路径../

绝对路径：是指目录下的绝对位置，如硬盘中的路径或网路地址

超链接标签：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href用于指定链接目标的url地址(必须属性)

target用于指定链接打卡方式 _self为默认值 _blank为在新窗口打开方式

锚点链接：可以快速到页面某个位置

在链接文本中的href属性中，设置属性值为#名字的形式，如<a href="#two">目标</a>

找到目标位置标签，里面添加一个id属性 = 名字，如：<h3 id="two">目标</h3>

注释：

快捷键CTRL + /

特殊字符：

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
		半个空白位
		一个空白位
		不断行的空白

表格标签：

<table></table> 是用于定义表格的标签

<tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中

<tb></tb> 用于定义表格的单元格，必须嵌套在<tr></tr>标签中

<td> 元素中的文本通常是普通的左对齐文本。字母td指表格数据(table data)，即数据单元格的内容

表头单元格标签：

<th>标签表示HTML表格的表头部分 <th> 元素中的文本通常呈现为粗体并且居中。

表格属性：

align left center right 规定表格相对于周围元素的对齐方式
border 1or"" 规定表格单元是否拥有边框默认为"",表示没有边框

cellpadding 像素值规定单元边沿与其内容的空白，默认1像素

cellspacing 像素值规定单元格直接的空白默认2像素

with 像素值or百分比规定表格的宽度

合并单元表格方式：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

列表标签：

<ul>标签表示无序列表里面只能包含li

<ol>有序标签里面只能包含li

<li>相当于一个容器定义列表项与<ui>or<li>嵌套使用 li里面可以包含任何标签

<dl>标签用于定义描述列表(或自定义列表),该标签会与<dt>(定义项目和名字)和<dd>(描述每一个项目名字)一起使用

表单标签：

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist> New	指定一个预先定义的输入控件选项列表
<keygen> New	定义了表单的密钥对生成器字段
<output> New	定义一个计算结果

<input>标签用于收集用户信息包含一个type属性可以有多种样式

<input type="属性值" />

属性值：

button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

<label>标签

<label> 标签为 input 元素定义标注（标记）。 label是标注的意思

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同

详情可参考

https://www.runoob.com/ 菜鸟教程

https://www.w3school.com.cn/ w3c

.标题标签：<h1> </h1>

2.段落标签：<p> </p>

3.水平线标签：<hr/>

4.换行标签：<br/>

5.div span标签：两者无语义，相当于一个盒子，用来布局。两者区别：<div></div>会自动换行。

6.文本格式化标签：<b> </b> <strong> </strong> 粗体

<i> </i> <em> </em> 斜体

<s> </s> <del> </del> 加删除线

<u> </u> <ins> </ins> 加下划线

7.标签属性：<标签名属性1="属性值1" 属性2="属性值2">内容</标签名>

8.图像标签：<img />

属性属性值

src 路径

alt 文本（图片不显示时显示的文本）

title 鼠标经过时的悬浮文本

width 宽度

height 高度

border 边框宽度

9.链接标签：<a href="目标" target="窗口弹出方式"> </a>

瞄点定位：<a herf="#id名"> </a> <h3 id="文本"> </h3>

target="-self"本窗口弹出

target="-blank"打开新窗口弹出

class与id区别：class不唯一，id唯一

10.base标签：<base target="-blank">

此标签必须放在<head> </head>里

11.常见特殊字符：&nbsp 空格

&lt 小于号

&gt 大于号

&copy 版权

12.注释标签：

13.路径：

相对路径：同一级 <img src="文件名" />

下一级<img src="下一级文件名/文件名">

上一级<img src="../文件名"/>(上两级../../，依次类推)

绝对路径："D:wen\word"或"http://www.baidu.com"

14.列表

无序列表：<ul>

......

</ul>（ul里不可放其他标签，li里可以放其他标签，后者同理）

有序列表：<ol>

......

</ol>

自定义列表：术语，名词的解释描述

<dl>

......

</dl>

在线咨询

上一篇：新手建站无需购买服务器10分钟快速部署你的静态网页
下一篇：简单小程序：登录页面（html）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML基础篇笔记

、系统结构：

2、 HTML概述

3、 第一个HTML

4、基本标签

5、实体符号：为了避免和标签冲突，所以需要使用实体符号

6、HTML表格

7、thead、tbody、tfoot标签

8、body的背景颜色和背景图片

9、img标签

10、 超链接或热链接

11、request与response的概念

12、列表

13、表单（重点）

15、HTML中的结点

16、div和span

TML标签：

基本标签：

格式化标签：

div和span标签：

图像标签：

超链接标签：

注释：

特殊字符：

表格标签：

列表标签：

表单标签：

<label>标签

您的项目需求

3、第一个HTML

10、超链接或热链接