系统软件(各种操作系统)、应用软件(微信、qq等)
1:C/S(client:客户端/server:服务器)、B/S(browser:浏览器/server:服务器);服务器:为软件提供数据的设备。C/S架构特点:需要安装、偶尔更新、不跨平台、开发更具针对性。B/S架构特点:无需安装、无需更新、可跨平台、开发更具通用性。
2:运行网页的浏览器有: 谷歌(Chrome) 、 Safari 、 IE 、 火狐(Firefox) 、 欧 朋(Opera) 等。
1。网址:我们在浏览器中输入的地址。
2:网页:浏览器所呈现的每一个页面。
3:网站:多个网页构成了一个网站。
4:网页特点:无需安装、无需更新、跨平台。
5:网页中使用语言:HTML、CSS、JavaScript;
6:HTML全程:HyperText Markup Language(超文本标记语言)。超文本:暂且简单理解为 “超级的文本”,和普通文本比,内容更丰富。标 记:文本要变成超文本,就需要用到各种标记符号。语 言:每一个标记的写法、读音、使用规则,组成了一个标记语言。
7:相关国际组织:
IETF:全称:Internet Engineering Task Force(国际互联网工程任务组),成立于1985年底,是一个权威 的互联网技术标准化组织,主要负责互联网相关技术规范的研发和制定,当前绝大多数国际互联网 技术标准均出自IETF。官网:https://www.ietf.org
W3C:全称:World Wide Web Consortium(万维网联盟),创建于1994年,是目前Web技术领域,最具影 响力的技术标准机构。共计发布了200多项技术标准和实施指南,对互联网技术的发展和应用起到 了基础性和根本性的支撑作用,官网:https://www.w3.org
WHATWF:全称:Web Hypertext Application Technology Working Group(网页超文本应用技术工作小组)成立 于2004年,是一个以推动网络HTML 5 标准为目的而成立的组织。由Opera、Mozilla基金会、苹果, 等这些浏览器厂商组成。官网:https://whatwg.org/
1:写法
2:特点:注释中内容会被忽视,不会呈现于页面中,但代码中可见
3:作用:对代码解释说明
1:标签 又称元素,html的基本组成单位
2:分类:单标签、双标签
双标签:
4:html:标准结构:! + 回车可自动生成
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
标签名 | 标签含义 | 单/双标签 |
---|---|---|
h1~h6 | 标题 | 双 |
p | 段落 | 双 |
div | 没有任何含义,用于整体布局(生活中的包装袋)。 | 双 |
1.7块级元素:独占一行(排版标签都是块级元素)
块级元素特点:块级元素中能写行内元素和块级元素;⽆论是否使⽤
换⾏标签,块级元素都会⾃动换⾏;块级元素的宽度、⾼度都可以改变
行内元素:不独占一行
行内元素特点:行内元素 中能写 行内元素,但不能写 块级元素;内联元素也叫⾏内元素,最主要的特点是 不换⾏ 。
1.8:标签和
标签的区别:⽤在⽹⻚上,默认情况下它们都是起到加粗字体的作⽤
标签:仅仅是在样式上有加粗效果,不具备HTML语义;
标签:不仅是在样式上有加粗效果,具备HTML语义,表示强调
1.9标签和
标签的区别:⽤在⽹⻚上,默认情况下它们都是起到字体倾斜的作⽤
标签(emphasize的缩写)⽤来强调标签中的内容很重要,同时将标签中的字体显示为斜体; 标签没有强调作⽤,只是在样式上起到明显的效果,将标签中的⽂字样式显示为斜体
1:超链接作用:从当前页面进行跳转。可以实现:①跳转到指定页面、②跳转到指定文件(也可触发下载)、③跳转到锚点位置、④唤起指定 应用。
2:绝对路径和相对路径:
相对路径不带有盘符,通常是以HTML⽹⻚⽂件为起点,通过层级关系描述⽬标⽂件的位置 。绝对路径⼀般是指带有盘符的路径或者完整⽹络地址
3:跳转到网页:
<a href="https://www.jd.com/" target="_blank">去京东a>
<a href="./10_HTML排版标签.html" target="_self">去看排版标签a>
4:跳转到文件:
<a href="./img/自拍.jpg">看自拍a>
<a href="./video/电影.mp4">看电影a>
<a href="./resource/猪.gif">看猪a>
<a href="./resource/人.pdf">人a>
<a href="./resource/资源.zip">资源a>
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影a>
5:锚点:
设置锚点:
<a name="test1">a>
<h2 id="test2">我是一个位置h2>
使用锚点:
<a href="#test1">去test1锚点a>
<a href="#">回到顶部a>
<a href="demo.html#test1">去demo.html页面的test1锚点a>
<a href="">刷新本页面a>
<a href="javascript:alert(1);">点我弹窗a>
6:唤起应用:
<a href="tel:10010">电话联系a>
<a href="mailto:10010@qq.com">邮件联系a>
<a href="sms:10086">短信联系a>
1:表格使用标签
table :表格
caption :表格标题
thead :表格头部
tbody :表格主体
tfoot :表格注脚
tr :每一行
th 、 td :每一个单元格(备注:表格头部中用 th ,表格主体、表格脚注中用: td )
<table>
<caption>表格标题caption>
<thead>
<tr>
<th>th>
<th>th>
<th>th>
tr>
thead>
<tbody>
<tr>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
tr>
tbody>
table>
2:常用属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ButJoSKc-1690788172142)(/…/1689431586144.png)]
3:跨行跨列
rowspan :指定要跨的行数。
colspan :指定要跨的列数。
3⾏3列表格
<table border="1" cellspacing="0" width="300" height="180">
<tr>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
tr>
table>
合并第1⾏的第2列和第3列
合并第1列的第2⾏和第3⾏
<table border="1" cellspacing="0" width="300" height="180">
<tr>
<td>td>
<td colspan="2">td>
tr>
<tr>
<td rowspan="2">td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
tr>
table>
1:常用属性及格式:
<img src="../img/html5.png" alt="图⽚⾛丢了~">
2:常见图片格式:
jpg 格式:
概述:扩展名为 .jpg 或 .jpeg ,是一种有损的压缩格式(把肉眼不容易观察出来的细节 丢弃了)。
主要特点:支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
使用场景:对图片细节没有极高要求的场景,例如:网站的产品宣传图等 。—— 该格式网 页中很常见。
png 格式:
概述:扩展名为 .png ,是一种无损的压缩格式,能够更高质量的保存图片。
主要特点:支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
使用场景:①想让图片有透明背景;②想更高质量的呈现图片;例如 :公司logo图、重要配 图等。
bmp 格式:
概述:扩展名为 .bmp ,不进行压缩的一种格式,在最大程度上保留图片更多的细节。
主要特点:支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动 态图。
使用场景:对图片细节要求极高的场景,例如:一些大型游戏中的图片 。(网页中很少使 用)
gif 格式:
概述:扩展名为 .gif ,仅支持256种颜色,色彩呈现不是很完整。
主要特点:支持的颜色较少、支持简单透明背景、支持动态图。
使用场景:网页中的动态图片。
webp 格式:
概述:扩展名为 .webp ,谷歌推出的一种格式,专门用来在网页中呈现图片。
主要特点:具备上述几种格式的优点,但兼容性不太好,一旦使用务必要解决兼容性问题。
使用场景:网页中的各种图片。
base64 格式
本质:一串特殊的文本,要通过浏览器打开,传统看图应用通常无法打开。
原理:把图片进行 base64 编码,形成一串文本。
如何生成:靠一些工具或网站。
如何使用:直接作为 img 标签的 src 属性的值即可,并且不受文件位置的影响。
使用场景:一些较小的图片,或者需要和网页一起加载的图片。
1:有序列表:
<h2>要把大象放冰箱总共分几步h2>
<ol>
<li>把冰箱门打开li>
<li>把大象放进去li>
<li>把冰箱门关上li>
ol>
2:无序列表
<h2>我想去的几个城市h2>
<ul>
<li>成都li>
<li>上海li>
<li>西安li>
<li>武汉li>
ul>
在ul和li中间不能嵌套其他标签
去掉前面圆点:list-style:none
3:嵌套列表:
<h2>我想去的几个城市h2>
<ul>
<li>成都li>
<li>
<span>上海span>
<ul>
<li>外滩li>
<li>杜莎夫人蜡像馆li>
<li>
<a href="https://www.opg.cn/">东方明珠a>
li>
<li>迪士尼乐园li>
ul>
li>
<li>西安li>
<li>武汉li>
ul>
4:自定义列表
<h2>如何高效的学习?h2>
<dl>
<dt>做好笔记dt>
<dd>笔记是我们以后复习的一个抓手dd>
<dd>笔记可以是电子版,也可以是纸质版dd>
<dt>多加练习dt>
<dd>只有敲出来的代码,才是自己的dd>
<dt>别怕出错dt>
<dd>错很正常,改正后并记住,就是经验dd>
dl>
总结:
列表分类 | 说明 |
---|---|
有序列表 | 表示有序列表, 表示列表中的每⼀项,默认使⽤阿拉伯数字编 号。 |
无序列表 | 表示⽆序列表, 表示列表中的每⼀项,默认使⽤ ● 符号作为作 |
自定义列表 | 表示定义列表, 表示定义术语、 表示定义描述。⼀般情况下,每个 搭配⼀个 ,⼀个 可以包含多对 和 。 |
1:语法格式
<video src="../video/402890330.mp4"poster="../img/loadingfailed.webp" (controls autoplay loop)>video>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lpCviHfS-1690788172144)(/…/1689434038816.png)]
<audio src="../audio/mojito.mp4" controls autoplay loop>当前浏览器不⽀持audio标签audio>
⽤户账号:<input type="text" name="username" placeholder="请输⼊账号" maxlength="10" size="25">
⽤户密码:<input type="password" name="pwd" placeholder="请输⼊密码" maxlength="6">
会⾃动验证 email 输⼊域值的合法性
⽤户邮箱:<input type="email" placeholder="请输⼊您的邮箱" name="useremail"/>
⾃动验证url输⼊格式
⽹址:<input type="url" placeholder="请输⼊⽹址">
于应该包含数值的输⼊域
价格:<input type="number" value="4" step="2" max="20" min="2">
⽤于搜索域,⽐如站点搜索或 Google 搜索(有一个清空的” × “)
搜索:<input type="search" name="search" placeholder="请输⼊要搜索的内容">
元素:所在城市:
<input list="city">
<datalist id="city">
<option value="⻄安市">Xi'Anoption>
<option value="延安市">YanAnoption>
<option value="安康市">AnKangoption>
<option value="汉中市">HanZhongoption>
datalist>
代表隐藏域,隐藏域在⻚⾯中对于⽤户是不可⻅的,通常⽤来传递参数;⽤户在点击 按钮将表单数据发送到后台时,隐藏域的数据也会⼀起被发送到服务器上
<form action="https://www.baidu.com" method="get">
<input type="hidden" name="userid" value="0001">
账号:<input type="text" name="username"><br><br>
密码:<input type="password" name="userpwd"><br><br>
<input type="submit">
form>
定义表单的单选框选项
⽤户性别:
<input type="radio" name="gender" value="man"checked="checked">男
<input type="radio" name="gender" value="woman">⼥
复选框可以选取⼀个或多个选项
⽤户爱好:
<input type="checkbox" name="habbit" value="lanqiu">篮球
<input type="checkbox" name="habbit" value="zuqiu" checked>⾜球
<input type="checkbox" name="habbit" value="yumaoqiu">⽻⽑球
⽤于在⽹⻚中上传⽂件
上传头像:<input type="file" name="file">
⽤在input字段主要⽤于选取颜⾊
颜⾊:<input type="color" name="color">
允许选择⼀个时间
体检时间:<input type="time">
允许你从⼀个⽇期选择器选择⼀个⽇期
体检⽇期:<input type="date">
允许你选择⼀个⽇期和时间 (⽆时区)
⽇期时间:<input type="datetime-local">
允许选择周和年
体检星期:<input type="week">
允许选择⼀个⽉份
体检⽉份:<input type="month">
元素:⽤来定义下拉列表
所在省份:
<select name="sheng">
<option value="ShanXi">陕⻄省option>
<option value="HeNan">河南省option>
<option value="YunNan" selected="selected">云南省option>
<option value="GuiZhou">贵州省option>
select>
元素:表多⾏⽂本框,⼜叫做⽂本域
<textarea cols="30" rows="10" placeholder="请写下⼀段⾃我介绍吧~">textarea>
<input type="submit" value="登录">
<input type="button" value="登录">
标签中的submit<button type="submit">登录button>
标签中的button类型<button type="button">登录button>
<input type="reset">
<button type="reset">button标签中的重置button>
标签<form action="URL" method="get/post">
表单中的其他标签
form>
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索button>
form>
6.标签:⽤于绑定⼀个表单元素,当点击
标签内的⽂本时,浏览器会⾃动将光标
转到对应的表单元素上,⽤于增加⽤户体检
<form action="http://www.apesource.com">
登录邮箱:<input type="email" /><br><br>
<label for="username">登录账号:label><input id="username"/>
form>