前端与HTML | 青训营笔记

wawaup
425 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第1天，今天学习的内容是前端基础三件套中的HTML。

主要内容有以下：

  • 介绍什么是前端
  • HTML语法与常用标签
  • 语义化的重要性

前端是什么

前端一般指网页前台部分，前端工程师通过web技术栈实现一个web应用，将网站的内容样式和交互呈现给用户。然而随着技术的进步，前端早就不拘泥于网页，工程师们可以利用相应的框架去开发服务器端应用，桌面应用，3D游戏等等。web应用也不只是能运行在PC或是移动设备的浏览器上，他也可以运行在VR/AR设备上。

故总的来说，前端是用于解决多端图形界面（GUI）人机交互问题的技术范畴。

HTML语法与常用标签

了解HTML

  • HTML是HyperText Markup Language的简写，HyperText超文本指图片、标题、链接、表格这些超越文本的表示方式，Markup Language标记语言则是指用标签作为基本元素的语言。
  • HTML编写的内容在浏览器上的呈现是通过将代码解析成树形结构，获得一棵dom树，标签为dom结点。

DOM,Document Object Model（文档对象模型）是关于如何获取、更改、添加或删除 HTML 元素的标准,他使得js获得创建动态 HTML 的所有力量。

HTML常用标签

  • 标题 六种字号大小的标题标签分别对应h1~h6
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>

image.png

  • 列表 有序列表、无序列表、定义列表
<!--列表-->
<ol>
    <li>ordered list</li>
    <li>有序列表</li>
</ol>
<ul>
    <li>unordered list</li>
    <li>无序列表</li>
</ul>
<!-- key:value形式的列表 defination list -->
<dl>
    <dt>defination title：</dt>
    <dt>定义标题：</dt>
    <dd>defination description</dd>
    <dd>定义描述</dd>
    <dd>多对多的关系</dd>
</dl>

image.png

  • 媒体 链接、图片、音频、视频
<div id="block" class="media">
    <!-- ahchor链接标签 href属性放网址 target属性决定网页打开的方式 -->
    <a href="http://www.juejin.cn">掘金官网</a>
    <a href="http://www.juejin.cn" target="_blank">掘金官网</a>
    <!-- alt属性是可替代的内容 媒体加载不出来时替代显示 -->
    <img src="https://pic2.zhimg.com/v2-2e21b2dcaf9233c5697c46524b2f4aae_qhd.jpg" alt="a cat image" />
    <!-- controls是播放控件 -->
    <audio src="" controls></audio>
    <video src="" controls></video>
</div>

image.png

  • 输入 用input标签和type属性选择输入类型
<div id="block" class="input">
    <!-- 输入框 type属性选择滑动条 数字 日期 文本框 -->
    <input placeholder="请输入用户名">
    <input type="range">
    <!-- min max控制最大最小值 -->
    <input type="number" min="1" max="10">
    <input type="date" min="2022-12-31">
    <textarea>hello world</textarea>
</div>

image.png

  • 选择
<!-- 多选 -->
<p>
	<label><input type="checkbox">🍕</label>
	<label><input type="checkbox">🍔</label>
</p>
<!-- 单选 相同的name只能选择一个-->
<p>
	<label><input type="radio" name="food">🍟</label>
	<label><input type="radio" name="food">🌭</label>
</p>
<!-- 下拉选择 -->
<p>
	<select>
		<option>🥝</option>
		<option>🥥</option>
		<option>🍇</option>
	</select>
</p>
<!-- 给予默认选项的输入 实际上不限制自由输入-->
<input list="countries">
<datalist id="countries">
	<option>China</option>
	<option>UnitedKindom</option>
	<option>UnitedStates</option>
</datalist>

image.png

  • 文本
<!-- 引用：块级引用 短引用-->
<blockquote cite="https://baike.baidu.com/item/%E5%89%8D%E7%AB%AF/5956545?fr=aladdin">
    <p>前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验.</p>
</blockquote>
<!-- cite一般是作品的名称或章节 q一般是引用具体的内容 -->
<p>我最喜欢的一本书是<cite>人间失格</cite></p>
<p>在书的<cite>第一章</cite>，
    我们讲过<q>字符串是不可变量</q>
</p>

<!-- code标签 代码变量 -->
<p><code>const</code>用于声明一个只读的常量</p>
<!-- pre表示多行代码 代码块里面的字体会不一样 是编程的等宽字体-->
<pre><code>
	const add = (a.b) => a+b;
	const multiply = (a.b) => a*b;
</code></pre>

<!-- 表强调的标签 strong加粗强调重点内容 em斜体强调语气重读 -->
<p>这里是<strong>重点内容</strong></p>
<p>You <em>are</em> cute.</p>

image.png

语义化的重要性

  • HTML中的元素、属性及属性值都拥有某些含义，有些标签实际上就是其英文含义的缩写。
  • 开发者应该遵循语义来编写HTML，同时要了解各种标签及其作用。
  • 做到语义化能带来很多好处：增加代码的可读性，便于维护；浏览器更好渲染和展示页面；便于搜索引擎提取关键词给网页排序；对用户友好，更好的做到无障碍使用。
avatar
文章
阅读
粉丝