html入门详细笔记

时间：2024-01-26 21:35:35

Web的基本概念

什么是Web?

中文翻译“网页”，它是一些列技术的总称，（包括网站的前台布局、后台程序、美工、数据库开发等），我们称它为网页。

Web标准

结构标准（HTML）

网页的结构网页该有什么，（就像一辆车的基本框架结构这辆车该有什么）

表现标准(CSS)

设计网页的版式、颜色、大小外观。主要用CSS实现（就像一辆车的外观和内饰要什么颜色款式，现有的零件拼装成你想要的车）

行为标准（JavaScript）

网页的交互反馈以及动画效果，主要用JavaScript实现。现在的CSS3也能实现简单的动画效果。（框架外观都有了要让车跑起来不然就只能摆着看了）

WWW

www(world wide web, 万维网)不是网络，也不代表Internet,它只提供网页浏览服务

URL

URL(Uniform Resource Locator,统一资源定位符)其实就是Web地址，俗称”网址”比如www.baidu.com就是百度的网址。万维网上的所有文件（HTML、CSS、图片、音乐、视频等）都有唯一的URL。URL可以是“本地磁盘”，也可以是局域网上的计算机。只要知道URL就能访问。

DNS

DNS(domain Name System,域名解析服务)，域名与IP地址是一一对应的。域名（例如www.baidu.com）虽然方便记忆，但是计算机只认识IP地址，将域名转换成为IP就是DNS域名解析。

HTTP

HTTP(Hypertext transfer protocol,超文本传输协议)。规定了浏览器和万维网服务器之间的通信规则。

HTTPS(安全超文本传输协议)。简单来说是HTTP的安全版，是使用TLS/SSL加密的HTTP协议

http和https的区别详细介绍

HTML的基本认识

什么是HTML？

HTML(Hyper Text Markup Language,超文本标记语言)，主要用来对网页中的文本、图片、声音等内容进行描述。它可包含“超级链接”，通过超链接将网站与网页以及各种网页元素链接起来，构成丰富的Web页面

HTML文档的基本格式

HTML文档基本格式：使用Dreamweaver 2020 新建默认文档会自带一些源代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
</body>
</html>
  • <!doctype html> 文档类型声明，向浏览器说明当前文档的html版本和xhtm标准规范。
  • <html> 根标记，用于告知浏览器自身是一个html文档，<html>标志着html文档的开始，</html>标记着HTML文档的结束。
  • <head> 头部标记，用于封装其他位于文档头部的标记，例如<meta>、<title>、<link>、<style>等，用来描述文档的标题、作者以及和其他文档的关系等。
    1. <title>标签用于定义HTML页面的标题，即给网页取名字，必须位于<head>标记内。一个HTML文档只能有一对<title></title>标记
    2. <meta>标记用于定义页面的元信息，可重复出现在<head>头部标记中，在HTML中是一个单标记。<meta>标记本身 不包含任何内容，通过“名称/值”的形式成对的使用其属性可定义页面的相关参数，例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。还有些用法不太理解有机会在回去看,等理解了再补全笔记（手动滑稽)
    3. <link>一个页面往往需要多个外部文件的配合，在<link>标记可引用外部文件，一个页面允许使用多个<link>标记引用多个外部文件。
    4. <style>标记用于为HTML文档定义样式信息，位于<head>头部标签中。在HTML中使用<style>标记时，常常定义其属性为type,相应的属性值为text/css,表示使用内嵌式的CSS样式。
  • <body> 主体标记 浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内，并且<body>标记必须在<html>标记内，位于<head>头部标记之后。

HTML 标记

在HTML页面中，带有“<>”符号的元素被称为HTML标记。所谓标记就是放在“<>”标记符中表示某个功能的编码命令，也被称为HTML标签或HTML元素。

单标记和双标签

  • 双标记由开始和结束两个标记符组成，基本语法格式如下：

    <标记名>内容</标记名>

  • 单标记也称为空间标记，是指用一个标记符号即可以完整地描述某个功能的标记基本语法格式如下：

    <标记名/>

注释标记;

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码是就可以看到。语法格式如下：

标记的属性

如果想让html标记提供更多的信息例如设置文本的字体大小颜色等，仅靠html标记的默认显示样式已经不能满足了，这时可以添加html的属性加以设置。基本语法格式如下：可以拥有多个属性，属性之间空格隔开。

<标记名 属性1 = “属性值1” ……></标记名>

HTML文本控制标记

在一个网页中文字往往占有较大的篇幅，为了让文字能够排版整齐、结构清晰，HTML提供了一系列的文本控制标记。

标题标记<h1>

HTML提供了6个等级标签，从<h5>到<h6>重要性依次递减。基本语法格式如下：

<h1 aliign = "对齐方式">标题文本</h1>

段落标记<p>

在HTML中通过<p>标记来定义段落，其基本语法格式如下：

<p align = "对齐文本">段落文本</p>

水平线标记<hr/>

<hr/>就是创建水平线的标记，其基本语法格式如下：

<hr 属性 = "属性值" />

标记的常用属性（同样适用于文本属性）

属性名 含义 属性值

align 设置水平线的对齐方式 可选择left、right、center、三种值，默认居中
size 设置水平线的粗细 以像素为单位，默认为2像素
color 设置水平线的颜色 可用颜色名称、十六进制#RGB/rgb(r,g,b)
width 设置水平线的长度 可以是确定的像素值也可以是浏览器的窗口百分比，默认100%

例：

<hr size="5px" width="300px" color="blue" align="left"/>

效果：

![1588396313627](HTML Note.assets/1588396313627.png)

换行标记<br/>

一个段落中的文字会一直从左排到最右边才会自动换行，如果想要在某个片段进行换行显示，就需要换行标记<br/>(就相当于一个回车键)。

文本样式标记<font>

HTML中提供了文本样式标记<font>,用来控制网页中文本的字体、字号和颜色。其基本语法如下：

<font 属性 = "属性值">文本内容</font>

<font>标记的常用属性

属性名 含义

face 设置文字的字体，例如微软雅黑、宋体、黑体等
size 设置字体的大小，可以取1到7之间的整数
color 设置文字的颜色

例：

<p><font face="微软雅黑" color="blue" size="5">我是蓝色5号，字体是微软雅黑</font></p>

效果：

我是蓝色5号，字体是微软雅黑

![1588397034527](HTML Note.assets/1588397034527.png)

文本格式化标记

网页中，有时需要为文字设置粗体、斜体或下划线效果，为此HTML准备了专门的文本格式化标记，使文字以特殊的方式显示，常用的文本格式化标记如下：

常用文本格式化标记

标记 显示效果

<b></b>和<strong></strong> 文字以粗体方式显示（XHTML推荐使用strong）
<i></i>和<em></em> 文字以倾斜方式显示（XHTML推荐使用em）
<s></s>和<del></del> 文字以加删除线方式显示（XHTML推荐使用del）
<u></u>和<ins></ins> 文字以加下划线方式显示（XHTML推荐使用ins）

例：

<p>我是正常显示文本</p>
<p><b>我是用b标记加粗的文本</b>，<strong>我是使用strong加粗的文本</strong></p>
<p><i>我是使用i标记倾斜的文本</i>，<em>我是使用em倾斜的文本</em></p>
<p><u>我是使用u带下划线的文本</u>，<ins>我是使用ins带下划线的文本</ins></p>
<p><s>我是使用s带删除线的文本</s>，<del>我是使用del带删除线的文本</del></p>

效果：

我是正常显示文本

我是用b标记加粗的文本，我是使用strong加粗的文本

我是使用i标记倾斜的文本，我是使用em倾斜的文本

我是使用u带下划线的文本，我是使用ins带下划线的文本

我是使用s带删除线的文本，我是使用del带删除线的文本

![1588397640941](HTML Note.assets/1588397640941.png)

特殊字符标记

HTML为类似“<”">"这样的特殊字符准备了相应的替代代码

通过菜单栏中的【插入】→【HTML】→【字符】选项直接插入相应特殊字符代码

<div>标记

div是英文division的缩写，意为“分割、区域”。<div>标签简单来说就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划个布局。<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>.

<span>

​ <span>在CSS定义中属于一个行内元素，<span>与</span>之间只能包含文本和行内标记。<div>为大容器，<span>为小容器，大容器内可以放置小容器。

例：

<div style="width: 500px; margin:0 auto; padding:30px; background: #ccc;">
		<div style="height: 80px; background: #ff0">头部</div>
		<div style="height: 300px; background: #0c0;">内容</div>
		<div style="height: 60px; background: #6cf">页脚</div>
	</div>

效果：

头部
内容
页脚

![1588398531544](HTML Note.assets/1588398531544.png)

HTML图像标记

常用图像格式

  1. GIF格式

GIF最突出的地方是它支持动画，同时也是一种无损图像格式，也就是说修改图片后，图片质量几乎没有损失。但GIG只能处理256中颜色。

  1. PNG格式

PNG最大的优势是体积更小，对颜色过渡更平滑，但PNG不支持动画。

  1. JPG格式

JPG所能显示的颜色比GIF和PNG要多得多，但是JPG是一种有损压缩的图像格式，意味着每一次修改图片都会造成一些图像数据的丢失。JPG是特别为照片图像设计的文件格式。

在网页设计中三种图像格式混合使用各取所长

图像标记

在HTML中使用<img />标记来定义图像，其基本语法如下：

<img src = “图像URL"/>

Src属性用于指定图像文件 的路径和文件名，它是<img/>标记的必需属性。

HTML还为<img/>标记准备了很多其他属性。

标记属性

属性 属性值 描述

src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 数字 设置图像边框宽度
vspace 像素 设置图像顶部和底部的空白（垂直边距）
gspace 像素 设置图像左侧和右侧的空白（水平边距）
align left 将图像对齐到左边
right 将图像对齐到右边
top 将图像的顶端和文本的第一行文字对齐，其他文字局图像下方
middle 将图像的水平中线和文本的第一行文字对齐，其他文字局图片下方
bottom 将图像的底部和文本的第一行文字对齐，其他文字局图像下方

例：

<img src="img/求关注.png" alt="求关注" title="求关注" wideth="200px" hspace="50" vspace="30"/>

效果:
求关注

![1588401548146](HTML Note.assets/1588401548146.png)

图像替换文本属性alt

由于一些原因图像可能无法正常显示，如网速太慢，因此为页面上加上替换文本是个很好的习惯，在图像无法显示的时候告诉用户该图片的内容。

<img src = “图像URL" alt = “图像替换内容"/>

图像提示属性title

title属性用于设置鼠标悬停时显示的提示文字。

<img src = “图像URL" alt = “图像替换内容" title = “鼠标悬停显示内容"/>

图像的宽度、高度属性width、height

width和height属性用来定义图片的宽度和高度，通常我们只设置其中一个，另一个会按原图比例显示。如果同时设置两个属性，图像的显示就可能会变形或失真。

<img src = “图像URL" alt = “图像替换内容" width = “200px"/>

图像的边框属性border

默认情况下图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，但是边框颜色的调整仅仅通过HTML属性是不能够实现的还需要CSS。

图像的边距属性vspace和hspace

在网页中，由于排版需要，有事还需要调整图像的边距。HTML中通过vspace和hspace属性分别调整图像的垂直边距和水平边距;相对浏览器与左边框的距离和与上边框的距离。

相对路径和绝对路径

绝对路径：文件或目录在硬盘上的真正路径有着从盘符到文件的完整地址如（D:/NCVT/IMAGES/LOGO.JPG），或完整的网络地址。

网页中不推荐使用绝对路径，因为网页制作完成要上传服务器，并不能确定绝对的地址。

相对路径：对于当前文件的路径，相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

相对路径三种设置方式：

  1. 图像文件和HTML文件位于同一文件夹：直接输入图像的名称，如

    <img src = “logo.jpg">

    2.图像文件位于HTML的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如

    <img src = “images/logo.jpg">

    3.图像文件位于HTML文件的上一级文件夹：在文件夹名之前加入“../”，如果是上两级，则要使用“../../”,以此类推，如

    <img src = “../logo.jpg">

站点

什么是站点？

站点就是定义一个存放网站中零散的文件的文件夹，方便网站上传维护，内容扩充，对网站移植也有重要作用。

新建站点

点击“站点”-“新建 站点 ”

![1588407595607](HTML Note.assets/1588407595607.png)

![1588407609911](HTML Note.assets/1588407609911.png)

HTML标签描述

<sub>下标<sbp> 上标

例：

<p>
This text contains <sub>subscript</sub>
</p>

<p>
This text contains <sup>superscript</sup>
</p>

效果：

This text contains subscript

This text contains superscript

![1588407045161](HTML Note.assets/1588407045161.png)

<a>超级链接

基本语法格式：

<a href = “跳转目标" target = “目标窗口弹出方式">文本或者图像</a>
  • href用于指定链接目标 的url地址。
  • target用于指定链接页面的打开方式，其值有_self和_blank两种 ，其中_self为默认值，就是在原窗口打开，_blank为在新窗口中打开。
  • title”鼠标经过时显示的内容”

锚点链接

相当于一个跳转，标记一个锚点后可以通过链接跳转到标记这个点，常用在一些网页的返回顶部。

暂时没有确定链接目标时，通常将<a>标记中的href属性值定义为“#”（即href = “#”），表示回到最顶上。

创建连接文本：使用相应的id名标注跳转到目标的位置。

<a href="#id名">连接文本</a>

列表标记

无序列表ul + li

无需列表与各个列表之间没有顺序级别之分，通常是并列的。

基本语法格式：

<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>

有序列表 ol + li

有排列顺序的列表，各个列表项按照一定的顺序排列，例如网页中常见的排行榜等。

基本语法格式：

<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>

自定义列表dl + dt + dd

通常用于对术语或名词进行解释和描述，

基本语法格式：

<dl>
<dt>名词1</dt>
<dd>解释1</dd>
<dd>解释2</dd>
……… 
<dt>名词2</dt>
<dd>解释1</dd>
<dd>解释2</dd>
</dl>**

HTML表格相关标记

创建表格

表格的开始元素是<table>,结束元素是</table>,即所有的表格内容都要位于这两个元素之间。想要创建完整的表格，除了要有表格元素外，还需要有行元素<tr>和单元格元素<td>。创建表格的语法如下:

<tabal>
	<tr>
    	<td>单元格内的文字</td>
      	  ...
    </tr>
    ...
</tabal>

  • <table></table>：用于定义一个表格

  • <tr></tr>：用于定义表格中的一行，必须嵌套在<table></table>标记中，有几对<tr></tr>就表示有几行

  • <td></td>：用于定义表格中的单元格，必须嵌套在<tr></tr>标记中，有几对<td></td>就表示有该行中有多少列

    例：

    <table border="2">
	<tr>
    	<td>第一行第一列</td>
		<td>第一行第二列</td>
    </tr>
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
	</tr>
</table>

    效果：

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

    ![1588412205187](HTML Note.assets/1588412205187.png)

<table标记的属性

属性名 含 义 常用属性值
border 设置表格的边框（默认border="0"无边框） 像素值
cellspacing 设置单元格与单元格边框之间的空白间距（外边距） 像素值（默认为2像素）
cellpadding 设置单元格内容与单元格边框之间的空白间距（内边距） 像素值（默认为1像素）
width 设置表格的宽度 像素值
height 设置表格的高度 像素值
align 设置表格在网页中的水平对齐方式（单元格内容不受影响） left、center、right
bgcolor 设置表格的背景颜色 预定义的颜色值、十六进制#rgb、rgb(r,g,b)
background 设置表格的背景图像 url地址

  • width/height属性

    默认情况下，表格的宽度和高度都是靠自身的内容来撑开的，如果想要更改表格的尺寸就要设置宽高属性，基本语法如下：

    <table width="500" heigth="300">

<tr>标记的属性

没有宽度属性，宽度取决于的宽度
属性名 含 义 常用属性值
height 设置行高度 像素值
align 设置一行内容的水平对齐方式 left、center、right
valign 设置一行内容的垂直对齐方式 top、middle、bottom
bgcolor 设置行背景颜色 预定义的颜色值、十六进制#rgb、rgb(r,g,b)
background 设置背景图像 url地址

例：

<table border="2" width="500" height="100">
	<tr align="center" valign="top"> <!--内容居中靠上显示-->
    	<td>第一行第一列</td>
		<td>第一行第二列</td>
    </tr>
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
	</tr>
</table>

效果：

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

![1588414609014](HTML Note.assets/1588414609014.png)

<td>标记的属性

通过为单元格标记<td>定义属性，可以单独控制某一个单元格。大部分属性与<tr>标记相同，用法也类似，不同的是<td>加入了widt宽度属性，可以控制指定单元格的宽度。同时拥有colspan和rowspan属性用于合并单元格。

属性名 含 义 常用属性值
width 设置单元格的宽度 像素值
height 设置单元格的高度 像素值
align 设置一行内容的水平对齐方式 left、center、right
valign 设置一行内容的垂直对齐方式 top、middle、bottom
bgcolor 设置行背景颜色 预定义的颜色值、十六进制#rgb、rgb(r,g,b)
background 设置背景图像 url地址
colpan 设置单元格横跨的列数（用于合并水平方向的单元格） 正整数值
rowspan 设置单元格竖夸的列数（用于合并垂直方向的单元格） 正整数值

colspan合并列

合并列基本语法如下：

<td colspan="需要合并的列数">表格内容</td>

rowspan合并行

合并行基本语法如下：

<td rowspan="需要合并的行数">表格内容</td>

例：

<table border="2" width="500" height="100">
	<tr>
    	<td colspan="2">第一行第一列</td>
		<td>第一行第二列</td>
    </tr>
	<tr>
		<td>第二行第一列</td>
		<td rowspan="2">第二行第二列</td>
	</tr>
	<tr>
		<td>第三行第一列</td>
		<td>第三行第二列</td>
	</tr>
</table>

效果：

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

![1588415828163](HTML Note.assets/1588415828163.png)

<th>标记及属性

<th>是一个表头标记。<th>标记与<td>标记的区别在于：表头一般位于表格的第一行或者第一列，且<th>标记控制的文本显示默认粗体居中

例：

<table border="2" width="500" height="100">
	<tr>
    	<th colspan="2">第一行第一列</th>	<!--设置为表头-->
		<td>第一行第二列</td>
    </tr>
	<tr>
		<td>第二行第一列</td>
		<td rowspan="2">第二行第二列</td>
	</tr>
	<tr>
		<td>第三行第一列</td>
		<td>第三行第二列</td>
	</tr>
</table>

效果：

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

![1588476865941](HTML Note.assets/1588476865941.png)

表单

一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域三部分组成。

创建表单

<form></form>标记被用于定义表单域，即表单开始和结束的位置，所有的表单元素都要在这对标记之间才有效。

语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
    各种表单控件;
</form>
属性名 含义
action 用于指定接收并处理表单数据的服务器程序的url地址
method method属性用于设置表单的提交方式，其取值为get或post。其中get为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且数据量有限制。而post方式保密性好，并且无数据限制。
name 用于指定表单的名称，以区分一个页面中的多个表单

例：

<form action="#" method="get" name="sign">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>

效果

E-mail:

![1588484290831](HTML Note.assets/1588484290831.png)

表单控件

表单控件为表单的核心内容，不同的表单控件具有不同的功能，如邮件输入文本框、文本域、下拉列表、复选框等4。

input控件

input控件是表单元素中用得最多的一种元素，通常网页中的单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等都是通过input控件定义的。语法格式如下：

<input type="控件类型" />
属性 属性值 描述
type text 文本输入框
password 密码输入框（内容以圆点形式显示）
radio 单选按钮
checkbox 复选框（多选框）
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮(用图片代替默认的按钮)
hidden 隐藏域
file 文件域
name 用户自定义 控件的名称
value 用户自定义 input控件中默认文本值
size 正整数 input控件在页面中的显示宽度
readonly readonly 该控件内容为只读（不能编辑修改）
disabled disabled 第一次加载页面时禁用该控件（显示为灰色）
checked cheked 定义选择控件默认被选中的项
maxlength 正整数 控件允许输入的最多字符数

textarea控件

当定义input控件的type属性为text时，可以创建单行文本框。但是，如果需要输入大量的信息，单行文本输入框就不再适用了，为此html提供了<textararea></textarea>标记。通过textarea控件可以轻松的创建多行文本输入框，语法格式如下：

<textarea cols="每行的字符数" rows="显示的行数">
	文本内容
</textarea>

cols用来定义多行文本输入框中每行的字符数，rows用来定义多恒文本输入框中显示的行数

注意：各浏览器对cols和rows属性的理解不同，当对textarea控件应用cols和rows属性时，多行文本输入框在各浏览器中的显示效果可能或有差异。所以在实际工作中，更常用的方法是使用css的width和height属性来定义多行文本框的宽高

例：

<form action="#" method="post">
		<textarea cols="10" rows="10">
		cols用来定义多行文本输入框中每行的字符数，rows用来定义多行文本输入框中显示的行数
	</textarea>
</form>

效果：

![1588487813358](HTML Note.assets/1588487813358.png)

select控件

下拉菜单控件，例如选择所在的城市，出生年月等。基本语法如下：

<select>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
    ...
</select>

<select></select>标记用于在表单中添加一个下拉菜单，<option></option>标记嵌套在<select></select>标记中，每队<select></select>中至少包含一对<option></option>

标记名 常用属性 描述
<select> size 指定下拉菜单的课间选项数（取值为正整数）
multiple 定义multiple="multiple"时，下拉菜单具有多项选择的功能，方法为按住ctrl键的同时选择多项
<option> selected 定义selected="selected"时，当前项即为默认选中项

例：

<select multiple="multiple">
    学历：
    <option selected="selected">请选择</option>
    <option>博士</option>
    <option>硕士</option>
	<option>本科</option>
    <option>专科</option>
</select>

相关文章