锐单电子商城 ， 一站式电子元器件采购平台！

  • 电话：400-990-0325

购物车

【Web】HTML学习笔记

时间：2023-03-13 22:30:00 7jb4继电器3th2040

目录

  • 一、HTML简介
    • 1. 官方介绍
    • 2. 互连网原理
    • 3. 服务器
    • 4. 浏览器
  • 二、认识HTML
  • 三、HTML骨架
    • 1. HTML骨架完整写法
  • 四、HTML语法规则
    • 1. 双标签
    • 2. 单标签
    • 3. 标签级别*****
      • 3.1 文本级标签
      • 3.2 容器级标签
    • 4. 标签属性
  • 五、标签
    • 1. h系列标签
    • 2. p标签
    • 3. img标签
      • 3.1 相对路径
      • 3.2 绝对路径
      • 3.2 其余属性
    • 4. a标签
      • 4.1 a其他使用标签
  • 六、列表
    • 1. 无序列表
    • 2. 有序列表
    • 3. 定义列表
  • 七、布局标签
  • 八、表格
  • 九、表单元素
    • 1. form
    • 2. 文本框
    • 3. 密码框
    • 4. 单选按框
    • 5. 复选框
    • 6. 按钮
    • 7. 文本域
    • 8. 下拉菜单
  • 十、补充知识点
    • 1. 注释
    • 2. 字符实体

一、HTML简介

后台语言：java、php、.net等等。开发服务器语言。

前端语言：web、iOS、Android等。用于开发前端语言。

web到底是什么？可以理解为：在网站上制作精美的网页。

1. 官方介绍

  • HTML自1990年以来，全称超文本标记语言，HTML它一直被用作万维网的信息表示语言HTML需要通过描述文件web浏览器显示效果。
  • HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly成立于1990年的标记语言
  • 万维网组织：规定网页制作需要哪种语法
    在这里插入图片描述

2. 互连网原理

互联网原理：用户端和服务器端传输数据。
用户端：打开浏览器，在地址栏中输入网站，按下会议车，并向淘宝服务器（另一台电）发出请求。
服务器端：服务器端接收请求，响应响应，用户端接收响应数据，浏览器渲染后，用户可以看到精美的网页。

3. 服务器

服务器：英文全称server
服务器:只要是功能性能比较好的电脑，就可以当服务器。
服务器功能：服务器的主要功能是向客户端（其他人）响应服务器上的文件。
注：任何类型的文件都可以放置在服务器上。
比较有名的服务器软件：只要您的电脑安装了这个软件，您的电脑就可以用作服务器，
其他人可以通过(浏览器、网络)访问文件。
apache了解服务器软件：


了解链接

4. 浏览器

由我们的前端人员制作的精美网页需要在浏览器中运行。
常用浏览器：谷歌，IE、火狐，欧朋，sofari等等。谷歌浏览器是我们以后学习时常用的。
不同的浏览器是由不同的公司创建的。不同的浏览器也有自己的版本号，比如【IE6、IE7、IE8…】

功能：可向服务器端发起请求，缓存浏览数据，渲染数据。

  • 服务器端发起请求:在用户地址栏中输入网站，按下返回车辆(需要网络)即可发起请求。
  • 缓存用户浏览的数据：例如，用户第一次访问某个网站比较慢，第二次访问这个网站会比较快。
  • 浏览器可以接受服务器端的相应数据，用户可以通过浏览器看到网页。

如何查询浏览器缓存数据：

  1. 打开谷歌浏览器

  2. 输入地址栏chrome://version，按下回车

  4. 在您的电脑中找到相应的盘符下文件夹，您可以看到缓存数据。

二、认识HTML

我们已经了解到，制作网页需要通过.html创建文件。.html文件也属于纯文本文件。

HTML:英文全称，Hyper Text Markup Language，超文本标记语言。
超文本：这些文件不仅可以显示文本、图片、视频和音频。
标记：标记可以理解为标签，标签可以语义化地描述网页。

注：文本内容显示在网页上，编辑器中的标签在网页上是看不见的。
问题：h标签的作用是什么？
错误答案:让文字大小变大。
正确答案:插入网页(静态页)h标签，代表意思，是将一级标题插入网页。
含义(所谓语义)。

三、HTML骨架

在制作网页时，我们需要遵守万维网络语法规则。HTML开发骨架下。
HTML骨架采用四组标签嵌套组合：
html标签：是整个网页的根标签，网页制作的其他标签，必须在其中书写。html
head标签:英文意思，头，代表网页头，可以设置网页标题，其他一些设置。html=>head
title标签:英文意思，标题，可以设置网页头部标题。html=>head=>title
body标签:英文意思，身体，网页的主要部分都是在这个标签里写的。html=>body

  • 标签在网页上是看不见的，但在网页上显示文本内容是可以看到的。
  • 可嵌套使用标签。
  • title标签作用：①收集网站时，标题 ②用户可以搜索网站排名作为关键词。

1. HTML骨架完整写法

DOCTYPE html> ① <html>  <head>  <meta charset="utf-8">	②
	<meta name="viewport" content="width=device-width, initial-scale=1">	③
	<title>title>
head>
<body>

body>
html>

1，它是一个标识符，代表你使用的是HTML5骨架。
2，meta标签，英文含义，元，它拥有一个属性charset【字符集】，属性值utf-8,防止汉字出现乱码。
3，device-width和device-height指显示器的尺寸，这告诉移动设备，将视区视为具有设备的物理宽度相同的宽度。
而且，它还告诉iPhone、iPod touch和iPad在计算宽度时考虑方向。



四、HTML语法规则

我们已经知道，制作网页必须在HTML骨架下进行开发。如果你想搭建一个完整的网页，务必掌握标签知识点。
可以进行网页搭建。
标签：双标签、单标签。

1. 双标签

双标签：拥有开始、和结束的标签，称之为双标签。

<h1>我是网页中显示文字内容h1>

2. 单标签

单标签：单标签，只有开始标签，没有结束标签。以及没有网页显示文字内容部分。

<hr/>

3. 标签级别*****

在HTML超文本标记语言中，标签分为级别的，有容器级别、文本级别标签。

3.1 文本级别标签

文本级别标签：常用的有p、span、img、表单元素等等。

这类文本级别标签：网页显示内容部分一般只能插入文字、或者是其他级别文本标签，否则将来学习样式的时候，网页布局会受到影响的。

 <p>
	     <span>我是一个spanspan>
p>

3.2 容器级别的标签

容器级别标签：常用的有div、h1、dl、dt、dd、ul、ol、li等等。

这类容器级别标签：网页显示内容部分可以插入任意内容（文字、文本级别标签），或者是其他容器级别标签也可以。

<h1>
          我是容器级别的标签网页内容显示部分什么都可以插入
          <p>我是文本级别标签,可以嵌套在容器级别标签里面p>
          <p>我是文本级别标签,可以嵌套在容器级别标签里面p>
h1>

注意：
文本级别标签：内部不能出现容器级别标签。
容器级别标签：内部可以出现文本级别标签。

4. 标签属性

标签可以添加属性，属性是由两部分组成，属性名和属性值两部分组成。标签属性可能对于整个网页有影响，或者对于某一个标签是由影响的。

<h1 class="box">h1>
  • 标签可以添加属性：属性是由两部分组成属性名和属性值
  • 右侧属性值外层需要加上一对双引号【千万别一双、一单的】，属性值一般是由英文、数字、横线组成、或者一起其他特殊字符。

五、标签

1. h系列标签

英文全称headline，汉语意思标题。

  • h系列标签，代表在网页中显示内容是一级~六级标题
	<h1>我是一级标题h1>
	<h2>我是二级标题h2>
	<h3>我是三级标题h3>
	<h4>我是四级标题h4>
	<h5>我是五级标题h5>
	<h6>我是六级标题h6>

  • h系列标签是容器级别标签：可以插入任意内容【文字、文本级别标签、其他容器级别标签】
<h1>
		我是h1标签里的内容
		<p>我是一个段落p>
h1>
  • h系列标签，在网页布局的时候，他们都是兄弟姐妹关系，不能是父子关系。
  • 一般页面当中只能有一个h1标题，因为在HTML语言当中，根据不同的标签重要程度。分权重。
  • h1权重，最高的,一般网页logo使用h1标题。

2. p标签

英文全称paragraph，中文含义的是段落。我们可以使用p标签在网页中显示一个段落。

p:双标签、文本级别标签。

<p>我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
	我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
	我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落p>
	<p>我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
	我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
	我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落p>
	<p>我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
	我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
	我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落p>
  • p标签，它是一个双闭合标签，文本级别标签。
  • 文本级别标签：网页显示内容部分，可以是文字、其他类型文本级别标签。
  • 但是不能插入容器级别标签。
	  <p>
            <h1>我是容器标签，不能放在文本标签里面h1>
	  p>

3. img标签

img：英文全称，image。汉语含义是图片、图像。

作用：这个标签的作用是可以在网页中显示图片。我们还需要知道图片格式：jpg、png、gif

标签级别：文本级别标签，在使用的时候，你把它当中一个文字使用即可。单标签。

img标签可以用来在网页中显示图像。如果设置图片的src属性【没有属性值】。网页中是观看不到图像的。

绿色部分：属性值，需要的是图片文件的路径。

<img src="C:\Users\yang\Desktop\1658211540254.jpg">

常用属性:

  • src：英文全称【source】，主要的作用是设置路径（网页中要显示图片的文件路径）
  • width：汉语意思，宽度，主要的作用是设置图片的宽度。
  • height：汉语意思，高度，主要的作用是设置图片的高度。
  • title:汉语意思，标题，主要的作用是当用户鼠标移到图片上的时候显示的提示文字。
  • border:汉语意思，边框，主要的作用是设置图片外层边框的宽度。
  • alt:主要的作用是设置当图片没有图像的时候，用文字进行替代。

img标签，单闭合标签，术语文本级别标签

注意：路径分为两种：相对路径、绝对路径。

3.1 相对路径

计算语言当中一种术语，说白了，就是文件和文件相对路径关系写法而已。

=========================================================

比如：①图片文件和网页.html文件 ===========>同一级

写法：src属性值写法，图片文件的名字 + 文件尾缀

DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>title>
head>
<body>
	<img src="0.jpg">
body>
html>

=========================================================

比如：②图片文件和网页.html文件 ===========>下一级 ***********

	<img src="images/0.jpg">
  • src属性值写法：先找到和网页(.html)文件，同级的文件夹，加上冲左测的反斜杠。
  • 反斜杠可以理解为进入，书写图片的文件的名字以及文件尾缀。

=========================================================

比如：③图片文件和网页.html文件=========>上级关系

	<img src="../../0.jpg">

注意：…/ 代表当前文件所在文件夹的上一级文件夹。

3.2 绝对路径

注意：相对路径我们讲了三种情况。主要掌握图片是网页的下级这种情况。其余两种情况。几乎百年不遇。

绝对路径写法：2种

  • 从盘符出发找到图片绝对路径。
  • 可以使用别人网站图片，直接使用网址。
DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
head>
<body>
	 <img src="C:/Users/Administrator/Desktop/案例/0.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585986096185&di=f4d6d113574a028cccfb4d503efca10d&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F15%2F20171015094202_BHwPK.jpeg">
body>
html>

3.2 其余属性

<img src="0.jpg"/>
  • 如果图片没有设置width、height属性，网页显示的是原始图片默认宽度和高度。
<img src="0.jpg" width="200px"/>
  • 如果图片设置width属性，网页中显示的图片宽度即为你width这个属性值设置属性值宽度（高度等比例放大、缩小）。
  • width属性值是由数字+px（pixel：像素）单位。
<img src="0.jpg" height="300px">
  • 如果图片设置height属性，网页中显示的图片高度即为你height这个属性设置的高度（宽度等比例放大、缩小）。
  • height属性的属性值是由数字+px（pixel：像素）单位。
<img src="0.jpg" width="100px" height="100px" />
  • 如果图片width和height属性同时设置，图片显示的就是你width和height设置的数值。
<img src="1.jpg" border="20px">
  • border这个属性，可以给图片外层添加一个外边框。默认黑色
  • border属性值：数字+px(pixel：像素)单位
<img src="0.jpg" title="我是二哈" />
  • title这个属性值，当用户鼠标移到图片上面的时候，显示提示文字
  • title属性值：任意字符。
<img src="658211540254.jpg" alt="没有图像">

  • alt这个属性：当img标签，没有src属性的时候才会有用。因为img标签不设置src属性，网页中是没有图像的。
  • alt:当没有图像的时候，默认显示文字。
  • alt:任意字符。

4. a标签

英文全称【anchor】，汉语意思锚。

a标签，俗称超链接，它主要的作用是可以设置不同网页进行跳转，或者同一个网页中不同位置进行跳转。

a：双标签，文本级别标签。

常用属性：

href：当前网页即将跳转的另外一个网页地址（相对路径、绝对路径）。
title:设置用户鼠标以上的时候，提示文字。

<a href="http://www.baidu.com">跳转到百度a>
<a href="010p标签使用.html">相对路径文件a>
<a href="http://www.taobao.com" title="我爱你">淘宝a>

4.1 a标签其他使用

我们程序员可以通过a标签，实现同一个网页中。不同两者位置进行跳转。
使用情况：

  • 第一步设置一个锚点：
    设置锚点：任意标签都可以当做锚点，锚点的标签，需要添加一个id属性。
    锚点的id属性值，一般情况下都是英文、数字、横线、下划线等等，最好别使用汉字。
<h1 id="cur">我是一个锚点h1>
  • 第二步：设置锚点链接
    设置锚点链接：锚点链接标签使用的是a标签，锚点链接a标签，需要有一个href属性，
    锚点链接href属性值，是由#加上锚点id的属性值组成。

注意：多个锚点的id属性值别重名。

	<p>我是一个段落p>
	<p id="cur">我是一个段落=====设置锚点p>
	<p>我是一个段落p>
	<p>我是一个段落p>
	<p>我是一个段落p>
	<p>我是一个段落p>
	<p>我是一个段落p>
	<p>我是一个段落p>
	<p>我是一个段落p>
	<a href="#cur">跳转到我是一个段落=====设置锚点a>



六、列表

列表描述：有一个黑色容器、容器当中有一项一项小表在展示网页内容。

列表会将网页中结构相同，内容相关、样式(外观、外貌)类似的结构，可以利用列表进行搭建。

Web领域当中：无序列表、有序列表、定义列表。

1. 无序列表

无序列表作用是可以在网页中搭建一个没有书序列表。

在使用无序列表的时候需要使用两个标签配合才可以使用。分别ul、li

ul:unorder list,表示的是一个列表容器、大结构。

li:list item,表示的是容器当中每一项。

ul标签内部只能嵌套li标签，li标签不能脱离ul标签单独使用。li需要嵌套在ul里面。ul>li

ul的里面可以有多个li标签。

<ul>
        <li>红楼梦li>
        <li>西游记li>
        <li>三国演义li>
        <li>水浒传li>
ul>

ul和li标签都属于容器级别标签，li标签里面可以放置任意内容。甚至还可以放置ul>li

<h1>四大名著h1>
		<ul>
			<li>红楼梦li>
			<li>
				<h2>西游记h2>
				<ul>
					<li>猪八戒li>
					<li>唐僧li>
					<li>孙悟空li>
					<li>沙僧li>
				ul>
			li>
			<li>三国演义li>
			<li>
				<h2>水浒传h2>
				<p>武松p>
				<p>武大郎p>
			li>
		ul>

2. 有序列表

作用：搭建一个有顺序的列表结构。

在使用有序列表的时候，需要结合两个标签一起使用。分别是ol、li。

ol:order list,表示的是一个容器，大结构。

li:list item,表示的是容器、大结构的每一项。

ol标签内部只能嵌套li,li标签不能脱离ol标签单独使用，ol>li。

ol内部可以有多个li标签。

<h1>世界上国土面积排行h1>
	 <ol>
       	  <li>俄罗斯li>
       	  <li>加拿大li>
       	  <li>中国li>
       	  <li>美国li>
	 ol>

ol和li标签，都属于容器级别标签，li标签里面任意内容都可以放置。

<h1>世界上国土面积排行h1>
		<ol>
			<li>俄罗斯li>
			<li>加拿大li>
			<li>
				<h2>中国h2>
				<ol>
						<li>新疆li>
						<li>西藏li>
						<li>蒙古li>
				ol>
			li>
			<li>美国li>
		ol>

3. 定义列表

定义列表在使用的时需要结合三个标签一起使用，dl、dt、dd。

dl:definition list，相当于列表最外层容器、大结构。

dt:definition term,表示列表主题或者术语。

dd:definition description,表示的对于主题、术语一个解释。

在使用定义列表的时候dt标签需要嵌套dt、dd一起使用。而dt和dd术语兄弟级别关系。

<dl>
		<dt>长城dt>
		<dd>长城（The Great Wall），又称万里长城，是中国古代的军事防御工程，是一道高大、坚固而连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。dd>
dl>

一个dl标签内部可以有多组dt、dd。

 <dl>
        <dt>长城dt>
        <dd>长城（The Great Wall），又称万里长城，是中国古代的军事防御工程，是一道高大、坚固而连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。dd>
        <dt>北京故宫dt>
        <dd>北京故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。dd>
dl>

每一个dt的后面可以同时又多个dd

 <dl>
        <dt>长城dt>
        <dd>长城（The Great Wall），又称万里长城，是中国古代的军事防御工程，是一道高大、坚固而连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。

相关文章