筱筱学前端Day1

最新推荐文章于 2024-08-30 10:02:47 发布

慕筱筱

最新推荐文章于 2024-08-30 10:02:47 发布

阅读量556

点赞数 2

分类专栏：前端入门学习文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_62772655/article/details/122791277

版权

前端入门学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

干货1：可用Can I use网站查询html标签在各个浏览器中的兼容性问题。

干货2：W3C万维网联盟官方网站：w3.org，有兴趣可以点开查看一些相关信息。

干货3：web（网页）的组成部分：1.HTML结构（相当于汽车骨架），2.CSS表现（相当于汽车装饰），3.JS行为（相当于汽车引擎）

干货4：HTML基本语法

1.<常规标记>也叫双标记

<标记></标记>

<标记属性="属性值" ……（可写很多个）></标记>

标记也可以叫标签或元素

eg：<head></head>

2.<空标记>也叫单标记

<标记/>

<标记属性="属性值" />

eg:<br/>

用以上基础知识写出的简单代码如下：

<html>
       <head>
              <title>我的第一个网页</title>
       </head>
       <body>
              <center>人间盛望，<br/>故里江添。</center>
       </body>
</html>

形成的网页结果如下：

干货5：前端开发工具——Sublime Text, webstorm, HBuilderX, VSCode

干货6：VSCode有用的插件：

（1）Auto Rename Tag（可在更改双标记时两个标记一起更改）

（2）view-in-browser（可进行网页预览）

（3）Live Server（可实时进行网页刷新，无需手动刷新，懒人必备）

（4）htmltagwrap（选中文本后按Alt + W即可出现包裹文本的一对<p></p>只需更改<>中内容即可，写起来很便利，懒人必备）

干货7：<!DOCTYPE html>——特殊且固定的文档声明标签

干货8：文档声明与字符编码

<html lang="...">//这里的lang是language（语言）的缩写，...代表选择的语言

例如：

"en"代表英语（English）

"zh-CN"代表中文（Chinese）

"ja-jp"代表日文（Japanese）

<meta charset="...">//指网页的编码方式

例如：

ASCII-美国信息交换标准代码

IOS-8859-1-拉丁字母表的字符编码

GB2312-汉字编码字符集

UTF-8-Unicode 万国码字符集（最常用）

干货9：HTML常用标签

1.文本标题（h1-h6）

<h1>一级标题</h1>

<h2>二级标题</h2>

……（以此类推）

<h6>六级标题</h6>

注：文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距

2.段落文本（p）

<p>段落文本内容</p>

作用：标识一个段落（段落与段落之间有段间距）

3.换行（br）

<br/>

注：换行是一个空标记（强制换行）

4.水平线

<hr/>空标记

注：可以具有很多属性，例如

<hr color="green">（表示水平线颜色为绿色）

<hr width="300">（表示水平线占屏幕宽度为300）

若不特别说明align默认水平线是居中的。

<hr align="left">（表示水平线靠左）

若水平线是初始灰色是有一半阴影的。

<hr noshade(="noshade"可写可不写)>（表示水平线没有阴影）

5.加粗（推荐strong）

<b>加粗内容</b>只是显示加粗

<strong>强调的内容</strong>突出的文本

6.倾斜（推荐em）

<i>倾斜文本</i>

<em>强调文本</em>

7.删除线（推荐del）

<s>文本</s>删除线

<del>文本</del>删除线

8.下划线

<u>文本</u>下划线

9.上下标

<sub>文本</sub>下标

<sup>文本</sup>上标

用以上基础知识写出的简单代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1><strong>HTML5</strong></h1>
    <p>本词条由<strong>“科普中国”科学百科词条编写与应用工作项目</strong>审核。</p>

    <p>
        HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是<strong>构建以及呈现互联网内容的一种语言方式</strong>．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
    </p>

    <p>
        HTML5是Web中核心语言HTML的规范，<strong><em>用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的</em></strong>，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前<del>HTML4.01</del>的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。<sup>[1-2]</sup>
    </p>
    
    <h2><strong>HTML5的新特性</strong></h2>
    <hr/>
    <p> HTML5将Web带入一个成熟的应用平台，在这个平台上，<strong>视频、音频、图像、动画以及与设备的交互</strong>都进行了规范。</p>

    <h3><strong>智能表单</strong></h3>    
    <p>
        表单是实现用户与页面后台交互主要组成部分，HTML5在表单的设计上功能更加强大。input类型和属性的多样性大大地增强了HTML可表达的表单形式，再加上新增加的一些表单标签，使得原本需要JavaScript来实现的控件，可以直接使用HTML5的表单来实现；一些如内容提示、焦点处理、数据验证等功能，也可以通过HTML5的智能表单属性标签来完成。<sup>[6]</sup>
    </p>
    <h3><strong>多媒体</strong></h3>
    <p>
        HTML5最大特色之一就是支持音频视频，在通过增加了audio、video两个标签来实现对多媒体中的音频、视频使用的支持，只要在Web网页中嵌入这两个标签，而无需第三方插件（如Flash）就可以实现音视频的播放功能。HTML5对音频、视频文件的支持使得浏览器摆脱了对插件的依赖，加快了页面的加载速度，扩展了互联网多媒体技术的发展空间。
    </p>
</body>
</html>

形成的网页结果如下：