html+css基础，⼩学⽣看完都学会了
html+css基础
html 的介绍hao123影视
html 的介绍
学习⽬标
能够知道html的作⽤
1. ⽹页效果图
2. html的定义
HTML 的全称为：HyperText Mark-up Language, 指的是超⽂本标记语⾔。 标记：就是标签, <；标签名称> </标签名称>, ⽐如: 、等，标签⼤多数都是成对出现的。
所谓超⽂本，有两层含义:
因为⽹页中还可以图⽚、视频、⾳频等内容(超越⽂本限制)
它还可以在⽹页中跳转到另⼀个⽹页，与世界各地主机的⽹页链接(超链接⽂本)
3. html的作⽤
html是⽤来开发⽹页的，它是开发⽹页的语⾔。
4. ⼩结
html是开发⽹页的语⾔
html中的标签⼤多数都是成对出现的, 格式: <；标签名></标签名>
html 的基本结构
html 的基本结构
学习⽬标
能够写出html的基本结构
1. 结构代码
⽹页显⽰内容 第⼀⾏是⽂档声明, ⽤来指定页⾯所使⽤的html的版本, 这⾥声明的是⼀个html5的⽂档。 ...标签是开发⼈员在告诉浏览器，整个⽹页是从这⾥开始的，到结束，也就是html⽂档的开始和结束标签。 ...标签⽤于定义⽂档的头部，是负责对⽹页进⾏设置标题、编码格式以及引⼊css和js⽂件的。 ...标签是编写⽹页上显⽰的内容。 2. 浏览⽹页⽂件 ⽹页⽂件的后缀是.html或者.htm, ⼀个html⽂件就是⼀个⽹页，html⽂件⽤编辑器打开显⽰的是⽂本，可以⽤⽂本的⽅式编辑它，如果⽤浏览器打开，浏览器会按照标签描述内容将⽂件渲染成⽹页。
⽹页基本结构
3. ⼩结
vscode 的基本使⽤
vscode 的基本使⽤
学习⽬标
能够安装和卸载 vscode 的插件
能够设置 vscode 的颜⾊主题和字体⼤⼩
1. vscode 的基本介绍
全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的⼀款免费、开源的跨平台代码编辑器，⽬前是前端(⽹页)开发使⽤最多的⼀款软件开发⼯具。
2.
根据下载的安装包双击进⾏安装即可，当然为了更好的使⽤ vscode 还可以安装对应的插件。
3. vscode 的插件安装
插件安装
open in browser 插件安装
注意: 如果在vscode打开的html⽂档中右击没有出现 open in browser 类型的选项，需要把当前打开的⽂件关掉，重新打开这个⽂件就好了。
4. vscode 的插件卸载
点击对应安装的插件，然后再点击卸载按钮即可。
5. vscode 的使⽤
打开⽂件夹创建⽂件
快速创建html⽂档的基本结构
右击在浏览器打开html⽂档
6. 设置字体⼤⼩
7. 设置颜⾊主题
8. 设置默认浏览器[可选]
可以根据⾃⼰的需要设置默认使⽤的浏览器
9. ⼩结
vscode 是由微软研发的⼀款免费、开源的跨平台代码编辑器
通过资源管理器打开⽂件夹创建HTML⽂件，编写 HTML 代码
可以根据需要安装对应的插件
可以设置字体⼤⼩和颜⾊主题
初始常⽤的 html 标签
初始常⽤的 html 标签
学习⽬标
能够知道单标签和双标签的区别
1. 常⽤的 html 标签
<!-- 1、成对出现的标签：-->
<h1>h1标题</h1>
<div>这是⼀个div标签</div>
<p>这个⼀个段落标签</p>
<!-- 2、单个出现的标签： -->
<br>
<img src="images/pic.jpg"alt="图⽚">
<hr>
<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg"alt="图⽚">
c语言常量包括<a href="www.baidu">百度⽹</a>
<!-- 4、标签的嵌套 -->
<div>
<img src="images/pic.jpg"alt="图⽚">
<a href="www.baidu">百度⽹</a>
c语言中sqrt()</div>
提⽰:
标签不区分⼤⼩写，但是推荐使⽤⼩写。
根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)
2.1 双标签是指由开始标签和结束标签组成的⼀对标签，这种标签允许嵌套和承载内容，⽐如: div标签2.2 单标签是⼀个标签组成，没有标签内容， ⽐如: img标签
2. ⼩结
学习 html 语⾔就是学习标签的⽤法，常⽤的标签有20多个。
编写 html 标签建议使⽤⼩写
根据书写形式，html 标签分为双标签和单标签
单标签没有标签内容，双标签可以嵌套其它标签和承载⽂本内容
资源路径
资源路径
学习⽬标
能够知道相对路径和绝对路径的区别
当我们使⽤img标签显⽰图⽚的时候，需要指定图⽚的资源路径，⽐如:
<img src="images/logo.png">
这⾥的src属性就是设置图⽚的资源路径的，资源路径可以分为相对路径和绝对路径。
1. 相对路径
从当前操作 html 的⽂档所在⽬录算起的路径叫做相对路径
⽰例代码:
<!-- 相对路径⽅式1 -->
<img src="./images/logo.png">
<!-- 相对路径⽅式2 -->
<img src="images/logo.png">
从根⽬录算起的路径叫做绝对路径，Windows 的根⽬录是指定的盘符，mac OS 和Linux 是/⽰例代码:
<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">
学生个人网页html代码提⽰:
⼀般都会使⽤相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源⽂件不到的问题
3. ⼩结
相对路径和绝对路径是 html 标签使⽤资源⽂件的两种⽅式，⼀般使⽤相对路径。
相对路径是从当前操作的 html ⽂档所在⽬录算起的路径
绝对 路径是从根⽬录算起的路径
列表标签
列表标签
学习⽬标
能够知道列表标签的种类
1. 列表标签的种类
⽆序列表标签(ul标签)
有序列表标签(ol标签)
2. ⽆序列表
<!-- ul标签定义⽆序列表 -->
<ul>
<!-- li标签定义列表项⽬ -->
<li>列表标题⼀</li>
<li>列表标题⼆</li>
<li>列表标题三</li>
</ul>
3. 有序列表
<!-- ol标签定义有序列表 -->
<ol>
<!-- li标签定义列表项⽬ -->
<li><a href="#">列表标题⼀</a></li>
<li><a href="#">列表标题⼆</a></li>
<li><a href="#">列表标题三</a></li>
</ol>
4. ⼩结
列表标签有⽆序列表标签(ul标签)和有序列表标签(ol标签)
列表项⽬对顺序有要求的时候使⽤ol标签
列表项⽬对顺序⽆要求的时候使⽤ul标签
表格标签
表格标签
学习⽬标
能够知道表格的边线合并
c语言从socket读取数据表格是由⾏和列组成，好⽐⼀个excel⽂件
2. 表格标签
<table>标签：表⽰⼀个表格
<tr>标签：表⽰表格中的⼀⾏
<td>标签：表⽰表格中的列
<th>标签：表⽰表格中的表头
⽰例代码:
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
颜的代码对照表</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
</table>
表格边线合并:
border-collapse 设置表格的边线合并，如：border-collapse:collapse;
表单标签
表单标签
学习⽬标
能够知道表单中常⽤的表单元素标签
1. 表单的介绍
表单⽤于搜集不同类型的⽤户输⼊(⽤户输⼊的数据)，然后可以把⽤户数据提交到web服务器 。
2. 表单相关标签的使⽤
标签 表⽰表单标签，定义整体的表单区域
标签 表⽰表单元素的⽂字标注标签，定义⽂字标注
标签 表⽰表单元素的⽤户输⼊标签，定义不同类型的⽤户输⼊数据⽅式
type属性
type=“text” 定义单⾏⽂本输⼊框
type=“password” 定义密码输⼊框
type=“radio” 定义单选框
type=“checkbox” 定义复选框
type=“file” 定义上传⽂件
type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“button” 定义⼀个普通按钮
标签 表⽰表单元素的多⾏⽂本输⼊框标签 定义多⾏⽂本输⼊框
标签 表⽰表单元素的下拉列表标签 定义下拉列表
标签 与标签配合，定义下拉列表中的选项 ⽰例代码:
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论