HTML快速入门

最新推荐文章于 2024-10-27 15:48:27 发布
最新推荐文章于 2024-10-27 15:48:27 发布
阅读量243 收藏 3
点赞数 5
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85123349/article/details/139648207
版权

滚动文字设置

1.前端开发三种语言

HTML5                                        网页的结构

CSS3                                         网页的表现

JavaScript                                   网页的行为

2.前端开发三种框架

VUE.JS       React         Angular

3.HTML含义

HTML是英文HyperText Markup Language的缩写，即超文本标记语言。

4.HTML5特性

  1. 良好的语义特性

  2. 强大的绘图功能

  3. 增强的音视频播放和控制功能

  4. HTML5的数据存储和数据处理的功能

  5. 获取地理位置信息

  6. 提高页面响应的多线程

  7. 文件API

5.HTML5开发工具简介

文档编辑工具Nodepad++等

可视化网页开发软件Dreamweaver CS6

集成开发环境WebStorm和IntelliJ IDEA

vscode（推荐）

二、HTML5的文档结构元素

==============

1.HTML元素

HTML元素指的是从开始标记（start tag）到结束标记（end tag）的所有代码。其内容是开始标记与结束标记之间的内容。

2.HTML元素的属性

属性用来说明元素的特征，属性的格式通常为“属性/值”对。

3.HTML的字符实体

字符实体有三部分：一个符号 (&)，一个实体名称，以及一个分号 (😉

空格  &nbsp；     小于号&lt；   大于号&gt；

4.HTML标记的书写规范

所有标记要用尖括号（< >）扩起来；

标记和属性名不区分大小写，建议统一小写；

空格和回车是无效的，需要使用HTML实体；

标记中不能有空格，如把写成<title>；

采用标记嵌套方式可以为同一个内容应用多个标记；

书写注释，方便程序开发。

5.HTML文档的基本结构元素

........ 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。 即当前页面采取的是 HTML5 版本来显示网页. 和标记表示该文档是HTML文档。 和标记表示文档头部信息。 和标记是网页的主体信息

1.头部内容

标记是所有头部标记的容器，它是开始标签后出现的第一个标签，以开始，以结束，开始和结束之间可以包含标题信息、元信息、定义CSS样式和JavaScript脚本代码等。 标记中的内容，一般不会显示在网页上。以下是中所包含的标记。

1.标题标记

只能包含关于网页标题的文本 网页标题

2.元信息标记

标记可提供相关页面的元信息(meta-information)，有以下4种使用方法

  • 字符集charset属性

规定 HTML 文档应该使用哪种字符编码

    
  • 关键字描述

向搜索引擎说明网页的关键字

  • 页面描述

对一个网页概括的描述

  • 页面跳转

<meta http-equiv= “Refresh” content= “时间间隔的秒数；url=要跳转的网站”

3.标签

为页面上的所有链接规定默认地址或默认目标

<basehref= “http://www.baidu.com”>

4.标签

链接外部文件，例如样式表等

2.主体内容

即body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表）等等。HTML 5增加了article、section、nav、aside、header、footer等布局元素，以实现更好的语义解释。

三、HTML5的基本页面元素

==============

1.文本元素

段落标记

和换行标记

段落标记

来描述段落。网页显示时，包含在

标记对中的内容会显示在一个段落里。另起一行使用换行标记
。

标题标记

n取1-6，h1最大，h6最小

块标记
和

是一种块（block）容器，默认的状态是占据一行，而 是一个行间(inline) 容器，其默认状态是行间的一部分。

2.列表元素

有序列表标记

    1.        
    2. 列表信息
    3.        
    4. 列表信息
    5.        
    6. 列表信息
    7.        
    8. 列表信息
    9.         ...   

    type属性可以修改有序列表序号的样式

    属性值          说明

    1              数字1、2…

    a            小写字母a、b…

    A            大写字母A、B…

    i             小写罗马数字i、ii、iii…

    I             大写罗马数字Ⅰ、Ⅱ、Ⅲ…

    start属性可以设置列表序号的起始值。

    无序列表标记

      •        
      • 列表信息
      •        
      • 列表信息
      •        
      • 列表信息
      •        
      • 列表信息
      •         ...   

      无序列表的每个列表项目前默认显示黑色实心圆点。type属性修改无序列表符号的样式，disc实心圆点（默认），square方形，circle空心圆圈

      自定义列表

              关注我们        
      新浪微博
             
      官方微信
             
      联系我们
         

      它是一系列项目和它们的解释。自定义列表以

      标记开始，自定义列表项目以 开始，自定义列表的解释以
      开始。

      3.超链接元素

      超链接属性

      watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b6u6aOO5rSL5rSL,size_20,color_FFFFFF,t_70,g_se,x_16

      target属性可取下表所列各值：

      watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b6u6aOO5rSL5rSL,size_20,color_FFFFFF,t_70,g_se,x_16

      超链接类型

      1.内部链接

      将超链接标记中href属性的URL值设置为相对路径，就可以在HTML文件中定义内部超链接。

      2.外部链接

      外部链接指网页中的链接标题可以链接到网站外部的文件，需要定义外部链接时，在超链接标记中，将其href属性的URL值设置为绝对路径即可。

      3.书签链接

      如果有的网页内容特别多，页面特别长，需要不断翻页才能看到想要的内容，这时，可以在页面中（一般是页面的前部）定义一些书签链接。

      超链接路径

      1.绝对路径

      绝对路径指文件的完整路径，包括文件传输的协议HTTP、FTP等，一般用于网站的外部链接。http://www.baidu.com

      2.相对路径

      文末

      从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

      个人将这段时间所学的知识，分为三个阶段：

      第一阶段：HTML&CSS&JavaScript基础

      第二阶段:移动端开发技术

      第三阶段:前端常用框架

      • 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

      • 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

      2401_85123349
      关注
      HTML快速入门及简单的创建网页实战演示
      m0_73770225的博客
      11-26 4207
      HTML文件结构HTML元素第一个HTML代码添加标题添加并修改图片添加超链接修改网页标题内容居中
      快速入门HTML和CSS
      m0_54129816的博客
      03-12 1864
      提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言这里只是讲一些我自己学习网页制作后认为可以快速掌握的学习方法和小技巧。因为不可能一篇本章就可以把HTML讲的非常清楚明白。感兴趣的可以向下看一看。一、HTML和CSS是什么？二、清楚要重点学什么说回来网页制作这块，我认为重点学习的话是css和javaScript，html的元素常用的会用后，拿过来知道几个结构我觉得差不多了，css才是能让你的网页焕然一新的工具。另外为什么说javascript也是重点？因为学到最后每个人做出来.
      HTML零基础入门教程（详细）
      热门推荐
      ZONGXP的博客
      10-22 23万+
      HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
      HTML入门（详细）
      qq_63525426的博客
      05-03 3万+
      HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
      【Java Web】001 -- HTML快速入门
      汤姆lazy的CSDN博客
      03-28 2937
      HTML快速入门，内容包括：基础标签与样式（标题、超链接、正文、表格、表单、表单项）等。
      cmake快速入门
      不忘初心
      09-12 23万+
      简介 cmake是kitware公司以及一些开源开发者在开发几个工具套件(VTK)的过程中所产生的衍生品。后来经过发展，最终形成体系，在2001年成为一个独立的开放源代码项目。其官方网站是www.cmake.org，可以通过访问官方网站来获得更多关于cmake的信息，而且目前官方的英文文档比以前有了很大的改进，可以作为实践中的参考手册。 下载和安装以及使用：https://fukun.org/archives/0421949.html 一、为何要使用项目构建工具？ ......
      Element快速入门
      ccz80的博客
      07-12 923
      目录一、Element快速入门1. 引入Element 的css、js文件 和 Vue.js（将其copy至webapp下）2. 创建Vue核心对象官网：Element官网如图： 鼠标放上去看看导入成功没 crtl+右键 完整代码如下： 效果：如下 从官网里copy的...
      Groovy快速入门
      聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
      04-13 3万+
      这段代码使用了Groovy的println语句，它与Java中的System.out.println()作用相同，用于在控制台输出一行文本。Groovy是一种面向对象的、动态类型的、基于JVM的编程语言，它与Java高度兼容，同时引入了许多简洁、灵活的语法特性，使得开发更为高效。如果Groovy已成功安装并配置了环境变量，将显示类似于Groovy Version X.Y.Z的输出，其中X.Y.Z代表安装的Groovy版本号。在完成环境准备之后，接下来我们将编写一个简单的Groovy脚本来体验其简洁的语法。
      JavaScript快速入门
      m0_62036548的博客
      06-12 1138
      JavaScript快速入门
      Webpack 快速入门
      SolidCocoi的博客
      06-30 1770
      快速入门 Webpack，体验 js 打包过程
      html快速入门
      10-26
      快速学习html，快速入门，适合生手学习
      html初学者入门教程
      05-22
      在探讨HTML初学者入门教程之前，我们首先需要理解HTML是什么。HTML，全称为超文本标记语言（Hypertext Markup Language），是一种用来创建网页的标准标记语言。HTML文件是包含文本内容和标记（tags）的特殊文本文件...
      css html快速入门
      04-16
      css html快速入门的教材，非常适用于初学者。
      php快速入门
      01-08
      ### PHP快速入门知识点详解 #### 一、PHP简介与安装配置 - **PHP定义**：PHP（Hypertext Preprocessor）是一种广泛使用的开源通用脚本语言，尤其适用于Web开发并可嵌入HTML中。语法吸收了C语言、Java以及Perl的特点...
      用HTML构建酷炫的文件上传下载界面
      xcc212的博客
      10-21 608
      通过以上的HTML、CSS和JavaScript代码，你可以构建一个基础的文件上传下载界面。想要实现更酷炫的效果，可以结合服务器端开发、前端框架和各种库来进行扩展。
      自建html首页
      lulei5153的博客
      10-22 561
      【代码】自建html首页。
      2024 前端面试题！！！ html css js相关
      u010609022的专栏
      10-25 1077
      情况一：const定义的变量存在块级作用域，且不存在变量提升，一般用于定义常量，定义的时候必须初始化。答：不可以，const定义的如果是基本数据类型（string，number，boolean，null，undifined，symbol），定义后就不可再修改，如果修改，会报错。情况二：那么如果是const定义的对象呢？是否可以修改对象中的属性？答案：可以。
      4KB原生html实现table下tr的上下次序自由拖动
      最新发布
      易查薪
      10-27 229
      4KB原生html实现table下tr的上下次序自由拖动
      Node + HTML搭建自己的ChatGPT [基础版]
      FengChen的进阶之路
      10-21 1141
      本地搭建自己的`ChatGPT`系统全部流程了，尽可能的以最简单最基础的办法帮大家搭建自己的`ChatGPT`，过程会也已经尽可能详细，其中包括获取API密钥、搭建前后端项目具体步骤也是自己亲身试验过可行的，步骤也尽可能去繁就简。
      HTML快速入门：超文本标记语言解析
      "HTML详解（基础快速入门版）" HTML，全称HyperText Markup Language，即超文本标记语言，是用于创建网页的标准标记语言。HTML由一系列的元素组成，这些元素通常由开始标签和结束标签（如`<标签>`和`标签>`）定义。...
      评论
      添加红包

      请填写红包祝福语或标题

      个

      红包个数最小为10个

      元

      红包金额最低5元

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

      抵扣说明：

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

      余额充值