小白学前端Day1

最新推荐文章于 2024-09-22 10:46:41 发布
最新推荐文章于 2024-09-22 10:46:41 发布
阅读量376 收藏 1
点赞数
分类专栏： 前端学习 前端 html 文章标签： html 前端 教程 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cbb903601682/article/details/70186346
版权
前端学习 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
前端
2 篇文章 0 订阅
订阅专栏
html
2 篇文章 0 订阅
订阅专栏

《小白学前端》系列博客是根据腾讯课堂IMWeb前端小白训练营每天任务的内容加以整理而成。

任务一：W3SCHOOL—“HTML简介”到“HTML注释”+“HTML文档类型”

HTML简介

  • HTML 是用来描述网页的一种语言(超文本标记语言)
    疑问1：编程语言与标记语言的区别？
    《知乎回答：编程语言 标记语言 脚本语言分别有哪些？ 区别是什么？》
    标记语言不用于向计算机发出指令，常用于格式化和链接。 2、脚本语言介于标记语言和编程语言之间，脚本语言脚本语言不需要编译，可以直接用，由解释器来负责解释。 3、编译型语言写的程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件，以后要运行的话就不用重新翻译了，直接使用编译的结果就行了（exe文件），因为翻译只做了一次，运行时不需要翻译，所以编译型语言的程序执行效率高。

  • HTML 标签通常是成对出现的
    疑问2：不成对出现的标签有哪些？
    有少部分标签不是成对的,我们称之为空标签或空元素.如 <br />换行 <hr />水平线 ，它们在 > 前加入 (空格)/ 代表标签的结束.（HTML5 <br> <hr> 也是合理的）。

  • 浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
    疑问3：浏览器解析HTML的原理是什么？
    详见：CoolShell 浏览器的渲染原理简介

常见HTML标签

  • 标题
<h1>This is a heading</h1>

<h1> 定义最大的标题。<h6> 定义最小的标题。h1到h6逐渐变小。

  • 段落
<p>This is a paragraph.</p>
  • 链接：
<a href="http://www.w3school.com.cn">This is a link</a>

href 链接到的地址

  • 图像
<img src="w3school.jpg" width="104" height="142" />

src图片的来源地址
width height图片的宽、高

常见HTML文档结构

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>An HTML Template</title>
 </head>
 <body>
 <!-- 这里是网页内容 -->
 </body>
</html>
  • 标签声明了该 HTML 文档的文档类型为 HTML5。只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。
  • 标签是 HTML 文档的最底层标签，包含了文档的所有内容。
  • 代表了 HTML 文档的“头部”，这里描述了浏览器需要的一些信息，也可以定义一些需要从外部引入的文件（如 .css .js 文件）。
  • 定义了网页的标题，该信息会显示在浏览器的标题栏（或浏览器标签）以及收藏夹中。
  • 定义了网页的内容，也就是我们可以从浏览器中看到的内容。

常见Style属性

属性样例：

font-family:arial;
color:red;
font-size:20px;
text-align:center

HTML文本格式化

<b>This text is bold</b>

This text is bold

<i>This text is italic</i>

This text is italic

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>
这是
预格式文本。
它保留了      空格
和换行。

<code>Computer code</code>

Computer code

<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。 
一打有 <del>二十</del> <ins>十二</ins> 件。

一打有 二十 十二 件。

其他

  • HTML的大多数标签都可以嵌套使用。
  • HTML 标签对大小写不敏感，推荐使用小写标签。
  • HTML 属性值本身就含有双引号，必须使用单引号。如：name=’Bill “HelloWorld” Gates’
  • HTML 注释，提高其可读性<!-- This is a comment -->

任务二：软谋教育网站开发绝杀技—“HTML开篇”到“html常用标签使用（一）”

网站开发需要的知识

  • 前端
    HTML —— 内容
    CSS —— 外观
    js —— 动作交互效果
  • 后端
  • 数据库

HTML标签

<p>段落标签</p>


<h1>大标题</h1>

<br> 换行标签

<!--这里是被注释的内容-->

<b>粗体</b>

<i>斜体</i>

<u>下划线</u>
下划线

<s>删除线</s>
删除线

<del>删除线</del>
删除线

p<sup>上标签</sup>
p 上标签

p<sub>下标签</sub>
p 下标签

<ol type="a">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>

  1. 有序列表
  2. 有序列表
  3. 有序列表
  4. 有序列表


<ul type="square">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>

  • 无序列表
  • 无序列表
  • 无序列表
  • 无序列表

<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>

Name
Godzilla
Born
1952
Birthplace
Japan
Color
Green


&lt;body&gt;HTML转义
<body>HTML转义

<abbr title="Internationalization">缩写说明</abbr>
缩写说明 

<p>Simple table with header</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

Simple table with header

First nameLast name
JohnDoe
JaneDoe
<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

Table with thead, tfoot, and tbody

Header content 1Header content 2
Footer content 1Footer content 2
Body content 1Body content 2
<p>Table with colgroup</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

Table with colgroup

CountriesCapitalsPopulationLanguage
USAWashington D.C.309 millionEnglish
SwedenStockholm9 millionSwedish
<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <col style="background-color: #0f0">
    <col span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

Table with colgroup and col

LimeLemonOrange
GreenYellowOrange
<p>Simple table with caption</p>
<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

Simple table with caption

Awesome caption
Awesome data
cbb903601682
关注
专栏目录
大四开始学前端day01
m0_46106931的博客
10-23 367
0基础前端入门课（小白必备
前端小白的成长Day01
01-08
1.vsCode 编码软件 ：! + tab 自动生成的固定格式 2.SEO优化 Search Engine Optimization 搜索引擎（百度、google等）优化，促进关键词排名 方法：h1标签可以提高排名（最好一个网页只出现一个h1元素，h1元素太多...
小白学前端Day2
everfight的菜鸟成长之路
04-16 256
W3SCHOOL—“HTML”链接”到“HTML布局”使用样式的三种方式外部样式表<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>内部样式表<head> <style type="text/css"> body {background-color: red} p {margin-left
编程小白的学习日记 Day1
weixin_48194900的博客
01-16 525
我将会定期更新我的学习进度和心得体会，与大家分享我的编程学习之旅。
JAVA小白学习日记Day12
m0_63367052的博客
07-29 795
在CSS中，position属性用于指定元素在文档流中的定位方式。常用的取值包括：static:默认值，元素遵循正常的文档流布局，不受top、right、bottom、left属性的影响。relative:元素相对于其正常位置进行定位，通过 top、right、bottom、left 属性可以调整元素相对于初始位置的偏移量。相对定位的元素仍然占据其原来的空间，周围的内容会根据偏移量调整位置。
前端小白训练营DAY1
Ifour
04-16 575
什么是 HTML？
前端学习day01：基础认知+HTML标签学习
qq_46244116的博客
05-02 1372
文章目录前言一、基础认知Web标准的构成HTML初体验1、HTML的感知2、HTML骨架结构HTML骨架结构由哪些标签组成3、开发工具的使用VS Code的基本快捷键语法规范1、 HTML的注释注释的作用和写法2、 HTML标签的构成HTML标签的结构二、HTML标签学习1. 排版标签1. 标题标签2. 段落标签3. 换行标签4. 水平线标签2. 文本格式化标签3. 媒体标签1. 图片标签图片标签的介绍图片标签的src属性图片标签的alt属性图片标签的title属性图片标签的width和height属性➢
前端学习Day 1
weixin_43307087的博客
04-20 132
1.web的三层标准 结构（html） 表现（css） 行为（js） 2.html是一种超文本标记（标签语言） 超文本指的是超出文件限制和超出文本链接 学习html主要学习html标签 用html标签表示网页元素如图片标签，文字标签，链接标签 html标签都是用<>表示的 3.html骨架 页面的跟标签 页面的头部标签 页面的标题标签 页面的主体标签 注：标签统一约定小写 4....
day5天学习前端css复习
qinsd的博客
02-19 437
案例1 案例2 案例3 案例4 案例5 案例6 案例7 案例8 案例9 案例10
前端小白训练营DAY3
Ifour
04-17 492
前端小白训练营DAY3
适合小白写的项目 烘焙坊前端项目源码
06-02
"适合小白写的项目 烘焙坊前端项目源码" 这个标题告诉我们这是一个专为初级开发者设计的前端项目，主题是关于烘焙坊，这意味着它可能模拟了一个线上烘焙店的用户界面和功能。对于初学者来说，这样的项目能够帮助他们...
HTML中直接创建一个“onoff”图形开关包括css+script
TrueLink的博客
09-20 943
在HTML中直接创建一个“onoff”图形开关（通常指的是一个类似于物理开关的UI组件，可以切换开或关的状态），并不直接支持，因为HTML主要用于内容的结构化，而不是复杂的用户界面组件。然而，你可以通过结合HTML、CSS和JavaScript（可能还需要使用JavaScript库或框架）来实现这样的效果。以下是一个简单的例子，展示如何使用HTML（用于结构）、CSS（用于样式）和JavaScript（用于交互）来创建一个基本的图形开关。/* 这里粘贴上面提供的CSS代码 */// 例如，监听开关的变化。
粒子向上持续瀑布动画效果（直接粘贴到记事本改html即可）
weixin_53132064的博客
09-22 359
瀑布向上粒子效果，欢迎参考
html 几行的空间分成3个区域
最新发布
TrueLink的博客
09-22 354
* 设置背景色以区分区域，实际使用时可以去除或修改 *//* 使得宽度和高度包括内边距和外边距 *//* 设置外边距，增加区域之间的间隔 *//* 设置内边距，增加区域内部的空间 *//* 使用Flexbox布局 *//* 你可以根据需要调整高度 *//* 子元素之间的间隔相等 *//* 容器宽度占满整个屏幕 *//* 设置每个区域的样式 *//* 设置整体容器样式 *//* 每个区域都等宽 *//* 文本居中显示 */
HTML中的表单（超详细）
qq_63946637的博客
09-20 1549
本文旨在帮助大家学习HTML中有关表单的知识
前端问答：如何用 JavaScript 让 HTML Canvas全屏显示
前端达人
09-20 815
哈喽，大家好！今天要跟大家分享一个非常实用的小技巧，适合那些正在学习前端开发的朋友们。你是不是也遇到过这样的问题：在制作一些网页小游戏、炫酷的网页动画或者数据可视化时，想让画布（Canvas）全屏显示，让用户的体验更加沉浸？今天我们来聊聊如何用JavaScript让HTML中的Canvas画布全屏显示，做到页面随便怎么调整大小，画布都能完美适应整个窗口。我们以开发一个简单的全屏小游戏为例子。比如，...
HTML/CSS/JS学习笔记 Day7（CSS--C4 CSS的三大特性）
给bug两拳的博客
09-20 1390
C4.CSS的三大特性：4.1 层叠性、4.2 继承性、4.3 优先级（权重优先级 / 权重叠加）
Web前端Day1学习笔记：关键概念与标签解析
1. **文本格式化标签**： - `<strong>`用于字体加粗。 - `<marquee>`实现字体滚动效果，通常用于创建无限循环的滚动文字。 - `<input type="text">`创建普通文本输入框。 - `<input type="password">`创建密码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值