1.什么是HTML、CSS?
（html与css相互配合）
- 是做网站的编程语言。
- 浏览器把代码解析后的样子就是我们看到的网站，如何看到网页的原始代码呢？通过鼠标右键查看与网页源代码。
- 如何去写代码？写到哪里呢？
- 一个网站是由N多个网页组成的。 每一个网页就是一个.html文件
- 比喻:网站就像电视剧，由很多集组成。
2.VSCode编辑器？
- VS cobe下载地址:地址
- 如何安装插件？ 主要插件:语音包(Chinese)、open in browser、view in borwser
- 方法、作用(由于软件下载好后，其内容全部都是英语，这时咱们可以在最左侧图标找到扩展，在里面搜索安装一些插件，Chinese插件可以将内容改为中文，open in browser插件可以在编辑器点击鼠标左键找到Open ln Default Browser打开( 运行) 编写好的html文件。view in borwser插件可以在编辑器菜单上点击鼠标左键找到View ln Browser打开(运行)编写好的html文件（两者作用都一样，只是打开方式不一样）)
- 学习编辑器基本使用？
- 设置:文件(在左上角)->首选项->设置（字体大小，、是否换行（自动折行）word wrap）
- 创建文件、创建文件夹、重命名和删除
- 快捷键
- ctrl+s:保存
- ctrl+a:全选
- ctrl+x、ctrl+c、ctrl+v:剪切、复制、粘贴
- ctrl+z、ctrl+y:撤销（后退一步)、前进（前进一步）
- shift+end:从头选中一行
- shifr+home尾部选择一行
- shift+allt+↓:快速复制一行
- alt+↑或↓:快速移动一行
- tab:向后缩进
- tab+shift:向前缩进
- 多光标:alt+鼠标左键
- ctrl+d:选择相同元素的下一个
3.chrome浏览器？(谷歌浏览器)
4.深入了解网上开发？
一个网页是由下面三种职位相互合作开发
- UI设计师:设计稿
- web前端开发工程师(H5开发):将设计稿转成代码、将数据库里的数据显示到页面、HTML+CSS(HTML:结构、CSS:样式)
- wen后端开发工程师:把网站产生很多数据存储起来
5.web前端的三大核心技术？
- HTML:结构
- CSS:样式
- JavaScriot:行为
6.HTML基本结构和属性？
- 超文本:文本内容+非文本内容(图片、视频、音频等)
- 标记:<单词>
标记叫做标签:比如<header> <footer>
写法分成两种:
1. 单标签 <img>
2. 双标签 <header></header> - 语言:编程语言
- 创建标签的快捷键:单词+tab键可以转换为<单词>(如果是单标签会转换为单标签，如果是双标签会转换为双标签)
- 标签是可以上下排列，也可以组合嵌套
- HTML常见标签:HTML5元素标签含义大全
- 标签的属性:来修饰标签的，设置当前标签的一些功能。
- <标签 属性=“值” 属性2=“值2”>
7.HTML初始代码？
- 每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法。
- ！+tab建:快速的创建html的初始代码
<!DOCTYPE html> 文档声明：告诉浏览器这是一个html文档
<html lang="en"> html文件的最外层标签。包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站
<head>
<meta charset="UTF-8"> 元信息:是编写网页中的一些赋值信息。charset="UTF-8"国际编码,让网页不出现乱码情况。charset属性规定html文档的字符编码,防止乱码
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> 设置网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html>
8.HTML注释？
- 写法:<！-- 注释的内容 -->在浏览器中看不到，只能在代码中看到注释的内容。
- 意义:
- 把暂时不用的代码注释起来，方便以后使用。
- 对开发人员进行提示
- ctrrl+/
- shift+alt+a
9.标题与段落？
- 标题是双标签:
<h1></h1>…<h6></h6> - 在一个网页中，h1标签最重要，并且一个.html文件中只能出现一次h1标签。
- h5、h6标签在网页中不经常使用。
- 段落是双标签:
<p></p >
10.文本修饰标准？
- 强调->双标签:
<strong></strong>``<em></em>
- 写法与展示效果是有区别的，
<strong></strong>对加粗<em></em>字体斜体 <strong></strong>强调性更强。<em></em>强调性稍弱
强调性稍弱
- 下标文本:
<snb></sub> - 上标文本:
<sup></sup> - 删除文本:
<del></dei> - 插入文本:
﹤ins></ins>
- a2+b2=c2
a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
- H2O
H<snb>2</snb>O
- 促销:原价
300，现价100。
促销:原价<del>300</del>，现价<ins>100</ins>。
11.图片标签？
<img>(单标签)向网页中镶入一部图像，具有以下属性。
- src:引入图片的地址
- alt:当图片出现问题的时候，可以显示一段友好的提示文字
- title:提示信息，当我们把鼠标放到标签上时，该提示信息就会显示出来。(所有html标签都可以拥有)
- width、height:控制图片的大小，单位是像素(直接输入数字)。建议设置该属性，这样可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。
- 写法:
< img src="图片地址" alt="图片出现问题，代替图片的文字" width="***" height="***">
12.引入文件的地址路径
相对路径
- 以引用文件之网页所在位置为参考基础，而建立出的目录路径。
. 在路径中表示当前路径，通常情况下可省略
. . 在路径中表示上一级路径 - 图像文件和html文件位于同一文件夹：只需输入图像文件 的名称即可，如< img src=”logo.gif” />。
- 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如< img src=”img/img01/logo.gif” />。
- 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/”，如果是上两级，则需要使用 “…/ …/”，以此类推，如< img src=”…/logo.gif” />
绝对路径
绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
- 编写文件的时候，绝对路径在电脑的任何一个文件中都能够找到（需要写全部的路径，从什么盘开始）
- 格式比喻：
- D:/Hbulider/HBuilder/tools/nview/index.js（文件绝对路径）
- http://c.biancheng.net:80/view/7410.html（网络绝对路径）
13.链接标签？
- href属性:链接属性
- target属性:可以改变链接打开的方式，默认情况下:在当前页面打开_self 新窗口打开_blank(如果只想要在当前页面打开，可以不用设置target属性)
<base>单标签:作用就是改变链接的默认行为(该标签是写在初始标签中的标签中的)- 图例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<base target=_blank>(在这里)
</head>
<body>
</body>
</html>
14.跳转锚点
- 跳转锚点:在页面内跳转到指定地点
- 跳转锚点也是用
< a>< /a> 标签实现，有两种实现方式：
- #+ id属性（id必须是唯一的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#jjj"></a>这里设置#（这样点击的话，就可以跳转到id）
<p></p>
<p></p>
<p></p>
<p id="jjj"></p>要跳转的地方设置id
<p></p>
<p></p>
<p></p>
</body>
</html>
- #+ name属性（name属性是加给a标签的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#jjj"></a>
<h2></h2>
<p></p>
<p></p>
<p></p>
<p></p>
<a name="jjj"></a>
<h2></h2>
<p></p>
<p></p>
<p></p>
</body>
</html>
- name可以重复，但id不行，但都应该尽量保持其唯一性
- id可以直接插在< h>、< p>里，name则是在< h>上再开一个a元素，在< a>标签里实现
- id存在定位偏移，name定位较准确。
<a href="#">
<p>回到顶部</p>
</a>
15.特殊符号
- 编写一些文本时，经常会遇到输入法无法输入的字符，如版权符号©； 商标注册符号 ® 等。还有往一段文字加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些字符准备了专门的代码。
- 常见符号:
| 特殊字符代码 | 字符 | 含义 |
|---|
| < ; | < | 小于号或显示标记 |
| > ; | > | 大于号或显示标记 |
| & ; | & | 可用于显示其它特殊字符 |
| " ; | “ | 引号 |
| ® ; | ® | 已注册 |
| © ; | © | 版权 |
| &trade ; | ™ | 商标 |
| &bull ; | · | 点点 |
| &ensp ; | | 半个空白位 |
| &emsp ; | | 一个空白位 |
|   ; | | 不断行的空白 |
列表标签
1.无序列表（< ul>< /ul>、< li>< /li>）
- < ul>、< li>：列表的最外层容器、列表项，ul和li必须是组合出现的，它们之间是不能有其他标签的。(列表之间可以互相嵌套，形成多层级的列表)
- type属性：指定出现在列表项前的项目符号的样式（一般都是用css去控制），主要有：
| 值 | 描述 |
|---|
| disc | 默认,实心圆 |
| circle | 空心圆。 |
| square | 实心方块 |
| none | 无项目符号 |
<ul>
<li>
A
<ul>
<li type="circle"(在该笔记无法显示出来)>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
<li>B</li>
<li><C/li>
<ul>
2.有序列表（< ol>< /ol>、< li>< /li>）
- < ol>、< li>：列表最外层容器、列表项，同样 ol 和 li 必须是组合出现，且二者之间不能有其他内容。
- 有序列表使用的非常少，经常使用的是无序列表，无序列表可以代替有序列表
- type属性：指定出现在列表项前的项目符号的样式（一般都是用css去控制）主要有：
| 值 | 描述 |
|---|
| 1 | 默认。数字顺序的有序列表（1, 2, 3, 4） |
| a | 字母顺序的有序列表，小写（a, b, c, d） |
| A | 字母顺序的有序列表，大写（A, B, C, D） |
| i | 罗马数字，小写（i, ii, iii, iv） |
| I | 罗马数字，大写（I, II, III, IV） |
3.定义列表
- < dl>< /dl>：定义列表
< dt>< /dt>：定义专业术语或名词
< dd>< /dd>：对名词进行解释和描述 - 定义列表不仅仅是一列项目，而是项目及其注释的组合。列表项需要添加标题和对标题进行描述时使用定义列表
- 图例：
<di>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScriot</dt>
<dd>网页脚本语言</dd>
</di>
HTML
超文本标记语言
CSS
层叠样式表
JavaScriot
网页脚本语言
<dl>
<dt>A</dt>
<dd>
<dl>
<dt>a</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
</dl>
<dl>
<dt>b</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
</dl>
</dd>
</dl>
A
-
a
-
1
-
2
-
3
b
-
1
-
2
-
3
表格
表格标签
- < table>< /table>：表格的最外层容器
- < caption>< /caption>：定义表格标题，caption 标签必须紧随 table 标签之后。每个表格只能定义一个标题。通常这个标题会被居中于表格之上
- < tr>< /tr>：定义表格中的行，tr元素包含一个或多个th或td元素
- < th>< /th>：定义表头单元格，th 元素内部的文本通常会呈现为居中的粗体文本
- < td>< /td>：定义表格单元格，td 元素内的文本通常是左对齐的普通文本
- 以上标签之间有嵌套关系，要符合嵌套规范。
- 例子：下面只定义了表格的结构，样式可以通过属性或CSS进行设置
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>时间</th>
<th>天气情况</th>
<th>出行提醒</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2020.5.29</td>
<td>白天</td>
<td>晴朗</td>
<td>紫外线严重，出门带伞</td>
</tr>
<tr>
<td>2020.5.29</td>
<td>夜晚</td>
<td>微风</td>
<td>适宜出门散步</td>
</tr>
</tBody>
<tfoot>
此处可以写一些文字表达这个标签(会显示在左上角)
</tfoot>
</table>
此处可以写一些文字表达这个标签
| 日期 | 时间 | 天气情况 | 出行提醒 |
|---|
| 2020.5.29 | 白天 | 晴朗 | 紫外线严重，出门带伞 |
| 2020.5.29 | 夜晚 | 微风 | 适宜出门散步 |
- 表格的语义化标签：
< thead>< /thead>、< tbody>< /tbody>、< tfoot>< /tfoot>
在一个table中，< tbody>可以出现多次，但< thead>和< tfoot>都只能出现一次 - 语义化标签作用:更加符合规范,更能让其他软件理解这是个表格
表格属性
| 属性 | 含义 |
|---|
| border | 表格边框 |
| cellpadding | 单元格内的空间 |
| cellspacing | 单元格之间的空间 |
| rowspan | 合并行 |
| colspan | 合并列 |
| align | 左右对齐方式，left、center、right(左、中、右) |
| valign | 上下对齐方式，top、middle、buttom(上、中、下) |
<table border="1">
<caption>天气预报</caption>
<tHead>
<tr>
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行提醒</th>
</tr>
</tHead>
<tBody>
<tr>
<td rowspan="2">2020.5.29</td>
<td>白天</td>
<td>晴朗</td>
<td>紫外线严重，出门带伞</td>
</tr>
<tr>
<td>白天</td>
<td>晴朗</td>
<td>紫外线严重，出门带伞</td>
</tr>
<tr>
<td rowspan="2">2020.5.29</td>
<td>夜晚</td>
<td>微风</td>
<td>适宜出门散步</td>
</tr>
<tr>
<td>夜晚</td>
<td>微风</td>
<td>适宜出门散步</td>
</tr>
</tBody>
<tfoot>
ofkfodk
</tfoot>
ofkfodk
天气预报
| 日期 | 天气情况 | 出行提醒 |
|---|
| 2020.5.29 | 白天 | 晴朗 | 紫外线严重，出门带伞 |
| 白天 | 晴朗 | 紫外线严重，出门带伞 |
| 2020.5.29 | 夜晚 | 微风 | 适宜出门散步 |
| 夜晚 | 微风 | 适宜出门散步 |
表单
表单标签
< form>< /form>：表单的最外层容器，表单用于向服务器传输数据< input>：单标签，该标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
- input标签有一个type属性，决定是什么控件
- 常见的属性
| type属性 | 含义 |
|---|
| text | 普通的文本输入框 |
| password | 密码输入框 |
| checkbox | 复选框 |
| radio | 单选框 |
| file | 上传文件 |
| submit | 提交按钮 |
| reset | 重置按钮 |
- 表格需要严格按照嵌套规范，表单不需要，里可以嵌套其他标签。
- 图例(在这里无法被显示,用软件打开查看)
<from action=""> action属性是提交后接收该表单数据的网络地址
<h2>输入框:</h2>
<input type="text" placeholder="请输入用户名"> placeholder属性是在输入框里面显示文字,如果输入框里面被用户输入任何文字会被屏蔽掉
<h2>密码框:</h2>
<input type="password" placeholder="请输入密码" >
<h2>复选框:</h2>
<input type="checkbox" checked>a checked属性是默认选中
<input type="checkbox">b
<input type="checkbox" disabled>c disabled属性表示不可选中
<h2>单选框</h2>
<input type="radio" name="jjj">A name属性防止两个都能选中,填写这个这个属性就只能选择一个,否则两个被同时选中
<input type="radio" name="jjj">B
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
< textarea>< /textarea>：多行文本框< select>< /select>、< option>< /option>：下拉菜单(需要组合嵌套)< label>< /label>：label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。(通俗来讲本来要点击圆圈才能被选中,加上这个属性后就能够点击文字也能被选中)
< label> 标签的 for 属性应当与相关元素的 id 属性相同。
<h2>多行文本框</h2>
<textarea cols=30 rows=10></textarea> cols属性代表行,rows属性代表列(可以改变数字来更改多行文本框的大小)(也可以通过css来更改)
<h2></h2>
<select size="2" multiple> size属性代表选择的项数有几个
multiple属性代表多选(通过点击滑动鼠标或者ctrl键进行多选)(上传文件中可以使用)
<option disabled>请选择</option> disabled属性表示不可选中
<option>1</option>
<option selected >2</option> selected属性表示当前选择这一项
<option>3</option>
</select>
<input type="radio" name="gender" id="boy"><label for="boy">A</label>
<input type="radio" name="gender" id="girl"><label for="girl">B</label>
表格表单组合
- 因为表格有嵌套规范，表单没有，所有嵌套时先写表单，再写表格。
- 图例(在这里无法被显示,用软件打开查看)
<form action="">
<table border="1" cellpadding="30">
<tbody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名:</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码:</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tbody>
</table>
</form>
</body>
div 与 span
-< div>< /div>（一个区域的块）
< div>标签用来划分一个区域，相当于一块区域容器，< div>中也可以嵌套多层< div>，用来将网页分隔成独立的、不同的部分，实现网页的规划和布局。
< span>< /span>（内联）
用来对文字进行修饰，div和span都是默认没有任何样式的，需要配合CSS。(将该表套在你想改变的文字里面可以单独更改那一段)- 图例(在这里无法被显示,用软件打开查看)
<div style="border: 1px gray solid;"> style标签属于css的
<h2><a href="#"><span style="color: red;">弹珠传说</span>-动漫动画-全集高清正版视频在线观看-爱奇艺</a></h2> style标签属于css的
<a href="#"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fl%2Fpublic%2Fp2523179926.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627827775&t=61de8cd488281eb73df37b5300248489" alt=""></a>
<p>东历1008年，这是一个盛行弹珠游戏的异世界。少年欧阳小枫为了寻求弹珠的更高技艺而寻找传说中的弹珠仙人拜师学艺，之后在弹珠仙人所在的仙珠山遇到了其他四个并肩作战的好朋友，他们凭着正义，执着，信任，善良，勇气一起都...</p>
<a href="#">www.le.com/comic/788...htm</a>
</div>
这篇博客详细介绍了HTML的基础知识，包括HTML与CSS的关系、VSCode编辑器的使用、Chrome浏览器的功能以及HTML的基本结构和属性。内容涵盖HTML的标题、段落、文本修饰、图片、链接、表格和表单等元素，同时还讲解了相对和绝对路径的使用。通过阅读，读者可以快速入门HTML开发。
扫一扫
8202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
