目录
一.网页基础知识
1.网页组成:
文字, 图片,音频, 视频,超链接
2.网页背后本质
前端程序员写的代码 (通过浏览器的转化(渲染和解析)成用户看到的网页)
3.浏览器
网页显示,运行的平台, IE,Firefox,Chrome,Safari(苹果电脑自带), Opera欧朋
4.渲染引擎(浏览器内核)
浏览器中专门对代码进行解析渲染的部分 . 浏览器出品的公司不同,内在渲染引擎也不同,导致解析相同代码时,速度,性能,效果也不同.
5.Web标准
- 不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
- Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一
二.HTML
1.概念
Hyper Text Markup Language 文本标记语言. 专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
简单创建方式: 文本文件-->后缀.html
2.HTML骨架结构
标签:
- html标签 网页的整体
- head标签 网页的头部
- body标签 网页的身体
- title标签 网页的标题
开发工具: 注重开发效率和便捷性
Visual Studio Code(速度快、体积小、插件多), Webstorm, Sublime, Dreamweaver, Hbuilder
!+tab (.html)----自动生成结构标签
alt+b / 右击+Open in Default Browser ---- 快速查看网页效果
3.语法
(1)注释
- 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
- 浏览器执行代码时会忽略所有的注释 ctrl + /
(2)标签结构
- 标签由<、>、/、英文单词或字母组成.并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
- 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
(3)标签关系
a.父子关系(嵌套)
b.兄弟关系(并列)
三.标签
1.排版标签
- <h></h>标题标签 1~6级 文字均加粗,变大 独占一行
- <p></p>段落标签 段落间存在间隙 独占一行
- <hr> 水平线标签 分割不同主题内容的水平线 主题的分割转换 单标签,页面中显示一条水平线
2.文本格式化标签
单词 突出重要性的强调语境 都没有换行
3.媒体标签
(1)路径
绝对路径: 指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
相对路径 * : 从当前文件出发找目标文件
- 同级: 同一文件夹 ./ 文件名+后缀 或 直接文件名+后缀
- 下级: 目标文件在下级目录中 下级文件夹/文件名+后缀
- 上级: ../文件名+后缀名
(2)图片标签
<img src=" " alt=" " >
- 标签的属性写在开始标签内部, 标签上可以同时存在多个属性, 属性之间以空格隔开, 标签名与属性之间必须以空格隔开, 属性之间没有顺序之分
属性名,属性值:
-
src 目标图片的路径 同一文件夹:图片名 不同文件夹
-
alt 替换文本 图片加载失败时显示
-
title 提示文本 鼠标悬停时显示 此属性也可用于其他标签
-
width 图片宽度 height 图片高度 二者定义其一即可,等比例缩放
(3)音频标签
<audio src=" " controls=" "></audio>
- controls属性: 显示播放的控件 ①autoplay 自动播放(部分浏览器不支持) ②loop 循环播放
-
MP3、Wa v 、Ogg 格式
(4)视频标签
<video src=" " controls ></video>
- controls属性: ①autoplay 谷歌浏览器中需配合muted实现静音自动播放 ②loop 循环播放
- MP4 ,WebM, Ogg 格式
(5)链接标签
<a href=" " target=" ">超链接</a>
- 跳转网页用地址, 本机连接用路径即可, 自带颜色的标签 # 表空链接
- target 属性: _self 默认值,在当前窗口中跳转(覆盖原网页) _blank 新窗口跳转,保留原网页
4.列表标签
(1)应用场景
- 场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
- 特点：按照行的方式，整齐显示内容
- 种类：无序列表、有序列表、自定义列表
(2)无序列表
在网页中表示一组无顺序之分的列表，如：新闻列表
显示特点: 列表每一项前默认显示圆点标识
- <ul></ul> 无序列表整体,用于包裹li标签 只允许嵌套<li>
- <li></li> 无序列表中的每一项, 用于包含每一行内容 可包含任何内容
(3)有序列表
在网页中表示一组有顺序之分的列表，如：排行榜
显示特点: 列表每一项前默认序号标识
- <ol></<ol> 有序列表整体,用于包裹li标签 只允许嵌套<li>
- <li></li> 有序列表中的每一项, 用于包含每一行内容 可包含任何内容
(4)自定义列表
在网页的底部导航中通常会使用自定义列表实现。
显示特点： dd前会默认显示缩进效果
- <dl></dl> 自定义列表整体,包裹dt/dd 只允许嵌套dt/dd标签
- <dt></dt> 自定义列表主题 可包含任何内容
- <dd></dd> 自定义列表针对主题每一项内容 可包含任何内容
5.表格标签
(1)应用场景
场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
(2)表格标签
- <table></table> 表格整体,可用于包含多个tr
- <tr></tr> 每一行, 包裹td
- <td></td> 单元格, 包裹内容
相关属性
设置表格基本展示效果, 实际开发样式效果推荐CSS设置
e.g: <table border="1" width="500" height="50">
- border 属性值:数字 边框宽度
- width 表格宽度
- height 表格高度
(3)表格标题及表头单元格标签
在表格中表示整体大标题和一列小标题
- <caption></caption> 表格整体大标题默认表格整体顶部居中位置显示 在<table>内部
- <th></th> 小标题,通常表格第一行,默认内部文字加粗居中显示 在<tr>内部(替换<td>)
表格结构标签: 包裹<tr> ,可省略
- thead 表格头部(如第一行)
- tbody 表格主体
- tfoot 表格底部(如最后一行)
(4)合并单元格
将水平或垂直多个单元格合并成一个单元格
- rowspan 合并个数 跨行合并 垂直合并成一个
- colspan 合并个数 跨列合并 水平合并成一个
注意:
- 明确合并哪些单元格, 通过左上原则，确定保留谁删除谁(上下合并→只保留最上的，删除其他; 左右合并→只保留最左的，删除其他)
- 只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead,tbody,tfoot）
6.表单标签
在网页中显示收集用户信息的表单效果，如：登录页、注册页
(1)input标签
通过type属性值的不同，展示不同效果 e.g: <input type=" " /> 不换行
(2)常用表单控件
- 输入单行文本表单控件: placeholder 占位符, 提示用户输入内容的文本 type="text"
- 多选一的单选表单控件: name 分组,相同属性值单选框为一组,同时只能有一个被选中 checked默认选中 type="radio"
- 文件选择表单控件: multiple 多文件选择 type="file"
(3)按钮标签
input标签 <input type=" ">
button标签 <button type=" "></button> 包裹文字,图片等
属性值:
- submit 提交按钮,点击之后提交数据给后端服务器
- reset 重置按钮 点击之后恢复表单默认值
- button 普通按钮 默认无功能,之后配合js添加功能
(4)下拉菜单标签
<select></select> 下拉菜单整体
<option></option> 下拉菜单的每一项
selected 属性 下拉菜单中的默认选中
(5)文本域标签
<textarea></textarea> 提供可输入多行文本的表单控件,自动换行
属性: cols 宽度 rows 行数
右下角可拖拽改变大小, 实际开发样式效果推荐CSS
(6)label标签
常用于绑定内容与表单标签的关系 <label></label>
使用方法①：<input type="radio" name="sex" id="nan"><label for="nan">男</label>
- 使用label标签把内容（如：文本）包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法②： <label><input type=radio name="sex" >女</label>
- 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
(7)布局标签
①没有语义的布局标签
实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
<div></div> 一行只显示一个(独占一行)
<spar></spar> 一行可显示多个
②有语义的布局标签
在HTML5新版本中，推出了一些有语义的布局标签供开发者使用,此处标签显示特点和div一致，但是比div多了不同的语义
(8)字符实体
案例: 小m的信息页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小m的信息页啦</title> <!-- 网页标题 -->
</head>
<body>
<form action="" method=""> <!-- <!--表单域标签,action="地址"-->-->
<table border="1" cellpadding="10" > <!--设置表格线宽度,单元格边距-->
<caption><strong>M'information</strong></caption> <!--表单标题-->
<!--空格-->
<img src="D:\wallpaper\NoFaceman.jpg" alt="this is mm's head!" title="no face man" width="100"/>
<!--插入图片, 地址 如果图片不能显示,则显示本语句 鼠标悬停文字 图片宽度,高度可根据比例自行调节 -->
<tr> <!--表格内 行-->
<td > <!--表格内 列-->
name: <input type="text" placeholder="M_m"></td>
<!-- 文本框 文本框内默认内容 若属性值为password,则输入内容显示为圆点-->
</tr>
<tr>
<td >sex:
<input type="radio" name=sex">boy
<input type="radio" name=sex" checked="">girl
<!-- 单选按钮 设置name属性值,相同属性为一组,只能一个被选中 checked默认选择-->
</td>
</tr>
<tr>
<td >age:
<select> <!--下拉菜单-->
<option>16</option><option>18</option><option>20</option><option>22</option> <!--下拉菜单每一项内容-->
</select>
</td>
</tr>
<tr>
<td>hobby:
<input type="checkbox" checked/> sports <!--多选框-->
<input type="checkbox" /> food
<input type="checkbox" /> games
</td>
</tr>
<tr>
<td>music:
<audio src="D:\wallpaper\music.mp3" controls="autoplay" ></audio> <!-- 音频标签-->
<br><hr >
video:
<video src="D:\wallpaper\video.mp4" controls autoplay muted height="200" width="400"></video> <!--视频标签-->
</td>
</tr>
<tr>
<td>list:
<ul> <!--无序列表-->
<li>xuexitongshuaka</li> <!--列表中每一项内容-->
<li>shiyanbaogao </li>
</ul>
</td>
</tr>
<tr>
<td>
<input type="file" multiple /> <!--打开文件 muliple按Ctrl键可添加多个-->
<a href="M:\javaStudy\Web\HTML\code\html.1\new_file.html" target="_blank">跳转到哈哈哈哈</a> <!--跳转到其他页面,不覆盖-->
</td>
</tr>
<tr>
<td >
<input type="reset" value="reset" >
<!--设置按钮,以及按钮上显示的字 需要设置表单域标签,否则无法重置内容-->
yeah!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</td>
</tr>
</table>
</form>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
