前端与HTML|青训营笔记

2023-01-15 299 阅读2分钟

前端与HTML|青训营笔记

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

提纲挈领

前端应关注哪些问题

美观功能无障碍性能等

前端编译器

vscode vim webstream

什么是HTML

Hyper
Text
Mark
Language <h1>文章标题<h1/> <img src="photo.jpg"\>

src是属性名 “”内是属性值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <p>主体主体主体主体主体</p>
        <p>主体主体主体主体主体</p>
        <h3>
            三级标题
        </h3>
        <p>主体主体主体主体主体</p>
    </body>
</html>

运行样例

注意事项

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

标题h1~h6

数越大，字反而越小

img标签

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

ol/ul>li标签

无序列表

audio，video标签

src 音/视频地址
controls属性设置或返回音频/视频是否显示控件（比如播放/暂停等）

<input>输入控件:

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

<textarea>无限制的输入框

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

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

写在最后的

HTML 传达内容，而不是样式

超文本标记语言是一种用于创建网页的标准标记语言。作为开发者我们会修改，维护页面，为了使他人更加容易阅读、更改、协作，我们需要遵循代码规范使用使浏览器页面展示更加完美