Day1 《前端与 HTML》

这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

个人总结：HTML为标记语言，与java、C等有一定区别，因此在学习方法上有一定的区别

课程重点：

前端理解
HTML语法
HTML的语义化

part 1 前端

前端的定义

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。 ——引用自百度 baike.baidu.com/item/%E5%89…

前端技术栈 ——“三件套”

JavaScript（行为）

CCS（样式）

HTML（内容）

三者组合可完成前端的搭建与构造

前端的要求

功能
性能
美观
兼容
安全
体验
无障碍

part 2 HTML

HTML是什么？

HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。

HTML基本语法

标题和段落

在 HTML 中，每个段落是通过 <p> 元素标签进行定义的，比如下面这样：

<p>我是一个段落，千真万确。</p>

每个标题（Heading）是通过“标题标签”进行定义的：

<h1>我是文章的标题</h1>

这里有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题（the main heading），<h2> 表示二级子标题（subheadings），<h3> 表示三级子标题（sub-subheadings），等等。

列表

<ol> : order list 有序列表

<ol>
  <li>沿着条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在你的右手边</li>
</ol>

<ul> : unorder list 无序列表

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

<dl> : description list 描述列表

<dl>
  <dt>名字</dt>
  <dd>jack</dd>
  <dt>性别</dt>
  <dd>男</dd>
<dl>

<dt> description terms 描述术语

<dd> description definition 描述列表的描述部分

重点强调

<strong> :

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

超链接

<a> : 通过将文本（或其它内容) 包裹在 <a> 元素内，并给它一个 href 属性（也称为超文本引用或目标，它将包含一个网址）来创建一个基本链接。另一个属性是 title（标题），旨在包含关于链接的补充信息，当鼠标指针悬停在链接上时，标题将作为提示信息出现。

<p>我创建了一个指向<a href="https://www.mozilla.org/en-US/"
   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a
   >的超链接。
</p>

引用

`<blockquote>`	定义长的引用

`<q>`	定义短的引用语

`<cite>`	定义引用、引证

<code>代码引用
较短引用直接<code>包裹多行引用<pre><code>包裹

文本域

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>  
First name: <input type="text" name="firstname"><br>  
Last name: <input type="text" name="lastname">  
</form>

单选按钮

<input type="radio"> 标签定义了表单的单选框选项:

<form action="">  
<input type="radio" name="sex" value="male">男<br>  
<input type="radio" name="sex" value="female">女  
</form>

复选框

<input type="checkbox"> 定义了复选框。

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

下拉选项列表

<select> ：定义了下拉选项列表

<option> ：定义下拉列表中的选项

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

输入控件选项列表

<datalist> ：指定一个预先定义的输入控件选项列表

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

HTML语义化

元素属性属性值

传达内容而不是样式！！！

语义化好处：

代码可读性
可维护性
搜索引擎优化
无障碍性

《前端与 HTML》学习笔记｜ 青训营笔记