1 Unit
1 Unit学习路径:
- 基础认知
- HTML标签学习
- 综合案例
- 源代码链接: gitee.com/gotoworlk/w…
基础认知
认识网页-了解:
1. 网页由哪些部分组成?
答案: 文字/图片/音视频/超链接.
2. 网页的背后本质是什么?
答案: 前端程序员写的代码.
3. 前端代码是通过什么软件转换成用户眼中的页面?
答案: 通过浏览器的引擎解析和渲染成用户看到的网页.
常见的浏览器:
1. IE浏览器(已经停止维护了)
2. 火狐浏览器
3. 谷歌浏览器(常用)
4. Safari(苹果系统内置)
5. 欧朋浏览器
浏览器渲染:(浏览器内核)
1. IE => Trident
2. FreFox => Gecko
3. Safari => Webkit
4. chrome => V8
5. Opera => Blink
注意: 浏览器渲染引擎不同,导致解析相同代码的速度和性能效果都不相同
Web标准:
由于各厂商渲染引擎的不同,导致前端工程师编写的代码效果不尽相同,用户体验极差. Web标准分成三部分构成:
| 结构 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式(如: 颜色,大小等) |
| 行为 | JavaScript | 网页模型的定义和页面交互 |
HTML 标签学习
基本标签
HTML: 超文本标记语言 案例学习:
问题: 将页面中的文字加粗
答案:
创建一个网页文件,名称为index.html,通过该<strong>标签进行文字效果加粗. 下面代码演示👇🏻
代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<strong>加粗后:HelloWorld</strong><br>
加粗前:HelloWorld
</body>
</html>
HTML骨架结构:
网页中固定的结构,其中包含:头部/身体,还可以细分,这类似一种规范,定义页面内容的书写区域和标准定义,每个HTML文件都有基础的骨架内容. 代码示例看下方👇.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>网页标签</title>
head是头部区域
</head>
<body>
body是身体区域
网页内容书写区域
</body>
</html>
HTML中注释:
注释用于在代码中书写给程序员看的一段代码的文字说明,不会被浏览器渲染给用户看<!--这是注释的格式-->.代码示例看下方👇.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<!-- 此处是注释: 这是一段加粗的字体 -->
<strong>加粗后:HelloWorld</strong><br>
</body>
</html>
标签的样式:
标签分为两种,一种是单标签如<img>,还有一种是双标签<strong></strong>,对于浏览器页面的标签使用是有非常严格的规定,必须要按照书写格式去写,虽然浏览器默认会优化程序员写的代码,但是不建议这样做.
注释的快捷键:
1. VsCode: ctrl + /
2. IDEa: ctrl + /
标签的构成:
1. 开始标签
2. 包裹的内容或者子标签
3. 结束标签
HTML标签之间的关系:
在HTML中存在父子或者兄弟标签的关系,其实就是表现在书写标签层级,如果A标签包含B标签,A标签就是B标签的父标签,逻辑相同,如果AB标签层级相同,那就是兄弟关系.
标题和段落标签:
标题标签: h1 ~ h6,改标签用于突出文字等级数字越小字体越大文字会加粗,常用于网页的页面内容区的标题,百度等搜索引擎也会优先搜索标题标签.
段落标签: p ,该标签用于展示一段文字,多个p标签上下会有空行,用来表示段落,后续可以通过css修饰.
换行和水平分割线标签:
换行标签: br ,表示当前标签位置处换行
分隔线标签: hr , 浏览器会渲染一条平行的分割线
文本格式化标签:
| 普通标签 | 说明 |
|---|---|
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
| 语义标签 | 说明 |
|---|---|
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
媒体标签:
图片标签: img ,用于引用本地或网络图片到当前页面中展示.
音频标签: audio , 用于在当前页面中展示音频播放器,src指定播放的音频文件位置,在某些浏览器中该标签无法自动播放,所以添加指定属性,<audio src="音频文件地址" controls autoplay>音频</audio>.
视频标签: video , 用于在当前页面中展示视频播放器,<video src="./video/01.课程内容的介绍.mp4" controls autoplay>视频播放器</video>.
媒体标签属性:
| 名称 | 功能 |
|---|---|
| src | 指定文件路径 |
| controls | 显示播放的控件 |
| autoplay | 音频自动播放(部分浏览器不支持) |
| autoplay | 视频自动播放(谷歌浏览器需要配合muted属性实现静音播放) |
| loop | 循环播放 |
超链接标签:
超链接标签: a ,用于跳转到其他网页内容,可以使用超链接,href属性用于指向跳转的地址,可以是网络连接,也可以是本地文件地址.
列表标签:
列表标签应用场景,常用于页面同级标签展示如下图
列表标签关系:
无序列表: ul > li
有序列表: ol > li
自定义列表: dl > dt dd ,dt 和 dd 是同级标签
表格标签:
当前页面展示数据可以使用表格进行展示
表格标签关系:
table > thead tr > td ,thead 和 tr 同级
| 标签名 | 说明 |
|---|---|
| table | 表格外框 |
| thead | 表格头 |
| tr | 表格一行 |
| td | 一个单元格 |
表格属性:
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 表框宽度 |
| width | 数字 | 表格整体宽度 |
| height | 数字 | 表格整体高度 |
表格标签合并单元格属性:
1. rowspan 从当前单元格向左合并几个单元格
2. colspan 从当前行向下合并几行
表单系列标签:
1. form 表单标签,包括表单所有内容,一个form 代表一个表单
2. input(单标签)系列标签
- placeholder: 文本输入框提示信息
- value: 输入框默认填写内容
3. textarea: 多行文本域标签,用于书写多行文本
4. select > option 下拉菜单标签,用于展示下拉菜单,option可以配合selected属性实现默认选择
5. label :用于将文字绑定到某个文本框元素,当点击文字会自动聚焦input元素
input属性列表:
| 属性名 | 属性值 | 效果 |
|---|---|---|
| type | text | 文本框,用于输入单行文本 |
| type | password | 密码框,用于输入单行密码密文显示哦 |
| type | 密码框,用于输入单行密码密文显示哦 | |
| type | radio | 单元框,用于多选一,name属性值必须相同单选才能生效 |
| type | checkbox | 多选框用于多选,name属性值必须相同,视为一个多选属性 |
| type | file | 文件选择,单文件上传,配合multiple属性实现多文件上传 |
| type | submit | 提交按钮,带有提交表单动作 |
| type | rest | 重置按钮,清空表单内容 |
| type | button | 按钮,没有任何默认动作,就是个按钮 |
textarea属性列表:
| 属性名 | 属性值 | 效果 |
|---|---|---|
| cols | 纯数字 | 控制文本框列数 |
| rows | 纯数字 | 控制文本框行数 |
| name | 字符串 | 当前文本框属性名称 |
lable标签 属性列表:
| 属性名 | 属性值 | 效果 |
|---|---|---|
| for | 元素id | 填写表单元素id,用于绑定关系 |
布局标签
没有语义的布局标签- div 和span,在开发前台网页时候会大量频繁的使用div和span这两个没有语义的布局标签.
1. div 标签: 一个div标签独占一行,不管空余多少
2. span标签: 一行可以显示多个
有意义的布局标签:(了解)
1. header : 网页头部标签
2. nav: 网页导航
3. footer 网页底部
4. aside 侧边栏
5. section 网页区块
6. article 网页文章
以上语义化标签和div功能相同,只是可以通过名字了解其作用,但其兼容性不是很好,手机端等可能无法支持.
特殊字符
HTMl 特殊字符blog.csdn.net/jack_rose_m…
案例
学生信息表格:
完成以下图片样式内容
<!-- 学生信息表案例 -->
<table border="1 solid black">
<thead>
<td>年级</td>
<td>姓名</td>
<td>学号</td>
<td>班级</td>
</thead>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
<tr>
<td>评语</td>
<td colspan="3">
你们都很优秀
</td>
</tr>
</table>
表单完成以下图片样式:
<!-- 表单案例 -->
<form action="#">
<h1>青春不常在,抓紧谈恋爱</h1>
<hr>
<label for="name">
昵称:
<input id="name" type="text" placeholder="请输入昵称">
</label>
<br>
性别:
<label for="nan">
<input id="nan" name="sex" type="radio" >男
</label>
<label for="nv">
<input id="nv" name="sex" type="radio" >女
</label>
<br>
所在城市:
<select name="city">
<option value="shanghai">上海</option>
<option value="beijing" selected>北京</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
<br>
婚姻状况:
<label for="wei">
<input id="wei" name="mi" type="radio" >未婚
</label>
<label for="yi">
<input id="yi" name="mi" type="radio" >已婚
</label>
<label for="pass">
<input id="pass" name="mi" type="radio" >保密
</label>
<br>
喜欢类型:
<label for="keai">
<input id="keai" name="likes" type="checkbox" >可爱
</label>
<label for="xinggan">
<input id="xinggan" name="likes" type="checkbox" >性感
</label>
<label for="yujie">
<input id="yujie" name="likes" type="checkbox" >御姐
</label>
<label for="xiaoxianrou">
<input id="xiaoxianrou" name="likes" type="checkbox" >小鲜肉
</label>
<label for="dashu">
<input id="dashu" name="likes" type="checkbox" >大叔
</label>
<br>
个人介绍:<br>
<textarea name="jieshao"cols="50" rows="6"></textarea>
<h2>我承诺</h2>
<ul>
<li>年满18岁,单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<label for="ty">
<input type="checkbox" name="tongyi" id="ty">
我同意所有条款
</label>
<br>
<input type="submit" value="免费注册">
<input type="reset" name="重置" id="">
</form>
