前端与 HTML ｜ 青训营笔记

用户4725622130261
98 阅读2分钟

前端与 HTML ｜ 青训营笔记

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

HTML 负责内容 css 负责样式 javaScript 负责行为

前端应该关注美观、安全、功能、兼容性、用户体验、性能、无障碍等方面。

HTML5代码第一行应为<!doctype html>,否则会被认为是老旧版本的html代码

html不区分大小写

HTML语法

  • 标签和属性不区分大小写，推荐小写

  • 空标签可以不闭合，比如input、meta

  • 属性值推荐用双引号包裹

  • 某些属性值可以省略，比如required、 readonly

常用标签

图片
<img src= "photo.jpg" alt="图片加载不出来时的替代文字"/>

标题 h1~h6
<h1>标题</h1>
<h2>标题</h2>

有序列表
<ol>
    <li>选项1</li>
    <li>选项2</li>
<ol>

无序列表
<ul>
    <li>选项1</li>
    <li>选项2</li>
<ul>

key-value列表
<dl>
    <dt>导演: </dt>
        <dd>陈凯歌</dd> 
    <dt>主演: </dt>
        <dd>张国荣</dd>
        <dd>张丰毅</dd>
        <dd>巩俐</dd>
    <dt>上映日期: </dt>
        <dd>1993-01-01</dd>
</dl>

超链接
<a href="https://www.bytedance.com/">字节跳动官网</a>
新窗口打开超链接
<a href="https://www.bytedance.com/" target="_blank">字节跳动官网</a>

音频标签
<audio src="/assets/music.ogg" controls></audio>

视频标签
<video src="/assets/video.mp4" controls></video>

文本输入框
<input placeholder=" 请输入用户名">

范围输入框
<input type="range">

数字输入框
<input type="number" min="1" max="10">

日期输入框
<input type="date" min="2018-02-10">

长文本输入框
<textarea>Hey</textarea>

复选框
<input type="checkbox" />

单选框
<input type="radio" name="sport"/>

下拉列表
<select> 
    <option>1</option> 
    <option>2</option>
    <option>2</option>
</select> 

提示输入框
<input list="countries"/>
<datalist id="countries">
    <option>Greece</option>
    <option>United Kingdom</option>
    <option>United States</option>
</datalist>

文本标签
<blockquote cite="http://t.cn/RfjK00F"><p>天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生、长育出来的，所以没有这种民众，就没有天才。</p></blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite></p>

<p>在<cite>第一章</cite>, 我们讲过<q>字符串是不可变量</q></p>

<p><code> const</ code>声明创建-个只读的常量。</p>

<pre><code>
constadd=(a,b)=>a+b;
const multiply = (a, b) => a* b;
</code></pre>

<p>在投资之前，<strong>一定要做风险评估</strong></p>

<p>Cats <em>are</em> cute animals.</p>

语义化是什么?

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML

按规范写编写html有什么好处

  • 开发者-修改、维护页面
  • 浏览器-展示页面
  • 搜索引擎-提取关键词、排序
  • 屏幕阅读器-给盲人读页面内容

我的感想

学完这堂课我发现html不像我想象的那么简单，以前是一个div走天下，什么都可以靠css调，但现在我明白语义化是有多么重要。即使很多标签都能实现同样的功能，但我们还是要根据不同需求选择不同标签。遵守语义编写html，不仅能方便维护，也能让搜索引擎更加精准的提取关键词，优化搜索引擎，让有需要的人能精准搜索的到你的页面。

avatar
文章
阅读
粉丝