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

1.什么是前端

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
Web技术栈

2.前端应该关注哪些方面

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

3.前端的边界

屏幕截图 2023-01-15 204522.png

4.开发环境

屏幕截图 2023-01-15 204543.png

5.HTML是什么 屏幕截图 2023-01-15 204444.png

<!doctype html>  //标记当前使用的HTML文件是什么样的HTML版本，浏览器选择怎样的渲染模式
<html>  //文档根标签
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>  //body标签里面是呈现给用户的内容
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

7.DOM树

QQ图片20230115204314.png 8.HTML语法

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

9.标题h1~h6

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h4>这是h4字体</h4>
<h4>这是h5字体</h4>
<h4>这是h6字体</h4>

10.列表

有序列表ol (order list)

<h2>年度最喜爱歌手</h2>
<ol>
  <li>周杰伦</li>
  <li>林俊杰</li>
  <li>邓紫棋</li>
</ol>
即即：1.周杰伦

      2.林俊杰

      3.邓紫琪

无序列表ul (unordered list)

<h2>图形</h2>
<ul>
  <li>△</li>
  <li>○</li>
  <li>□</li>
</ul>
//即
- △
- ○
- □

定义列表dl (definition list)

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>  //dt与dd是多对多的关系
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>
即
导演：
    陈凯歌
主演：
    张国荣
    张丰毅
    巩俐
上映日期：
    1993-01-01

11.链接

用a 标签表示
图片链接用img 标签

<img
  src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc5a2e7eef0f46c6b57ccc83b9714797~tplv-k3u1fbpfcp-zoom-1.image"  //src表地址
  alt="Metal movable type"   //若图片加载失败，显示文字信息
  width="400" //图片宽度
/>

音频链接用audio标签

<audio 
src="https://music.163.com/song/media/outer/url?id=29023577.mp3"
  controls>  //浏览器默认播放键，进度条播放空间等
</audio>

视频链接用video标签

<video
  src="https://prod-streaming-video-msn-com.akamaized.net/3f6ca508-598d-4cbd-a3e2-43deea7bc377/b60c553e-9f3f-4164-8850-700a9a73a899.mp4"
  controls
></video>

输入、选择、引用、其他

输入
<input placeholder="请输入用户名">
//piaceholder表示占位符
选择
<input type=“checkbox">  //可选择多个
<input type=“radio">  //只可选择1个
<select>  //可提供多个选择
引用
<blockquote cite>  //快捷引用/长引用（对话，段落等）
<cite> //短引用 （作品名字，章节）
<q> //短引用，引用具体内容（重复引用）
其他
<code> //表代码（可长可短）
<pre code> //多行代码
<strong>//表强调，更突出其重要、紧急性
<em> //表强调，在语气上的强调

12.语义化

HTML中元素、属性以及属性值都拥有某些含义
开发者应该遵循予以来开发html
- 有序列表用ul,无序列表用ol
- lang属性表示内容所使用的语言

13谁在使用我们写的HTML

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

14.语义化的好处

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

15.如何实现语义化

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

前端与HTLM | 青训营笔记

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