小白学前端Day1

最新推荐文章于 2024-09-22 23:26:43 发布
最新推荐文章于 2024-09-22 23:26:43 发布
阅读量375 收藏 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 366
0基础前端入门课（小白必备
前端小白的成长Day01
01-08
1.vsCode 编码软件 ：! + tab 自动生成的固定格式 2.SEO优化 Search Engine Optimization 搜索引擎（百度、google等）优化，促进关键词排名 方法：h1标签可以提高排名（最好一个网页只出现一个h1元素，h1元素太多...
小白学前端Day2
everfight的菜鸟成长之路
04-16 254
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 523
我将会定期更新我的学习进度和心得体会，与大家分享我的编程学习之旅。
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 1370
文章目录前言一、基础认知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 131
1.web的三层标准 结构（html） 表现（css） 行为（js） 2.html是一种超文本标记（标签语言） 超文本指的是超出文件限制和超出文本链接 学习html主要学习html标签 用html标签表示网页元素如图片标签，文字标签，链接标签 html标签都是用<>表示的 3.html骨架 页面的跟标签 页面的头部标签 页面的标题标签 页面的主体标签 注：标签统一约定小写 4....
day5天学习前端css复习
qinsd的博客
02-19 436
案例1 案例2 案例3 案例4 案例5 案例6 案例7 案例8 案例9 案例10
前端小白训练营DAY3
Ifour
04-17 491
前端小白训练营DAY3
适合小白写的项目 烘焙坊前端项目源码
06-02
"适合小白写的项目 烘焙坊前端项目源码" 这个标题告诉我们这是一个专为初级开发者设计的前端项目，主题是关于烘焙坊，这意味着它可能模拟了一个线上烘焙店的用户界面和功能。对于初学者来说，这样的项目能够帮助他们...
【JavaWeb】二、HTML 入门
最新发布
CSDN全栈领域优秀博主，阿里云博客专家，工信部权威认证物联网技术开发工程师，曾30分钟高分通过C语言二级，两天手撸代码完成EasyX飞机大战，靠接软件私活一个月换苹果电脑
09-22 813
HTML、CSS 和 JavaScript 在Web开发中扮演着不可或缺的角色。HTML 定义了网页的结构，CSS 控制了网页的样式和布局，而JavaScript 则增强了网页的交互性。这三个技术相互协作，共同构成了现代Web应用的基石。掌握这三个技术，是成为一名合格的Web开发者所必需的。HTML，全称HyperText Markup Language，即超文本标记语言，是一种用于创建网页的标准标记语言。定义：HTML是一种通过标签来描述网页内容和结构的语言。
html知识点框架
爱敲代码的卡拉米的博客
09-18 1024
一、HTML基础
在HTML中添加图片
Q18600000000的博客
09-15 686
标签中指定要显示的图像
【HTML】入门教程
qq_32768761的博客
09-19 1160
【纯干货教程】HTML入门级文档，适合新手小白。
使用HTML和CSS制作网页的全面指南
weidl001的博客
09-14 1505
HTML（超文本标记语言）是构建网页的基础语言。它用于定义网页的结构和内容。通过使用不同的标签（tags），我们可以告诉浏览器如何显示文本、图像、链接等。CSS（层叠样式表）用于控制网页的外观和布局。它可以设置文本的颜色、字体、背景、边距等，使网页更加美观和用户友好。通过以上步骤，我们已经了解了如何使用HTML和CSS创建一个简单但完整的网页。主题要点HTML基础了解HTML的结构和常用标签CSS基础理解CSS的语法、选择器和常用属性网页制作步骤规划布局 -> 编写HTML -> 添加CSS实践技巧。
HTML 和 CSS
2301_79685859的博客
09-16 1268
HTML（HyperText Markup Language）是用于定义网页内容的标记语言。它通过一系列标签将内容结构化，使浏览器能够理解并渲染网页。常见的 HTML 元素包括标题、段落、图片、链接等。CSS（Cascading Style Sheets）是用于控制网页外观的样式表语言。通过 CSS，开发者可以定义网页元素的颜色、字体、布局、大小等外观属性。CSS 可以嵌入到 HTML 文件中，也可以通过外部文件进行引入。
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、付费专栏及课程。

余额充值