HTML学习 

<!DOCTYPE HTML>
<html leng="en">
 
</html>

<html>

<head>
<title>"为实现中华民族伟大复兴而读书"</title>
</head>

<body>
<h1> 中国 </h1>

<img src ="辛亥革命.png" >
<p>
html分段练习<br /> 分段练习P
</p>
<hr/>
<p>
中华人民共和国万岁
</p>

</body>

</html>
CTRL+SHIFT+K

开始

u 能够说出网页的基本组成

u 能够说出什么是HTML

u 能够说出常用的浏览器

u 能够说出的Web标准的三大组成部分

网友笔记： https://blog.csdn.net/weixin_46170034/category_9694451.html

前期学习：1.网页 2.常用浏览器 3.Web标准

网站是指在因特网上根据一定的规则，使用HTML等制作的的用于展示特定的内容相关的网页集合。

网页是网站中的一页，通常是HTML格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，它通常是由图片、链接、文字、声音、视频等元素组成。以.htm、.HTML为后缀名。

HTML指的事 超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。

HTML是一种标记语言

标记语言是一套标记标签（markup tag）。

第一个HTML练习标记语言

Txt文档输入：

<img src = “辛亥革命.png" />

![img](file:///C:/Users/alen/AppData/Local/Temp/msohtmlclip1/01/clip_image003.png)

1.3网页的形成

前端人员开发代码—— 浏览器显示代码（渲染、解析）——生成最后的Web页面

2.常用浏览器内核

IE Trident

Firefox Gecko

Safari Webkit

Chrome Blink

3.Web标准

Web标准是由W3C组织和其它标准化制定的一系列标准的集合。W3C（万维网联盟）。

3.2Web标准的构成·

结构（structure） 、表现 （presentation）、行为（Behavior）三个方面

结构 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML

表现 表现用于设置网页元素的版式、颜色、大小等外观，主要指的是css

行为 行为是指网页模型的定义及交互的编写，现阶段的主要是Javescripy

Web标准最佳体验方案：结构、样式、行为相分离

简单理解：结构写到HTML文件中，表现写到CSS文件中、行为写到Javascript文件中。

![img](file:///C:/Users/alen/AppData/Local/Temp/msohtmlclip1/01/clip_image005.png)

结构最为重要

HTML标签（上）

学习目标

u 能够说出标签的书写注意规范

u 能够写出的HTML骨架标签

u 能够写出超链接标签

u 能够写出图片标签并说出alt和title的区别

u 能够说出相对路径的三种的形式

![*](file:///C:/Users/alen/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif) HTML语法规范

1.1基本语法概述

1.HTML标签是由尖括号包围的关键词，例如

2.html标签通常是成对出现的，例如和,我们称之为双标签

3.有些特殊的标签必须是单个标签（极少情况），例如
,.我们称为单标签

<html>

 

<head>

<title>"为实现中华民族伟大复兴而读书"</title>

</head>

 

<body>

<h1> 中国 </h1>

 

<img src ="辛亥革命.png" >

<p>

html分段练习<br /> 分段练习P

</p>

<hr/>

<p>

中华人民共和国万岁

</p>

 

</body>

 

</html>

Html练习

<!DOCTYPE html>
<html leng ="en">
	<html>
	<head>
		<title>新时代名族</title>
		
		
		</head>
		<body>
		<h1>发展中国时代特色</h1>
		<h2>新时代的先锋</h2>
		<h3>未来属于青年</h3>
		<P>
		Can you talk about you? <br />
		These days you can learn English!!
		</P>
		
		<hr />
		<p>
			if you are interesting for American,you can go  there!
		</p>
		<img src ="d:/桌面/辛亥革命.png"/>
		<P>
			<a href="./first/index.html">哈哈哈</a>
		<a href =http://www.baidu.com>新时代</a>
		</P>
		</body>
		</html>

1.2标签关系

双标签关系可以分为两类：包含关系和并列关系

![*](file:///C:/Users/alen/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif) HTML基本结构标签

html标签 页面中最大的标签，称之为根标签 <head></head> 文档的头部 注意在haed标签中我们必须要设置的标题是title <title></title> 文档的标题 让页面拥有一个属于自己的网页标题 <body></body> 文档的主体 元素包含文档的所有内容，页面内容 基本都是放到body里面的

![*](file:///C:/Users/alen/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif) 开发工具

visual Studion Code

!+TAB 一键生成

3.网页开发工具

VScode 工具生成骨架标签新增代码
1.<!DOCTYPE>标签

文档类型声明，告诉浏览器使用那种HTML版本来显示网页

  1. 声明位于文档中的最前页的位置，位于标签之前
  2. 不是一个HTML标签，它是文档类型的声明。
2.lang语言
leng= "zh-CN"> 可放在html双标签的第一个标签中，与之对应。

用来定义当前文档显示的语言

1.en定义语言为英语

2.zh-CN定义语言为中文

（可以互相显示）

3.charset字符集

字符集（character set）是多个字符的集合，以便计算机能够识别和存储文字。

<head>标签内，可以通过<meta>标签的charset属性来规定的HTML文档使用哪种字符编码。 <meta charset="UTF-8" /> 万国码
![*](file:///C:/Users/alen/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif) HTML常用标签
4.HTML常用标签
4.2标题标签

-

(重要)

例:

一级标签

标签语义：作为标题使用，并且依据重要性递减

1.一个标题独占一行

4.3段落标签

输入文字

4.4段落和换行标签（重要）

某段文字强制换行显示，用 换行标签

<br />  单标签

braek 打断

4.5文本格式化标签

标签语义：突出重要性，比普通文字重要

粗体、斜体、下划线

加粗 或者

斜体 或者

删除线 或者

下划线 或者

4.5

和标签

注意：

和 是没有语义的，它们就是一个盒子，用来装内容的。

相当于盒子 存入内容（图片、文字）

1.

这是头部

2.今日价格

div是division的缩写，表示分割、分区。span意味跨度、跨距

特点：

1.独占一行

标签用来布局，但是现在一行只能放一个
.大盒子

2.标签用来布局，一行上可以多个。小盒子

中国 美国

4.6图像标签和路径（重点）

1.图像标签

src是 标签的必须属性，它是指定图像文件的路径和文件名。

简单理解：就是属于这个图像标签的特性。

图片显示错误

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

title 文本 提示文本 鼠标放在图像上，显示的文字

<img src= "图片.png" alt="辛亥革命" title=“This is NP” />

width 像素 设置图像的宽度

<img src= "图片.png" alt="辛亥革命" title=“This is NP” width="100" />

height 像素 设置图像的高度

<img src= "图片.png" alt="辛亥革命" title=“This is NP” height="100" />

!一般情况下修改一方，另一方等比例缩放

border 像素 设置图像的边框粗细

<img src= "图片.png" alt="辛亥革命" title=“This is NP” border=“15” />

！添加黑色边框 一般用css设定

4.7图像标签和路径（重点）

1.图像标签

图像标签注意点：

1.图像标签可以拥有多个属性，必须写在标签名的后面（img）

2.属性间不分先后顺序，标签与属性，属性与属性之间以空格隔开

3.属性采取健值对的格式，即key="value"的格式，属性=“属性值”

4.8图像标签和路径（重点）

2.路径（前期铺垫知识）

（1）目录文件夹和根目录

目录文件夹：存放页面所需的素材，比如html、图片等

根目录：打开目录文件夹的第一层就是根目录

2.路径

（2）vscode打开目录文件夹

！方便以后的管理

vscode选择打开文件夹

分类：

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

简单来说，图片相对于HTML页面的位置

相对路径分类 符号 说明

同一级路径 图像文件位于HTML文件同一级， 如

下一级路径 / 图像文件位于HTML文件下一级 , 如

上一级路径 ../ 图像文件位于HTML文件上一级 ,如

2.绝对路径:是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如：“D:\web\img\logo.gif " 或完整的网络地址 "http://www.itcast.cn/'images/logo.gif'.

调用网络图片：<img src =”复制网络图片地址“ / >

4.7超链接标签（重点）

在HTML标签中，标签用于定义超链接，作用是从一个页面链接到另一个页面。

语言：

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

a为anchor缩写 ,意为：锚

两个属性的作用如下：

href 用于指定链接目标的url地址（必须属性）当为标签应用href属性时，它就具有了超链接的共功能

target 用于指定链接页面的打开方式，其中_self为默认值(替换当前窗口打开)，_blank为在新窗口中打开方式

<h1>百度超链接</h1>
    <a href="http://www.baidu.com" target="_self" >百度</a> 
    <h3>小米商城</h3>
    <img src= "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7c2b5d308761d257483badf0bc4eca22.jpg?thumb=1&w=1520&h=570&f=webp&q=90" width="500"/> <br/>
    <a href="http://www.mi.com" target="_blank" > <font  size= "6"> 小米 </font>  </a>

调整字体大小格式：html文字大小font语法结构

<font size="2">我字体大小为2</font>

2.链接分类

1.外部链接 ，例如

image-20211020173023589

<a  href ="http://www.baidu.com">   百度 </a>

2.内部链接

网站内部之间的相互链接，直接链接内部页面名称即可，例如：

<a href ="index.html" > 首页 </a>

3.空链接

如果当时没有确定的链接目标时，

<a href ="#"  >首页</a>

4.下载链接

如果href里面地址是一个文件或者压缩包，会下载这个文件。

地址链接的是文件.exe 或者是.zip等压缩包形式的文件

image-20211022132033354

<a href ="img.zip" >点击下载压缩包</a>

5.网页元素链接：

在网页中的各种网页元素我，如文本、图像、表格、音频、视频等都可以添加超链接

<a href="http://www.mi.com" target="_blank" ><img src="images/辛亥革命.png" width=500/></a>

6.锚点链接

点我们的点击链接，可以快速定位到页面中的某个位置。

1.在链接文本的href属性中，设置属性值为#名字的形式，如

<a href ="#two"  >第二牛</a>

2.找到目标位置标签，里面添加一个id属性=刚才的名字，如

第二牛介绍 

<h1 id="one">百度超链接</h1>

<a href="#one" >跳转百度链接</a> </br>

！注意：将<a href #名称 >加上自定标题 用在点击跳转的文字上

​ < h1 id= “名称”> 运用在被跳转的文字或自定标题上

image-20211022181135378

5.HTML中的注释和特殊字符

5.1注释

如果需要在HTMl文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签

HTML中的注释以“"结束

快捷键ctrl + /

一句话：注释里面的的内容是给程序员看的，这个代码是不执行不显示到底页面中的。

5.2特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

image-20211022233910333

image-20211024151952066

5.3HTML标签导读（下）
  • 能够写出表格
  • 能够写出无序列表
  • 能够写出3--4个常用的input表单，类型
  • 能够写出下拉列表表单
  • 能够使用表单元素实现注册页面
  • 能够独立查阅W3C文档

目录：

  • 表格标签
1.1表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练的运用表格就显得很要。

表格不是用来布局页面的，而是用来展示数据的

image-20211024152834463

1.2表格的基本语法
<table>
  <tr>
      <td>单元格内的文字</td>
      ...
    </tr>
    ...
</table>

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

2.标签用于定义的表格中的行，必须嵌套在

标签中。

3.用于定义表格中的单元格，必须嵌套在标签中。

4.字母td 指表格数据(table data)，即单元格的内容。

image-20211024153800204

image-20211024154502822

image-20211024154514127

1.3表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

标签标识HTML表格的表头部分(table head缩写) 
<table>
 <tr>
   <th>姓名</th>
   ...
 </tr>
   ...
</table>

​ image-20211024155039066

1.4表格属性

表格标签这部分属性我们实际上开发不常用，后面通过css来设置

目的有2个：

1.记住这些英语单词，后面css会使用。

2.只管感受表格的外观形态

image-20211024160245124

image-20211024161044502

image-20211024161054250

image-20211024171322777

image-20211024171341064

1.5表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部、表格主题两大部分。

在表格标签中，分别用标签 表格的头部区域,标签 表格的主体区域, 这样可以更好的分清表格结构。

image-20211024214058241

1.:用于定义表格的头部，内部必须拥有标签.一般是位于第一行。

2.:用于定义表格的主体yi,主要用于放数据主体

3.以上标签都是放在

标签中。、

1.6合并单元格

特殊情况下，可以把多个单元格合并为一个单元格。

image-20211024214518401

1.合并单元格的方式

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

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

    image-20211024215054598

2.目标单元格

  • 跨列：最上 侧单元格为目标单元格，写合并代码

  • 跨列：最左侧单元格为目标单元格，写合并代码

    image-20211024215650558

3.合并单元格的步骤

1.先确定是跨行还是跨列合并

2.找到目标单元格，写上合并方式=合并单元格数量。比如：

3.删除多余的单元格

image-20211024221816724

image-20211024221831098

image-20211024222146947

image-20211024222201259

1.7表格总结

1.表格的相关标签

table标签 tr标签 td单元格 标签 th表头单元格标签 （加粗） thead 表格头部区域标签

tbody 表格主体区域标签

image-20211024222454937

image-20211024222546043

image-20211024222645276

  • 列表标签

    表格是用来显示数据的，那么列表就是用来布局的

    列表最大的特点就是整齐，整洁、有序、它作为布局会更加自由和方便

    根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表

    image-20211024225801553

    image-20211024225830993

    image-20211024225856985

    2.1无序列表（重点）
    <ul>标签表示HTML页面中项目的无序列表，一般以项目符号呈现列表项，而列表项使用<li>标签定义

    ​ 无序列表的基本语法如下：

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

    image-20211024230709362

    image-20211025214808861

    1.无序列表的各个列表项之间没有顺序级别之分，是并列的

    2.

      中只能嵌套
    • ,直接在
        标签中输入其他标签或者文字的做法是不被允许的

        3.

      • 之间相当于一个容器，可以容纳所有元素

        image-20211024231625970

        4.无序列表会带有自己的样式属性，但在实际使用时，我们会用CSS来设置。

        2.2有序列表（理解）

        有序列表即为有排列顺序的列表，其各个列表会按照一定会的顺序排列定义。

        在HTML标签中，

          标签用于定义有序列表，列表排序以数字来显示，并且使用
        1. 标签来定义列表项。

          有序列表的基本语法格式如下：

          image-20211025215013999

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

          image-20211025215740536

          image-20211025215756097

          1.

            中只能嵌套
          1. ，直接在
              标签中输入其他标签或者文字的做法是不被允许的。

              2.

            1. 之间相当于一个容器，可以容纳所有元素。同上！

              3.有序列表会带有自己样式属性，但在实际使用中，我们会使用CSS来设置。

              2.3自定义列表（重点）

              自定义列表的使用场景：

              自定义列表常用对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

              image-20211025223415949

              在HTML标签中，

              标签用于定义描述列表（或定义列表），该标签与
              (定义项目/名字)和
              （描述每一个项目/名字）一起使用。

              其基本语法如下：

              <dl>
 <dt>名词1</dt>      大哥大标题 
 <dd>名词1解释1</dd>  小标题
 <dd>名词1解释2</dd>
</dl>

              image-20211025225128893

              image-20211025225425469

              image-20211025225445413

              1.

              里面只能包含
              和

              2.

              和
              个数没有限制,经常是一个
              对应多个

          在HTML标签中，

          标签用于定义描述列表（或定义列表）,该标签会与
          (定义项目/名词)和
          （描述每一个项目/名字)一起使用。

          image-20211025225921103

          image-20211025230058003

          2.4列表总结

          image-20211025230318105

          注意：

          1.学会什么时候无序列表，什么时候用自定义列表。

          2.无序列表和自定义列表怎么写？

          3.列表布局学习完CSS后再来完成。

          • 表单标签
          3.表单标签
          image-20211025230539941

          网页中表单展示

          1.为什么需要表单

          2.表单的组成

          3.1为什么需要表单

          使用表单目是为了 收集用户信息。

          在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

          3.2表单的组成

          在HTML中，一个完整的表单 通常由 表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

          image-20211025231220596

          3.3表单域

          表单域是一个包含表单元素的区域。

          在HTML标签中，

          标签是定义表单域，以实现用户信息的收集和传递。

          <form>会把它范围内的表单元素信息提交给服务器。
 

           <form action ="url地址"  method="提交方式" name="表单域名称" >
   各种表单元素控件
 </form>

          常用属性：

          属性 属性值 作用

          action url地址 用于指定接受并处理表单数据的服务器程序url地址

          method get/post 用于设置表单数据的提交方式，其取值为get或post

          name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域

          image-20211025235426476

          基本来说，我们暂时不用表单域提交数据，只需要写上form标签即可，就业班等学习服务器编程阶段会重新讲解。

          这里只需要记住两点：
          1.在我们写表单元素之前，应该有个表单域把他们进行包含

          2.表单域form标签

          3.4表单控件（表单元素）

          在表单域可以定义各种表单元素，这些表单元素就是允许用户表单中输入或者选择的内容控件。

          1.input输入表单元素

          3.4.1表单元素

          在英文单词中，input是输入的意思，而在表单元素中标签用于收集用户信息。

          在标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。）

          <input type ="属性值"  />
          • 1. 标签为单标签
          • 2.type属性设置不同的属性值用来指定不同的控件类型
          image-20211026174234557

          image-20211026221234463

          image-20211026221248252

          image-20211027160455946

          image-20211027161419180

          image-20211027162629664

          image-20211027162513381

          image-20211027162535870

          image-20211027163749194

          image-20211027163737988

          image-20211027163819119

          问答：

          image-20211027164836419

          image-20211027164932557

          image-20211027171504423

          image-20211027171619819

          ​

          ​

          image-20211027173121357

          image-20211027173140311

          ​

          image-20211027173502549

          image-20211027173511870

          ​

          image-20211027174254783

          image-20211027174304559

          3.4.2

          语法规范：

          <label for="sex"> 男</label>
<input type="radio" name="sex" id="sex"/>0

          核心：

          image-20211027220422973

          image-20211027220434826

          2.select下拉表单元素

          3.4.3标签控件定义下拉列表。

          image-20211027221227306

          语法：

          <select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

          image-20211027223214017

          image-20211027223234370

          1.

          posted @ 2021-12-08 11:49  戛然而止  阅读(154)  评论(0)    收藏  举报