前端视频学习（一、HTML）

最新推荐文章于 2023-04-03 17:20:29 发布
最新推荐文章于 2023-04-03 17:20:29 发布
阅读量1.5k 收藏 13
点赞数 2
分类专栏： HTML 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30162859/article/details/82973396
版权

目录

不熟悉的内容备注：
1. 浏览器内核
2. 文本标签文本标签
3. 超链接标签的 target属性
4. 锚点
5. base标签
6. 表格的结构
7. 表格的属性

课程安排：

  • 前端基础：
    • html 2天
    • css 7天
    • 传统布局 9天
    • HTM5+CSS3 3天
  • 高级：
    • js
    • 移动web
    • php
    • node.js
    • vuejs
    • 其他框架
    • 微信

1. 开发工具

  • Chrome
  • Typora
  • photoshop

2. 浏览器内核

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

  1. 渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

  2. JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

  1. Trident(IE内核)
    国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。

    代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。

Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。

  1. Gecko(firefox)
    Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。

  2. webkit(Safari)
    Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。

    现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了），苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。

    代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，

  3. Chromium/Blink(chrome)

    在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。
    ​
    大部分国产浏览器最新版都采用Blink内核。二次开发

  4. Presto(Opera)
    Presto（已经废弃） 是挪威产浏览器 opera 的 “前任” 内核，为何说是 “前任”，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

  5. 移动端的浏览器内核主要说的是系统内置浏览器的内核。

    Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。

    iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的

3. Web标准

  • 结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 最重要
  • 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
  • 行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript

4. HTML结构

4.1 单标签与双标签

4.2 标签的嵌套关系 和 并列关系

4.3 DOCTYPE

<!DOCTYPE html>
标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

4.4 meta-charset

<meta charset="UTF-8">

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312:

  • gb2312 简单中文 包括6763个汉字
  • BIG5 繁体中文 港澳台等用
  • GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
  • UTF-8则包含全世界所有国家需要用到的字符

5. HTML标签

5.1 普通标签

标签 含义
<head> HTML文档头部信息
<title> HTML文档标题
<h1> ~ <h6> 文本标题
<p> 段落
<hr> 水平线horizontal
<br> 换行符
<div> 块状布局
<span> 跨度布局

注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用，或者页面中最重要标题信息。

5.2 文本格式化标签

标签 显示效果
<b></b> <strong></strong> 文本以粗体方式显示
<i></i><em></em> 文本以斜体方式显示
<s></s><del></del> 文本以删除线方式显示
<u></u><ins></ins> 文本以下划线方式显示
  • b i s u 只有使用 没有 强调的意思 ,但网页中常用它们做一些小点缀
  • strong em del ins 语义更强烈

5.3 图像标签

<img src="" alt="" title=""  />
属性 属性值 描述
src URL 图像路径
alt 文本 图像无法展示时显示的文本
title 文本 鼠标悬停时的内容
width 像素 图象宽度
height 像素 图象高度
border 数字 图像边框宽度

width和height只要设置一个就行了，图片会按比例缩放；都设置容易让图像变形

最低0.47元/天 解锁文章
KeYY1992
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div学习之div中dl-dt-dd的详解
weixin_30467087的博客
10-22 1171
dl dt dd认识及dl dt dd使用方法 <dl>标签用于定义列表类型标签。 dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一、dl dt dd认识 - TOP html <dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标...
一文搞懂HTML5标签新特性【视频、音频、语义】
2401_83916394的博客
03-29 917
导航栏标签某个区域3.效果展示二、视频标签video1.属性简介src=“…/mi.mp4” 存放视频的路径autoplay=“autoplay” 是否自动播放muted=“muted” 静音播放loop=“loop” 循环播放controls=“controls” 添加控件poster=“…/下载.jpg” 加载时等待的图片2.代码示例。
HTML简介（二）
weixin_43403215的博客
07-30 305
列表标签与表格标签 1.列表标签 什么是列表？ 把…制成表,以表显示容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是 整齐 、整洁、 有序。 （1）无序列表 无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下： <ul> <li>列表项1</li> <li>列表项2</li> <li&...
9.8学习内容
Chen_yanliang的博客
09-11 320
第六天 目录 一.需要了解的内容 二.重点内容 一.需要了解的内容 二.重点内容 2.1 路径 相对路径： 1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif...
HTML 02-02 列表 表单 标签笔记
m0_55170432的博客
03-20 365
1.列表标签！！！不需要写table 加table 表格 不是列表啊 列表不要写在table在ul ol dl前面!! 列表是用来布局的。因为非常整齐和自由。 列表的概念：容器里面装载着结构，样式一致的文字或者图表的一种形式，叫列表 特点：列表最大的特点就是，整齐、整洁、有序，跟表格类似，但是他可组合自由度会更高 1.1无序列表ul（重点） 无序列表的各个列表直接没有顺序级别之分，是并列的。 用的最多的，只要导航栏什么的都会用到 <ul> <li>列表项1</..
Web前端基础案例——跳转
weixin_61275790的博客
04-03 105
【代码】Web前端基础案例——跳转。
Web前端视频学习资料50G
最新发布
06-01
Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习...
前端学习视频
10-09
生鲜超市的静态网页，有导航，有列表，使用这个可以掌握HTML+css布局的方式，比较生动形象。
Web前端HTML视频教程课堂笔记
12-17
本视频教程主要讲解了HTML基础语法，内容主要包括：HTML概述、W3C概述、B/S架构系统原理、table、背景色与背景图片、超链接、列表、...通过该视频的学习之后，可以开发基本的网页，并且可以看懂别人编写的HTML页面。
web前端视频大全学习资源，内涵css，html等零基础视频
06-15
(如果资源失效，请私信作者获取)本套视频为web前端开发全套视频教程，适合零基础系统学习前端，可以边看边学
前端学习推荐视频.md
02-06
对于学习了一段时间的前端小白，学完html，css，js等基础之后就可以看这些视频，整理的视频都是自我感觉不错的
前端部分视频详细解析
03-23
有详细的前端基础视频，还有大量的资源原码，可以提供给共同进步的大家一起来探讨，让大家都有新的的进步，欢迎各位志同道合的朋友，小白都可以来进行学习
web前端学习视频（55G）-附件资源
03-05
web前端学习视频（55G）-附件资源
前端教学视频
12-14
2018-12-13买的前端教学视频，给大家分享一下，积分设置成了1，也不多，可以下载下来看看。希望能帮到刚入门的新手
前端开发完整视频
05-08
下载word文档百度云下载需要的视频。前端开发完整视频，涉及HTML\CSS\JS\常用类库框架的教学视频
html视频教程
03-15
什么是HTML?HTML指的是超文本标记语言，它是从事网页设计工作的基础，也是网站开发者必须熟练掌握的一门标记语言。方便html初学者参考学习。
web前端学习视频（55G）
qq_16596635的博客
09-26 2354
点击下载学习视频链接压缩包
前端和后端终极学习视频（百度网盘资料）
热门推荐
圆静居士的专栏
11-05 1万+
(前台) 1.ps 链接: https://pan.baidu.com/s/1mjYbcJA 密码：pqdt 2.HTML5+CSS3从入门到精通.iso 链接:https://pan.baidu.com/s/1mjYbcJA 密码：gdyw 3.Javascript视频教程 链接: https://pan.baidu.com/s/1i6eC5YP 密码：ku5k 4.Jquery视频教程 链接：...
html视频学习
Flora_fairy的博客
06-01 819
生成一篇如何学习前端的步骤
09-11
### 回答1： 1 了解前端开发的基础知识，比如 HTML、CSS 和 JavaScript。2. 通过视频课程或书籍来学习前端技术。3. 通过参加社区讨论、参加技术会议和接触项目来提升你的实践技能。4. 练习使用前端框架，比如 React 和 Vue。5. 尝试编写自己的网页应用程序，并且在社交媒体上分享你的作品。 ### 回答2： 学习前端的步骤可以分为以下几个阶段： 第一阶段：打下基础 首先，了解前端的基本概念和相关技术，包括HTML、CSS和JavaScript等。可以通过网上的教程、视频、书籍或者参加前端培训课程来学习这些基础知识。 第二阶段：深入学习 掌握HTML语义化、CSS布局和样式设计等高级技术。此外，学习JavaScript的高级特性、DOM操作以及常用的框架和库，如React、Vue.js等。可以通过阅读官方文档、实践项目、参与在线论坛等方式深入学习。 第三阶段：实践项目 找到一些适合自己的小项目，并动手尝试开发。这样可以将之前学到的知识运用到实际中，提升自己的编码能力和解决问题的能力。可以从简单的静态页面开始，逐渐挑战更复杂的交互功能。 第四阶段：持续学习和提升 前端技术日新月异，需要不断学习和跟进最新的发展。可以关注前端相关的博客、开发者社区和技术论坛，了解最新的技术趋势和最佳实践。同时，尝试参与开源项目或者自己发起一些小项目，与其他开发者进行交流和合作。 此外，平时还可以多阅读一些优秀的开源代码和技术文章，加深对前端技术的理解。练习编码技巧和思维能力，提升自己的代码质量和效率。 总结起来，学习前端需要打下基础、深入学习、实践项目和持续学习等几个步骤。这是一个循序渐进的过程，需要不断积累和实践。希望以上的步骤能够帮助你更好地学习前端技术。 ### 回答3： 学习前端的步骤可以分为以下几个阶段。 1. 基础知识学习：首先需要学习基础的网页技术，包括HTML、CSS和JavaScript。可通过在线课程、教程或者参考书籍进行学习。掌握HTML标记语言、CSS样式表和JavaScript脚本语言的基本语法和使用方法，了解它们的作用和相互关系。 2. 框架和库的学习：学习使用前端开发中常用的框架和库，如React、Vue等。这些框架和库可以提高开发效率，简化开发流程，学习它们可以使前端开发更加高效。可以通过阅读官方文档、参加在线课程或者实践项目来掌握它们的基本使用方法。 3. 实践项目：通过实际的项目实践来提升自己的前端技能。可以尝试自己设计并开发一个网站或者参与到开源项目中，通过实际操作来巩固自己的知识和技能，并学习如何解决实际问题。 4. 持续学习和更新：前端技术发展迅速，需要不断学习和跟进最新的技术和趋势。可以通过关注前端技术博客、参与技术社区或者参加相关的技术活动来与其他前端开发者交流并学习新知识。 5. 深入学习和专业化：前端技术领域非常广阔，可以选择自己感兴趣的方向进行深入学习和专业化。比如前端性能优化、移动端开发、前端工程化等，可以选择进一步学习和探索自己感兴趣的领域，提升自己的专业水平。 总之，学习前端需要耐心和实践，通过理论学习和实际操作相结合，不断提升自己的技术水平和实践能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值