前端day1:	web理解+html基本语法

web网页的组成部分

Web标准 简单来说可以分为结构、表现、行为。其中结构是由HTML各种标签组成，简单来说就是body里面写入标签是为了页面的结构。表现指的是CSS层叠样式表，通过CSS可以让我们的页面结构标答更具美感。行为指的是页面和用户具有一定的交互，这部分主要由JS组成。
W3c， 全称:world wide webconsortium是一个制定各种标准的非盈利性组织，也叫万维网联盟，标准包括HTML、 CSS、ECMAScript等等，web标准的制定有很多好处，比如说:可以统一开发流程，统一使用标准化开发工具(VSCode WebStorm、Sublime)，方便多人协作学习成本降低，只需要学习标准就行，否则就要学习各个浏览器厂商标准跨平台，方便迁移都不同设备。

HTML结构 CSS表现 JS行为 (都是由W3C制定的规则)

HTML是一种用于创建网页结构的标记语言。（它不是编程语言） 它使用一系列的标签来定义和组织网页内容。HTML标签可以用来创建网页的标题、段落、表格、图片、链接等元素。HTML结构是网页的骨架，它描述了网页中不同元素的层次关系和组织结构。

CSS是一种用于描述网页外观样式的标记语言。它可以通过选择器选取HTML元素，并通过属性来定义元素的样式。CSS可以控制网页的字体、颜色、背景、大小、布局以及其它外观特性。CSS表现是指网页的外观和样式效果，如字体的颜色、大小，边框的样式和宽度，背景颜色和图片等。

JS是一种基于对象和事件驱动的脚本语言，用于为网页添加交互性和动态行为。通过编写JS脚本，可以实现诸如表单验证、交互效果、动画、响应用户事件等功能。JS行为是指通过JS脚本实现的网页的互动行为，比如当用户点击按钮时显示弹出框，当鼠标悬停在某个元素上时改变其样式，或者根据用户的输入实时更新网页内容等。

运用工具软件

vscode(最常用的软件)

扩展包 (vscode)

Auto Renmae tag： 能够自动重命名HTML（或XML）标签。当你修改一个标签的开放或封闭标签的名称时，它会自动更新另一个对应的标签名称，以保持标签名称的一致性。
htmltagwrap： 可以用来快速包裹HTML（或XML）标签。它可以在选中的文本周围包裹一个新的HTML标签，从而快速添加或修改标签结构。
view-in-browser： 可以让你在浏览器中直接打开并预览当前编辑的HTML文件。它提供了一个快速的方式来查看你的网页的外观和布局效果，而不必手动在浏览器中打开文件。
Live Server： 它创建了一个本地开发服务器，用于实时预览和调试网页。它支持自动刷新，当你修改HTML、CSS或JS文件时，页面会自动重新加载，以便你可以立即看到更改的效果。它还提供了一些其他功能，如支持在多个浏览器、移动设备上同步预览、自定义端口等。这使得开发过程更加高效和方便。

语句含义

1.
<html lang="en"> --> 指定网页的语言为英语
<html lang="zh-CN"> --> 指定网页的语言为中文
<html lang="ja-jp"> --> 指定网页的语言为日语
这将告诉浏览器和搜索引擎，网页的内容是用什么语言来显示
2.
<!DOCTYPE ***>
<!DOCTYPE html> 一直更新直到 -->HTML5
3.
<meta charset="***">
<meta charset="UTF-8"> -->常用"万国码" 最开始是用ASCII码

HTML是什么？

网页通过浏览器才能访问阅读

网页是网站中的一页

文件扩展名.html

网页是由前端开发人员写的，html使用标记标签来描述网页(视频，音频，图片等)

H5和HTML5区别

H5是一个产品名词，包含了最新的HTML5、CSS3、ES6等新技术来制作的应用

HTML5是一个技术名词，指的就是第五代HTML

html是用来描述网页的一种语言

1.html是一种超文本语言(Hyper Text Markup Language)

2.不是一种编程语言，而是一种标记语言(markup language)

3.标记语言是一套标记标签(markup tag)

html的基本语法

由如下基本语言形成一个基本框架(头部，标题，身体)

xml 复制代码

    <!DOCTYPE html>
    <html lang="en">
       <head>    -->头部
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>    -->标题
      </head>
      <body>    -->身体
    
      </body>
    </html>

1.常规标记/双标记

<标记></标记>

<标记属性="属性值">文本</标记>

标记可叫标签/元属

例： 前后部分不能漏写
<head></head>
<body></body>

2.单标记/空标记

<标记/>

<标记属性="属性值"/>
< br/> 只需写一个

常用标签

1.文本标题(h1-h6)

文本标题标签自带标签，有自己的文本大小，并且独占一行，有默认间距
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.段落文本(p)

段落与段落之间有段间距
<p>内容</p>

3.换行(br)

换行是一个单标记(空标记)
<br/>

4.水平线(hr)

单标记(空标记)
<hr/>

水平线的设置：
<hr color="red" width="300px" align="right">

color==颜色

width==宽度

align==对齐方式

noshade==取消阴影--> <hr noshade>

5.加粗(strong)常用

<strong>内容</strong>也可
<b></b>

title 与 h1 的区别、b 与 strong 的区别、i与 em 的区别?

title属性表示网页的标题，h1元素则表示层次明确的页面内容标题，对页面信息的抓取也有很大的影响。

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时:strong会重读，而b是展示强调内容。

i是italic(斜体)的简写，是早期的斜体元素，表示内容展示为斜体，而em是emphasize(强调)的简写，表示强调的文本。

6.倾斜(em)常用

<em>内容</em>也可
<i></i>

7.删除线(del)

<del>内容</del>也可
<s></s>

8.扩展

下划线：<u>内容</u>

上标： <sup></sup>

下标： <sub></sub>

9.特殊符号

尖角号： <<左尖角号 >>右尖角号
空格：   该空格占据宽度受字体影响 &emsp;(常用）占据的宽度刚好是一个中文宽度
版权： ©©
商标： ™™ ® ®

10.div和span标签

div标签：没有具体含义，用来划分页面的区域，独占一行

span：没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离

例： <h1> <span>体育</span> <span style="color:gray;">sport</span> </h1>

有序列表和无序列表

1.有序列表

<ol type="A" start="4">
<li>有序列表</li>
<li>有序列表</li>
</ol>
注：
1. li里面可以放标签，ol里面只能放置li
2. 数字自动生成
3. type:1,a,A,i,I
4. start：取值只能数字(从取值开始往后排)

2.无序列表

<ul type="none">
<li>无序列表</li>
<li>无序列表</li>
</ul>
注：
1. li里面可以放标签，ul里面只能放置li
2. 默认显示黑色实心圆
3. type:disc圆盘，circle圆，square正方形，none无

3.自定义列表

<dl>
<dt>可以是文字也可以图</dt>
<dd>相关文字</dd>
</dl>
<dl>
<dt>可以是文字也可以图</dt>
<dd>相关文字</dd>
</dl>
注：
1. dt里面可以是图片也可以是文字
2. dd里面只能是文字

图片标签的路径

绝对路径：指文件在硬盘上真正存在的路径。

例如"bg.jpg"这个图片是存放在硬盘的"C:\code\img"目录下，那么"bg.jpg"这个图片的绝对路径就是"C:\code\img\bg.jpg"。
注意： 绝对路径在实际的开发过程中很少去使用，如果使用"C:\code\img"来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用"\"或"/"字符作为目录的分隔字符。

相对路径：相对于自己的目标文件位置。(常用)
1. 当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名。
<img src="3.png"/>
2. 当当前文件与目标文件所处的文件夹在同一目录下，写法如下：

文件夹名/目标文件全称+扩展名。
<img src="img/3.png"/>
3. 当当前文件所处的文件夹和目标文件在同一目录下，写法如下：

../目标文件文件名+扩展名。
<img src="../3.png"/>

图片标签的属性

如果图片转存失败，建议直接上传图片文件
<img src="图片路径"
title="鼠标悬停上去之后的提示信息"
alt="图片不显示之后（加载失败）的提示信息转存失败"
width="200px" height="200px">

超链接标签：能够实现不同页面的跳转

<a href="路径"
title="鼠标悬停上去之后的提示信息"
target="规定在何处打开文档">内容</a>

Target属性：规定在何处打开文档。
注：

target="_self"默认值(默认在当前页面打开)

target="_blank"新窗口打开(重新在一个窗口打开)

a元素除了用于导航外，还有什么作用?

href属性中的url可以是浏览器支持的任何协议，所以a标签可以用来手机拨号<ahref=tel:110">110，也可以用来发送短信<ahref="6ms:110">110，还有邮件等等.当然，a元素最常见的就是用来做锚点和下载文件。

锚点可以在点击时快速定位到一个页面的某个位置，而下载的原理在于a标签所对应的资源浏览器无法解析，于是浏览器会选择将其下载下来。

src 和 href 的区别

src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。两者区别如下:

src: 全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说:js脚本、img图片、 frame等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。

href: 全称hyperreference，意味着超链接，指向网络资源，当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理，通常用于a、link元素。

表格的基本结构

xml 复制代码

 <table>              <!--创建表格-->
    <tr>              <!--tr表示行-->
       <td>1</td>     <!--td表示单元格-->
       <td>2</td>
   </tr>
 </table>

注：

快速建表格：table>tr <math xmlns="http://www.w3.org/1998/Math/MathML"> ∗ * </math>∗2>td <math xmlns="http://www.w3.org/1998/Math/MathML"> ∗ * </math>∗2

表格的属性

宽度 width

高度 height

边框 border

边框颜色 bordercolor

背景颜色 bgcolor

水平对齐 align="left或right或center"
cellspacing ="单元格与单元格之间的间距"
cellpadding="单元格与内容之间的空隙"

例:

在table里面width和height的百分比是相对于父元素而言
<table border="1" width="50%" height="500px" align="center" bordercolor="red" bgcolor="yellow" cellspacing="20" cellpadding="100">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

tr(行)属性

高度 height

背景颜色 bgcolor

文字水平对齐 align="left或right或center"

文字垂直对齐 valign="top或middle或bottom"
例：

<table border="1" width="300" height="300" bgcolor="yellow" align="center">
<tr bgcolor="orange" height="100"(只能影响高度) align="center" valign="bottom">
<td>1</td>
<td>2</td>
</tr>
</table>

td(单元格)属性

宽度 width

高度 height

背景颜色 bgcolor

文字水平对齐 align="left或right或center"

文字垂直对齐 valign="top或middle或bottom"

例：

在td里面设置宽度，影响这一整列的宽度

td里面设置高度，影响这一整行的高度


<table border="1" width="300" height="300" bgcolor="yellow" align="center">
<tr>
<td width="200">1</td>
<td height="200">2</td>
</tr>
<tr>
<td bgcolor="red" >3</td>
<td align="right" valign="top">4</td>
</tr>
</table>

合并单元格

合并列 Colspan="2" 合并行 Rowspan="3"
合并列： 通过设置Colspan属性，将多个相邻的单元格合为一列。例如，设置Colspan="2"时，表示当前单元格将与右侧的一个单元格合并为一列。
合并行： 通过设置Rowspan属性，可以将多个相邻的单元格合并为一行。例如，设置Rowspan="3"时，表示当前单元格将与下方的两个单元格合并为一行。
注：
1. 合并的单元格在展示上会显示为一个大的单元格，实际上它们仍然是多个单元格，只是在视觉上合并在一起。
2. 合并单元格时，合并后的单元格将占据合并前的单元格所在的行和列的位置，并且具相同的边框和样式。
3. 在进行合并操作时，要确保合并的单元格中不包含其他内容，否则可能会导致布局错乱或显示异常。
4. 合并单元格通常应用于需要合并行列来显示复杂数据或构建更复杂布局的情况下。

表单标签

表单的作用：收集用户信息。

Form当中method的post和get的区别？

1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB。
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

属性：

type 定义输入框的类型
文本框: type="text"
密码框: type="password"
提交框: type="submit"和 <button>提交按钮</button>一样
按钮框: type="button" 单纯的按钮
重置框 type="reset"清空的效果
placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
name 必须设置，否则在提交表单时，用户在其中输入的数据不会
value

例
<form method="get或者post" action="向何处发送表单数据">

xml 复制代码

<form action="http://www.jd.com" method="POST">
    用户信息:  <input type="text" placeholder="请输入你的用户名，注意大小写" name="username">
    <br>
    密码：     <input type="password" placeholder="请输入你的密码" name="mima">
    <br>
    <!-- <input type="submit" value="登录"> -->       
    <button type="submit">登录</button>
    <!-- 提交信息到 action指定的地址 -->
    
    <!-- <input type="reset" value="重新输一遍吧">清空 -->     
    <button type="reset">重新输一遍吧</button>

    <input type="button" value="aaaaaa">
</form>

前端day1：web+html基本语法 | 青训营

web网页的组成部分

运用工具软件

扩展包 (vscode)

语句含义

HTML是什么？

html是用来描述网页的一种语言

html的基本语法

1.常规标记/双标记

2.单标记/空标记

常用标签

1.文本标题(h1-h6)

2.段落文本(p)

3.换行(br)

4.水平线(hr)

5.加粗(strong)常用

title 与 h1 的区别、b 与 strong 的区别、i与 em 的区别?

6.倾斜(em)常用

7.删除线(del)

8.扩展

9.特殊符号

10.div和span标签

有序列表和无序列表

1.有序列表

2.无序列表

3.自定义列表

图片标签的路径

图片标签的属性

超链接标签：能够实现不同页面的跳转

a元素除了用于导航外，还有什么作用?

src 和 href 的区别

表格的基本结构

表格的属性

tr(行)属性

td(单元格)属性

合并单元格

表单标签

Form当中method的post和get的区别？

属性：