前端与HTML|青训营笔记

用户9337658139312
517 阅读2分钟

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

前端概念

  • 解决GUI(图形用户界面)人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端小程序
    • VR/AR等
  • Web技术栈
    • HTML
    • CSS
    • JavaScript
    • Http网络协议

总结一句话就是：使用web技术栈解决多端图形用户界面交互问题

前端最基础的技术栈

HTML(内容): 负责页面结构与内容
CSS(样式): 设置页面样式例如：位置、大小、颜色等
JavaScript(行为): 定义网页行为，相当于动画特效

HTML、CSS、JavaScript运行在浏览器，通过Http网络协议与服务器进行通信渲染成我们看到的界面，而浏览器也可以把用户填写的内容或行为通过Http协议提交到服务器端。

HTML结构化

HTML(Hyper Text Markup Language)：超文本标记语言

普通网站基本组成可能是：

01.jpg

页眉(header)
页面最顶部的大标题，横跨整个网页最顶部。
导航栏(nav)
一般位于页眉之下（不排除存在其他情况），它指向网站各个主要区域的超链接，主要主导用户使用该网站，起到一个指向作用。
主内容(main)
当前网页主要内容，一般一个页面只有一个mian。它里面可以包含很多个<article>、<section>、<div>等，模块化主内容。
侧边栏(aside)
一些补充信息，也可以是外围信息、广告链接等。
页脚(footer)
与页眉一样横跨整个网页最底部，但是比较狭窄。页脚是放置一些版权声明或友情链接等，属于次要信息内容。

注：div非常容易被滥用，小心使用！！

HTML部分基本标签

1. 标题和段落

  • [p标签]
<p>我是p标签！！是一个段落！是块级元素！</p>
  • [h1-h6标签]
<h1>我是标题h1</h1>
<h2>我是标题h2</h2>
<h3>我是标题h3</h3>
<h4>我是标题h4</h4>
<h5>我是标题h5</h5>
<h6>我是标题h6</h6>

标题标签效果图：
02.png

2.列表

  • 有序列表
<ol>
    <li></li>
    <li></li>
<ol>
  • 无序列表
<ul>
    <li></li>
    <li></li>
<ul>
  • 自定义列表
<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
<dl>

3.链接 

<a href="点击跳转的地址">××官网</a>

4.强调 

<strong>凸出强调</strong>
<em>语气强调（斜体）</em>

5.输入 

<input placeholder="输入框提示">
<input type="range"> //滑动选择输入值
<input type="number" min="1" max="10">
<input type="data" min="2023-12-04">
<textarea>多行输入框<textarea>
<p>
    <label><input type="checkbox" />多选</label>
    <label><input type="checkbox" />多选</label>
</p>
<p>
    <label><input type="radio” name="sport"/>单选</label>
    <label><input type="radio” name="sport"/>单选</label>
</p>
<p>
    <select>
        <option>下拉框选择</option>
        <option>下拉框选择</option>
    </select>
</p>

注：单选通过同一name值为一组

课后总结

第一堂课让我又重新理解了对于前端和html的认识。前端不仅仅只是好看，而更要从用户体验、兼容性、安全性、无障碍等方方面面去实现。很喜欢今天课上的一句话：HTML是传达内容，而不是样式。

avatar
文章
阅读
粉丝