HTML基础

  • A+
所属分类:Web前端
摘要

了解什么是浏览器和服务器。了解浏览器访问网页的原理和请求数据的过程。

目录

〇、基础概念

浏览器和服务器

了解什么是浏览器和服务器。

访问原理

了解浏览器访问网页的原理和请求数据的过程。

什么是URL

了解什么是URL,HTTP协议等内容。

一、认识HTML

1.概念

HTML是超文本标记语言。

2.作用

描述文本语义的,告诉浏览器哪些是标题,哪些是段落,用于描述文本语义的文本,称为标签,并且在浏览器中不会显示,我们称这些文本为“超文本”

3.注意事项

利用标签描述一段文本之后,在浏览器中显示会被放大或加粗,但是要记住它是添加语义的,而不是修改样式的。

二、HTML发展史

1993年IETF发布1.0——1995年W3C发布2.0——2000年W3C发布XHTML——2004年TWG发布HTML5——W3C放弃XHTML。

1.IETF简介

2.W3C简介

三、网页格式

1.HTML基本结构

<!DOCTYPE html> <html lang="en">     <head>         <meta charset="UTF-8">         <title>王清</title>     </head>     <body>      </body> </html> 

​ HTML基本结构所有的标签都是成对出现的,分为开始标签和结束标签。其他所有的标签都写在html标签中。

1.Head标签

作用

给网站添加一些配置信息。

比如网站的标题,图片,关键字,SFO相关的,外挂一些css/js文件。

注意点:写在head内的内容都不会显示给用户查看。

2.Title标签

作用

专门用于指定网站的标题,作为用户保存网页的默认标题。

必须写在head标签内。

3.Body标签

作用

定义html文档中给用户查看的内容。

注意点:一对HTML标签中只能一对body标签。

2.字符集

<meta charset="UTF-8"> ‘写在head里面 

1.meta标签

,指定当前网页的字符集,解决网页没有指定字符集出现的乱码问题。

字符集,就是字符的集合,就像活字印刷术。

2.GBK(gbk2312)与UTF-8区别

GBK(gbk2312)存储的字符比较少,存储了汉字和常用的外文。体积较小。

UTF-8存储了所有的字符。体积较大。

注意点:仅仅指定字符集不一定解决乱码,还要文件的保存编码与指定字符一致。

HTML基础

3.标签分类

单标签

​ 只有开始标签,没有结束标签,如meta标签。

双标签

​ 由<>和</>组成。

并列关系(兄弟/平级)

嵌套关系(父子/上下)

4.DTD文档声明

概念

​ DTD声明在网页第一行,告诉浏览器我们用的哪一个版本的HTML,能够正确的渲染/解析网页。

​ 每一个版本的声明都不一样。

规范

<!DOCTYPE html> “ 不区分大小写 

​ DTD声明不是一个标签。不写也能正常运行。按规定写。

5.开发工具

记事本:提示功能差;

editpus/nodepad:提示功能差。

Dreamwaver:偏向设计。

Sublime:轻量级,自带功能不全,插件丰富。

Webstorm:重量级,自带功能全面。

四、基础标签

注释

W3C网址:www.w3school.com.cn

● 格式

<!--内容--> 

H标签

● 作用

给文本添加标题语义。

● 格式

<h1> 内容</h1> 

● 注意

——H标签包裹的内容会独占一行;

——H标签最多6个,H1最大,H6最小。

——H标签要慎用,H1标签一个界面只能一个,和SFO有关。

P标签

● 作用

段落标记

● 格式

<p>内容</p> 

● 注意

在浏览器中会独占一行。

Hr标签-废弃

● 作用

在浏览器中显示一条分割线

● 格式

<Hr> 

● 注意

在浏览中独占一行。

br标签-废弃

● 作用

换行

● 格式

<br> 

● 注意

——可以连续使用,一个br标签换一行。

——br标签的语义是补灵气一个段落换行,企业开发使用很少。

img标签

● 作用

告诉浏览器显示一张图片

● 格式

<img src="">  'image,source缩写' 

src是图片需要显示的图片名称。

● 注意

——img标签不会独占一行。

——未指定宽高或按照默认的显示。。

——手动指定了宽高,可能会导致图片变形;只指定宽高一个值,会自动计算另一个值,保持等比。

● 属性

——width:宽度

——height:高度

——title:当鼠标悬停到图片,显示什么内容。

——alt:应为alternate的缩写,显示的图片找不到时,显示什么内容。

● 图片路径

src赋值有两种方式。

相对路径

概念

从文件所在的文件夹开始查看。

方法

——同级

​ 图片和html文件存储在同一个文件夹

格式

src = "图片名称"  	‘带后缀 

——下级

​ 存储图片的文件夹和html文件在同一个文件夹。

​ 格式

src = "图片文件夹/图片名称" 

——上级

​ 图片和htnl文件夹在同一个文件夹。

格式

src = "../图片名称" 	'../代表从当前位置找到上一级 

绝对路径

每次都从指定的盘符查找。

格式

src="图片路径/图片名称" 

注意

路径不要出现中文,不能夸盘符,开发中基本不用。

a标签

● 作用

用于控制页面与页面之间跳转。

● 格式

<a href="跳转的目标界面">需要展示给用户的内容</a> 

● 注意

——a标签可以让文字、图片点击。

——a标签必须有href属性,否则抓瞎了。

——Href属性是完整的URL地址或路径。

——可以跳转到网络地址,也可以跳转到本地html文件。

● 属性

——Target:控制如何跳转,有两个属性。

​ _self:用于在当前选项卡中跳转,不新建界面跳转。

​ _blank:用于在新的选项卡跳转。

——title:鼠标悬停提示文本。

base标签

● 作用

专门用来统一指定当前网页中所有的超链接(a标签)如何打开。

● 格式

<base target=""> 

● 注意

——必须写在head标签内。

——如果base和a都指定了,浏览器会按照a指定的执行。

假链接

● 作用

点击之后不会跳转的链接,存在的意义,就是其他界面还未写出时,不知道跳转何处,用来代替。

● 格式

分为两种

<a href="#"></a> <a href="javascript"></a> 

● 区别

—— #:会自动回到网页的顶部。

—— javascript:不会自动回到网页的顶部。

锚点

● 作用

​ 就像目录,点击跳转到页面的指定位置。

​ 要想通过a标签跳转的页面指定位置,必须给a标签添加一个id属性,id属性是跳转到指定地方的id。

● 格式

<a  href="#h2id"> xx</a>      'h2id为id' <br> <h2 id="h2id">内容</h2> 

● 注意

——通过a标签跳转到当面页面指定位置,没有过度动画,一下子跳转到。

——a标签除了 可以跳转到当前指定位置,还可以跳转到其他界面的指定位置。就是在href属性“#”前面加上网页地址。

列表标签

● 列表标签

是给一堆数据添加列表语义,是一个整体。

● 列表分类

有序列表(ordered list),有前后之分,用的最少。

无序列表(unordered list),用的最多。

定义列表(defintion list),其次。

● 无序列表

作用

是给一堆数据添加列表语义,并且无先后之分。

格式

<ul>     	<li>需要显示的条目内容</li>     	 <li>需要显示的条目内容</li> </ul>      

​ ul:unordered list的缩写。

​ li:list item的缩写。

​ 其他标签添加在li标签内,也可以在嵌套ul标签,表示多级列表形式。

应用场景

——新闻列表

——商品列表

——导航条

● 定义列表

格式

<dl>     	<dt>北京</dt>     		<dd>中国的首都</dd>     	<dt></dt>     		<dd></dd> </dl> 

​ dt:definition title的缩写,用来定义列表中的标题。

​ dd:definition description的缩写,用来定义列表对应的描述。

应用场景

——网站尾部的相关信息。

——图文混排。

注意

——成对出现,组合标签。

——一个dt可以没有对应的dd,也可以对应多个dd,推荐对应一个。

——在dt和dd里添加其他标签。

表格标签

是一个时代的代表,以前经常用!

● 作用

​ 给一堆信息添加表格语义,当数据量非常大的时候,是最为清晰的展现形式。

● 格式

<table>     	<tr>     		<td></td>     	</tr> </table> 

​ table:代表整个表格。

​ tr:代表整个表格中的一行数据。

​ td:代表表格中一行中的一个单元格。

● 注意

——表格标签有一个边框属性,决定了边框的宽度,默认是0,看不到;

——是一个组合标签。

● 属性

以下内容作为了解,开发中用CSS修改样式。

——宽度和高度:width/height

​ 给table标签和td标签使用。

​ 默认是按照内容的尺寸来调整的,也可以通过给table标签设置width/height属性手动指定。

​ 如果给td标签设置宽高,会修改当前单元格的宽高,不会影响整个表格的宽高。

——水平对齐:align

​ 水平对齐给table标签、tr标签、td标签都可以使用。

​ 给table设置align属性,控制表格在水平方向的对齐方式。

​ 给tr标签设置align属性,控制当前行所有单元格的对齐方式。

​ 给td标签设置align属性,控制当前单元格内容中的对齐方式。

——垂直对齐:valign

​ 垂直对齐只能给tr和td使用。

——外边距:cellspacing

​ 只能给table标签使用

​ 外边距就是单元格和单元格之间的距离。

​ 默认情况下外边距是:2px。

——内边距:cellpadding

​ 只能给table标签使用

​ 单元格的边框和文字之间的间隙。

——细线表格

​ 通过指定外边距为0是不靠谱的,是2条线合并为一条线。

​ 设置方式:给table设置bgcolor属性颜色,给tr标签设置bgcolor属性颜色,给table设置外边距等于1px。

● 其他标签

——表格标题

​ caption标签 ,必须放到table标签,自动居中。

——列标题

​ th标签。表示为列标题,自动加粗。

——页尾信息

​ tfoot标签。

● 表格结构

表格存储的数据分类

表格的标题

表格的表头

表格的主题

表格的页尾

表格完整结构

<table>     <caption>表格的标题</caption>  	'表格的标题     <thead>     	<tr>         	<th>每一行的标题</th>		'表格的表头         </tr>     </thead>     <tbody>							'表格的数据    		 <tr>         	<td>数据</td>	         </tr>     </tbody>     <tfoot>							'表格的页尾     	<tr>             <td>数据</td>         </tr>     </tfoot> </table> 

注意

——如果没有编写tbody,浏览器会自动添加。

——thead与tfoot,高度不会随着表格高度变化,手动指定也不会变化。

● 单元格合并

水平方向上的单元格合并

​ 方法:td添加colspan属性。向后合并——把某一个单元格当做多个单元格看待。需要注意的是,后面会多出一些单元格,需要手动删掉多出的单元格。

垂直方向上的单元格合并

​ 方法:td添加rowspan属性。

表单标签

● 作用

收集用户信息

● 格式

<form> 	<表单元素> </form> 

表单元素

在HTML中,标签/标记/元素都是指标签,有自己的默认功能。

表单_input标签

● type属性

​ 属性值的不同,决定input各项功能和外观。

type属性值介绍

——明文输入属性:text

——暗文输入属性:password

<input type="text"> <input type="password"> 

——默认值属性:value

<input type="text" value="默认"> 

——单选框属性

​ 默认情况下是不互斥的,要想互斥,必须设置一个name属性,name属性的值要相同,值随便写。

​ 要想设置默认选择某一个,添加checked属性。

<input type="radio" name="X" >男 <input type="radio" name="X" >女 <input type="radio" name="X" checked='checked'>保密 

——多选框属性

​ 要想设置默认选择某几个,添加checked属性。

<input type="checkbox">篮球 <input type="checkbox">足球 

——按钮属性

定义一个普通按钮

​ 作用:配合js完成一些操作。onclick会有弹窗

<input type="button" value="我是按钮" Onclick="alert('弹出提示')" > 

定义一个图片按钮

<input type="image" srce="图片" Onlick="alert('inj')" > 

定义一个重置按钮

​ 作用:清空表单中的数据,有默认的标题。通过value修改。

<input type="reset" value="显示内容"  > 

提交按钮

​ 作用:将表单中的数据提交到远程服务器,条件,需要指定哪个服务器,哪些数据需要提交。

​ 通过form标签的action属性告诉表单,提交的服务器。

​ 通过input的name属性代表的提交的内容。

<input type="submit" value="显示内容"  > 
<form action="服务器地址" > 

——隐藏域:hidden

​ 作用:悄悄咪咪的收集信息。

● HTML5新增类型

仅供了解,很多浏览器不支持。

邮箱——自动校验输入的是否为邮箱格式

<input text="email"> 

域名——校验域名

<input text="url"> 

电话号码——数字

<input text="number"> 

时间——通过日历选择时间

<input text="date"> 

颜色——通过取色版选择颜色

<input text="color"> 

表单-Label标签

默认情况下,文字和输入框是没有关联关系的,如果想点击文字时让对应的输入框聚焦,需要进行绑定,使用Label标签。

● 格式

<form>     <label for ="account">账号:</label><input type="text" id="account"><br>     <label for ="account">密码:</label><input type="password" id="account"><br> </form> 

将文字用label标签包裹起来;

给输入框添加一个ID属性;

将ID属性值赋给label进行绑定。

● 注意

不用id,将文字和输入框整个放到label也可以绑定,但有局限性,不建议使用。

    <label >账号:<input type="text" ></label> 

表单_dalist标签

给输入框绑定待选项。

很多浏览器不支持,仅供了解。

● 格式

<input type"text" list="cars"> <dalist id="cars">     <option>待选项内容1</option>	     <option>待选项内容2</option>	 </dalist> 

给dlist添加一个id属性,将该属性值赋值给input的list属性。

表单_select标签

定义一个下拉列表。

● 格式

<select>     <option>内容1</option>     <option selected="selected">内容2</option> </select> 

可以通过给option添加一个 selected属性更改默认内容。

分组显示格式

<select>     <optgroup label="北京">    		 <option>区1</option>        	     <option selected="selected">区2</option>     </optgroup>     <optgroup label="上海">      	  <option>区1</option>    		 <option selected="selected">区2</option>     </optgroup> </select> 

表单_textarea标签

定义一个可以换行的文本框,多行输入文本框。

● 格式

<textarea></textarea> 

默认,输入框可以无限换行,有默认的宽度和高度。

修改宽高参数,即使指定了也可以无限往下输入,也可以手动拉伸。

不想手动拉伸,通过css修改(reseze:none)。

<textarea cols="列数" rows="行数"></textarea> 

video标签

了解HTML5新增标签,学习浏览器用过的标签,不支持的了解即可,不建议重点掌握学习。

● 作用

播放视频

● 格式

<video src=""   autoplay="autoplay"  controls="controls" >.....</video> 

● 属性

src:视频地址,必须的属性。

autoplay:是否需要自动播放。

controls:是否需要显示控制条。

poster:没有自动播放之前的占位图片等。

<video src=""    controls="controls"  poster="图片地址">.....</video> 

loop:做广告视频,视频播放完毕之后,是否需要循环播放。

preload:预加载视频。(不是自动播放使用)

muted:静音播放

width:视频宽度

height:视频高度

video第二种格式

<video>     <source src="" type="video/webm"></source>     <source src="" type="video/mp4"></source>     <source src="" type="video/ogg"></source> </video> 	 

存在的意义,解决浏览器适配不同视频格式的问题。

● 注意

当前通过video标签,想要浏览器都通过video播放,浏览器必须支持HTML5,不然无法播放;若想所有浏览器都支持,可通过js的media标签。

audio标签

● 作用

播放音频。

● 格式

和video一样。

● 注意

——使用方式基本和video一样。

——有三个属性不能用:height、width、poster。

详情和概要标签

● 作用

利用summary描述概要信息,用details描述详情,默认情况下,是折叠模式。

● 格式

<details>     <summary>概要信息</summary>     详情信息 </details> 

marquee标签

● 作用

跑马灯效果。

● 格式

<marquee>内容</marquee> 

● 属性

滚动方向:direction,上下左右方向控制

<marquee direction="方向控制right、left、up、down">内容</marquee> 

滚动速度: scrollamount

<marquee  scrollamount="数值">内容</marquee> 

循环次数: loop,默认是-1,无限。

<marquee loop="数值">内容</marquee> 

滚动类型:behavior,两个值,slide滚动到边界停止,alternate滚动到边界弹回。

<marquee behavior="alternate、slide">内容</marquee> 

● 注意

——不是W3C推荐的,在其文旦各种查找不到,但各浏览器都支持。

——还可以设置图片滚动。

五、HTML中被废弃的标签

因为当前HTML标签只有一个作用就是添加语义,有部分标签是修改样式的,虽有被废弃了。

1.标签类型

换行

<br> 

分割线

<hr> 

大小

<font> 

文本加粗:bold的缩写。

<b> 

文本添加下划线:underlined的缩写。

<u> 

文本倾斜:italic的缩写。

<i> 

文本删除线:strikethrough的缩写。

<s> 

2.注意

——不到万不得已不能使用。

——如果要使用,一般作为css的钩子来使用。

3.替代标签

strong == b:定义重要性强调的文字。(strong)

ins == u:定义插入的文字。(inserted)

em == i:定义强调的文字。(emphasized)

del == s:定义删除的文字。(deleted)

六、字符实体

在HTML中对空格/tab/回车不敏感,会把空格/tab/回车当一个空格处理。

实体区分大小写哦!

1.空格

&nbsp; 

一个代表一个空格,记得后面还有分号。

2.大于小于

&lt;     ‘less than &gt;	'greater than 

3.版权符号

&copy; 

4.其他

查找吧,网址:https://www.w3school.com.cn/html/html_entities.asp。
------结束-----