小白学前端Day1

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

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

HTML简介

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

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

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

常见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="abc.com" width="50px" height="50px">

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

常见HTML文档结构

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

常见Style属性

属性样例：

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

HTML文本格式化

<b>This text is bold</b>

<b>This text is bold</b>

<i>This text is italic</i>

<i>This text is italic</i>

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

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

<code>Computer code</code>

<code>Computer code</code>

<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

一打有 <del>二十</del> <ins>十二</ins> 件。

一打有 <del>二十</del> <ins>十二</ins> 件。

其他

  • HTML的大多数标签都可以嵌套使用。
  • HTML 标签对大小写不敏感，推荐使用小写标签。
  • HTML 属性值本身就含有双引号，必须使用单引号。如：name='Bill "HelloWorld" Gates'
  • HTML 注释，提高其可读性``

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

网站开发需要的知识

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

HTML标签

<p>段落标签</p>

<h1>大标题</h1>

<br> 换行标签

``

<b>粗体</b>

<i>斜体</i>

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

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

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

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

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

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


<ul type="square"> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul>
<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>

<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>

<body>HTML转义
<body>HTML转义

<abbr title="Internationalization">缩写说明</abbr>
<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,293评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,604评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,958评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,729评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,719评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,630评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,000评论 3赞 397
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,665评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,909评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,400评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,986评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2赞 342

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1赞 92
  • HTML标签
    HTML标签解释大全 一、HTML标记 标签：!DOCTYPE 说明：指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1赞 41
  • DIV+CSS学习笔记总结篇
    转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,511评论 32赞 459
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,594评论 18赞 139
  • 你都掉进了“安全感”的哪些坑？
    我是个从小就很缺乏安全感的人。 记得小时候，每次爸爸妈妈出差之前都会塞给我几百块，然后他们就很放心...
    书言菡语阅读 399评论 2赞 0