【前端与HTML|青训营】

用户名已填写
100 阅读3分钟

【前端与HTML|青训营】

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

课堂笔记

重点内容

  • 了解了前端的概念以及相关知识
  • 学习了HTML以及其中的一些常用标签和属性

详细知识点及案例

前端的理解

什么是前端：
1.解决GUI人机交互问题
2.跨终端
3. web技术栈

具体解释：无论是什么设备如vr app pc都是用html css javascript，用web技术栈实现多端人机交互问题

前端技术栈：

  1. html--页面结构和内容
  2. css--样式
  3. javascript--行为
  4. 服务器端（网络协议）

三者运行在浏览器里，而浏览器通过http协议和服务器通信，浏览器通过http把代码传到服务器，服务器渲染成为可视页面，同样浏览器也可以把用户的填写内容来传递到服务器，实现最基本的交互功能

7.png

HTML：

p标签、h1~h6标签、div标签、ol/ul>li标签、input标签、img标签等

  • 【p标签】：段落 <p>这是一个段落</p>
    <p>这是另外一个段落</p>
  • 【a标签】：一般用于超链接
    target=blank可以使该超链接跳转时是新窗口打开
<a href="https://juejin.cn/?utm_source=gold_browser_extension">这是一个链接</a>

- 【img标签】：
src 地址，指存储图像的位置 相对地址/绝对地址
alt 可替代性文本,当图片加载不出来时用于替代告诉他们失去的信息

<img src="url*" alt="some_text">
【注意】：加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片

- 【ol/ul>li标签】：
<ul>无序列表

<ul>  
<li>Coffee</li>  
<li>Milk</li>  
</ul>

效果：

2.png
<ol>有序列表

<ol>  
<li>Coffee</li>  
<li>Milk</li>  
</ol>

<dl>定义列表 

<dl>  
<dt>Coffee</dt>  
<dd>- black hot drink</dd>  
<dt>Milk</dt>  
<dd>- white cold drink</dd>  
</dl>
  • 【audio，video标签】：
    src 音/视频地址;
    controls属性设置或返回音频/视频是否显示控件（比如播放/暂停等）。

4.png 3.png

- <input>输入控件:

placeholder：输入栏的默认内容
type: 控制输入控件类型

  • number
  • date
  • range
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • radio:选择： 利用name属性使得两个选项互斥从而实现单选
 <select>下拉选择<datalist>
   <input list="countries"/>
         <datalist id="countries">
               <option>china</option>
               <option>united kingdom</option>
               <option>united states</option>
         </datalist>

5.png

  • <textarea>无限制的输入框

    可以随意拉动，在里面可以输入文字

  • 文本类标签：
    6.png <blockquote>长引用 <~~ cite=引用地址>
    <cite>短引用 ，一般用于引用书名等
    <q>短引用，一般用于引用某个具体内容话语
    <code>关键词/代码引用
    <pre><code>引用多行代码
    <strong>事情上的强调
    <em>语气上的强调，重音

内容划分：

1.png nav：导航栏
main：主体
aside：侧边栏
footer：页面底部

感悟：

写html需要遵循语义化 其中的元素、属性、属性值都有某种含义

作为开发者我们会修改，维护页面，为了使他人更加容易阅读、更改、协作，我们需要遵循代码规范使用
使浏览器页面展示更加完美;
使搜索引擎提取关键词更加容易、精准;
实现前端的无障碍性，实现人机交互的舒适性.

HTML 传达内容，而不是样式

avatar
文章
阅读
粉丝