前端与HTML 青训营笔记

苏珩
98 阅读5分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。 整理的是第一天（1.15）笔记。

什么是前端

1.解决GUI人机交互问题 2.跨终端 pc/移动浏览器 客户端/小程序 VR/AR等 3.web技术栈

前端技术栈

  • 网络协议
  • JavaScript（行为）
  • CSS（样式）
  • HTML（内容）

前端关注方面

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

前端的边界

nodejs electron react native webRTC ...

开发环境

  • 浏览器：IE/edge 、chrome 、firefox 、safari
  • 编辑器：VScode 、Vim、 WebStorm

HTML

HyperText Markup Language 图片 标题 链接 表格

  • <h1>文章标题</h1>
  • <img src="photo.jpg">
  •     属性名    属性值

根标签<html> </html> <head></head> <body></body>

DOM树

8UOL{{4LN]TJFE1_C@CE~]U.png

HTML语法

  1. 标签和属性不区分大小写，推荐小写
  2. 空标签可以不闭合，比如input 、meta
  3. 属性值推荐双引号包裹
  4. 某些属性住可以忽略，比如required、readonly

6种级别标题

  • <h1>一级标题</h1>
  • <h2>二级标题</h2>
  • <h3>三级标题</h3>
  • <h4>四级标题</h4>
  • <h5>五级标题</h5>
  • <h6>六级标题</h6>

关于列表（3种）

1.ol 排序列表

  1. aaa
  2. bbb
  3. ccc
2.ul 无序列表
  • aaa
  • bbb
  • ccc
3. dl 有属性的
a:
abc
def
ghi

关于链接

  • HTML使用标签<a>来设置超文本链接。
  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时，链接显示为红色并带有下划线。

关于图片、音频、视频

图片

<img>图片标签 图片标记是个单标签，用于向当前页面引入一个外部图片。

标记属性： （1）属性：src 用来表示图片的路径 属性值： 图片的相对路径； 图片的绝对路径； 也可以是部署在网上服务器的图片网址路径(运行网页时，图片加载要联网)。

（2）属性：alt alt属性值是图片的描述，这个描述在默认情况下不会显示，而是浏览器在显示不了图片时对图片的文字描述。

（3）属性：width与height 设置图片在网页中显示的大小，width是图片的宽，height是图片的高。

<img src="./images/photo.jpg" width="200px" height="200px" alt="">

音频

音频标签 标记用来向页面引入一个外部的音频文件，音频文件引入时，默认情况下不允许用户自己控制播放或停止。

标记属性： （1）属性：controls 没有属性值的属性，如果没有设置该属性的话，不会显示用户控件 作用：是否允许用户控制播放

（2）属性：autoplay 同样没有属性值的属性 作用：音频文件是否自动播放 如果设置了autoplay，则音乐在打开页面时会自动播放。但目前大部分浏览器都不会对音乐进行自动播放，避免用户不好体验，而是当用户点击过一次播放后，在进入网站就会自动播放了

（3）属性：loop 作用：音乐是否循环播放

<audio src="./music/HITA _ 小曲儿 - 丹青客.mp3" controls loop></audio>

视频

<video></video>视频标记 <video>标记用来向页面引入一个外部的视频文件，视频文件引入时，默认情况下不允许用户自己控制播放或停止。

标签属性：

（1）属性：controls 没有属性值的属性，如果没有设置该属性的话，不会显示用户控件 作用：是否允许用户控制播放

（2）属性：autoplay 同样没有属性值的属性 作用：视频文件是否自动播放 如果设置了autoplay，则音乐在打开页面时会自动播放。但目前大部分浏览器都不会对音乐进行自动播放，避免用户不好体验，而是当用户点击过一次播放后，在进入网站就会自动播放了

（3）属性：loop 作用：视频是否循环播放

<video src="./ ../" controls loop></video>

输入

<input placeholdel="请输入用户名">

占位符，默认显示内容

<input type="rang">

范围

<input type="number" min="1" max="10">

限定数字1-10

<input type="date" min="1978-02-09">

日期限定最小

<text>Hey</text> 内容输入

表单输入

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name [属性]

基本用法：

<select>

<option value =``"aaa"``>Volvo</option>

<option value =``"bbb"``>Saab</option>

<option value=``"ccc"``>Opel</option>

<option value=``"ddd"``>Audi</option>

</select>

高级一点：

``//有multiple属性，则可以多选`

<select name= “education” id=”education” multiple=”multiple”>

<option value=”1”>高中</option>

<option value=”2”>大学</option>

<option value=”3”>博士</option>

</select>

//下面没有multiple属性 , 只显示一条，不能多选

<select name= “education” id=”education” >

<option value=”1”>高中</option>

<option value=”2”>大学</option>

<option value=”3”>博士</option>

</select>

//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。

<select name=``"qqqq" id=``"www" size=``'3'``>

<option value=``"0"``>a</option>

<option value=``"1"``>b</option>

<option value=``"2"``>c</option>

<option value=``"3"``>d</option>

<option value=``"4"``>e</option>

<option value=``"5"``>f</option>

<option value=``"6"``>g</option>

<option value=``"7"``>h</option>

<option value=``"8"``>i</option>

<option selected>请选择</option>

</select>

文字内容

在HTML中可以使用引用标签<blockquote>和<q>来引用文本。

  • <q> 标签定义短的引用，浏览器经常在引用的内容周围添加引号。
  • <blockquote>标签定义块引用，其包含的文本都会从常规文本中分离出来，浏览器通常会对 <blockquote> 元素进行缩进处理；有时显示为斜体。
  • <strong>标签是一个短语标签，用来定义计算机程序的样本重要的文本。
  • <em>代表对其内容的强调。突出强调的位置会改变语句本身的意义。
  • <code>引入代码。

语义化

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

谁在使用

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

语义化的好处&怎么做到

好处：

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

如何做到：

  1. 了解每个标签属性含义
  2. 思考适合描述的标签内容
  3. 不用可视化内容生成代码
avatar
文章
阅读
粉丝