前端Html入门简介|青训营笔记

30Curry
110 阅读3分钟

这是我参与[第四届青训营]笔记创作活动的第一天。

通过第一节课的学习，我们简单了解了前端的知识，1、什么是前端 2、什么是HTML 3、HTML常用语法及标签 4、语义化的含义及好处。

一、前端：

通过技术栈与服务器进行交互的技术是前端。前端的服务栈包括：Javascript(行为)、CSS(样式)、HTML(内容),通过网络协议(http协议)与服务器端进行交互。 前端应该关注：美观、安全、兼容、功能、性能、无障碍等方面的问题。

a.png

二、HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

b.png

三、HTML常用语法及标签

HTML的语法：

  • 标签和属性不区分大小写，推荐小写。
  • 空标签可以不闭合，比如 input、meta。
  • 属性值推荐使用双引号包裹。
  • 某些属性值可以省略，比如 required、readonly。
①标题h1~h6

由h1~h6字体逐渐减小 例如：

  • 这是h1标签

  • 这是h2标签

  • 这是h3标签

c.png

②列表

分为有序列表和无序列表

有序列表：

<h2>购物清单</h2>
<ol>
   <li>草莓</li>
   <li>苹果</li>
   <li>香蕉</li>
</ol>

效果如下：

购物清单

  1. 草莓
  2. 苹果
  3. 香蕉

无序列表：

<ul>
   <li>草莓</li>
   <li>苹果</li>
   <li>香蕉</li>
</ul>

效果如下：

  • 草莓
  • 苹果
  • 香蕉

<dl>为定义列表、<dt>标题<dd>具体描述。

d.png

③多选框、单选框、下拉框

多选框：

<p>
<label><input type="chexkbox" name="hobit" />篮球</label>
<label><input type="chexkbox" name="hobit" />足球</label>
</p>

单选框：

<p>
<label><input type="radio" name="sex" />男</label>
label><input type="radio" name="sex" />女</label>
</p>

效果如下：

e.png

④文本标签

f.png

四、语义化的含义及好处：

语义化是什么：

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。 事实上最有效的一种办法，就是对网页的HTML结构进行重构，实质上就是语义化。 根据内容的结构化，选择合适的标签，便于开发者阅读和写出更加优雅的代码。

  • HTML中的元素、属性及属性值都拥有某些含义。
  • 开发者应该遵循语义来编写HTML.
  • 有序列表用ol;无徐列表用ul。
  • lang属性表示内容所使用的语言。

语义化的好处：

  1. 代码可读性
  2. 可维护性
  3. 搜索引擎优化
  4. 提升无障碍性

如何做到语义化：

  • 了解每个标签和属性的含义
  • 思考什么表签最适合描述这个内容
  • 不适用可视化工具生成代码

以上便是我对本次课程的总结与回顾。

(文中有部分引用百度百科的内容)

avatar
文章
阅读
粉丝