前端与HTML | 青训营笔记

Austyn
94 阅读4分钟

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

什么是前端

  1. 目的：解决GUI人机交互问题
  2. 工具：前端技术栈

前端技术栈

1.内容：
HTML(内容) CSS(样式) JavaScript(行为) 网络协议
HTML：决定了页面中有什么内容，可以比作人的骨架
CSS：决定了页面中的内容以什么样的形式呈现，可以比作人的衣服
JS：决定了页面中可以进行什么样的行为，可以比作人的动作
前端通过网络协议与服务器端交互

前端关注的内容

  • 功能：根据用户的需求，建立需求文档。开发人员可以根据需求文档明确产品的功能
  • 美观：可以利用墨刀等工具进行原型的设计，方便开发人员依照原型进行开发，同时也保证了网站的美观
  • 安全：产品应当保证用户数据的安全。例如学信网上流传的泄密问题就是对用户数据的安全没有进行合理的保护。
  • 性能：网站的速度是否足够快，用户体验是否足够好
  • 无障碍：当用户数量足够大时，就必须考虑不同人的需求。例如色盲患者、老人等，则需要开发无障碍的通道，方便用户的使用
  • 兼容性：同一网页能否在不同设备、不同版本的浏览器上使用
  • 体验：优化用户体验

前端的边界

1.node.js开发服务器端的应用
2.Electron开发客户端的应用 ……
前端的技术不断更新，需要持续的学习

开发环境

浏览器+编辑器

HTML

什么是HTML

HyperText:超文本(图片、标题、链接、表格、文字)
Markup Language：标记语言

1.

<!DOCTYPE html>

<!DOCTYPE> 声明在HTML 文档的第一行，位于 标签之前。 <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
2.

<head>
放入页面的源数据，页面需要的但不需要呈现出来呢的数据
</head>

<body>
    放入页面需要呈现出来的数据
</body>

DOM树

Dom树是浏览器对前端传来的文件进行解析所生成的

image.png

erDiagram
Document ||--o{ html : uses   
html ||--o{ head : contains
html ||--o{ body : contains
head ||--o{ meta : contains
head ||--o{ title : contains
body || --o{ h1 : contains
body || --o{ etc : contains

具体标签学习

列表标签

<ol> order list
<li> list
<ul> unorder list

多对多的关系：一个dt可以对应多个dd，多个dt可以对应一个dd

<dl> definition list
<dt> definition title
<dd> definition description

选择框型标签

<input type="radio">

<p>
    <label for="">
        red
<input type="radio" name="sport">
    </label>
    <label for="">
        green
        <input type="radio" name="sport" id="">
    </label>
    <label for="">
        black
        <input type="radio" name="sport" id="">
    </label>
</p>

效果图：
image.png
通过选择相同的name，能够实现框选单独唯一一个的功能
<input type="checkbox>"

<p>
    <label for="">
    red
<input type="checkbox" name="color" id="" checked>
    </label>
    <label for="">
    green
<input type="checkbox" name="color" id="">
    </label>
    <label for="">
    black
<input type="checkbox" name="color" id="">
    </label>
</p>

效果图：
image.png
checkbox 能够提供方形框选
<input list="colors">

        <input list="colors">
        <datalist id="colors">
            <option value="red"></option>
            <option value="green"></option>
            <option value="black"></option>
        </datalist>

实现效果图：

image.png
其好处在于既能提供输入的同时，也提供了一定的候选项

引用标签

<blockquote cite=""></blockquote>长引用标签，内置cite属性，表示引用的来源
<cite></cite>短引用标签，被引用的内容以斜体的形式呈现，字体发生略微变化，常常用来引用某一章节

image.png
<q></q>短引用标签，被引用的内容会自带双引号，常常用来引用某一具体内容

image.png
<code></code>用来引用代码

<code> 
    int a = 0;
    int b = 0;
</code>

效果图：

image.png
<pre><code></code></pre>

<pre>
    <code>
    int a = 0;
    int b = 0;
    </code>
</pre>

效果图:

image.png
字体风格会发生不同

页面布局

image.png
header代表头部区域，nav代表导航栏，aside代表边框区域，在main区域中放置主要内容

语义化

语义化是什么

元素、属性、属性值都拥有某些含义，表述某种内容和结果。开发者应该遵循语义来编写HTML

为什么要语义化

  • 开发者：共同修改、维护页面，需要遵循同一规范，方便协作
  • 浏览器：展示页面，利用标签中的语义
  • 搜索引擎：提取关键词、排序，有益于搜索引擎优化
  • 无障碍性：不仅仅是残疾人，正常人在某些特殊场合(例如抖动的公交车等)都会造成部分感官灵敏度的下降。通过语义化，能够方便用户更快的读懂(例如方便屏幕阅读器让盲人使用)

如何做到语义化

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码
avatar
文章
阅读
粉丝