html和前端

HyperText（超文本） Markup Language

注重方面：功能、美观、安全、性能、无障碍、兼容性、体验

mindmap
      关键点
          功能
          美观
          安全
          性能
          无障碍
          兼容性
          体验

graph TD
HTML --> CSS --> JavaScript

<!doctype html> 标记了html的版本
</html>文档根标签
<head>页面源数据
<meta charset= "UTF-8 ">
<title>页面标题
</title>
</head>页面源数据
<body>需要呈现的内容
<h1>一级标题
</h1>
<p>段落内容
</p>
</body>需要呈现的内容
<html>文档根标签

dom树：将代码转化成树形结构

QQ图片20230727172654.png

HTML语法

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

标题h1~h6

列表：
有序列表<ol>；
无序列表<ul>；
定义列表<dl>（开头<dt>，内容<dd>）

QQ图片20230727173603.png

链接

<a href="https://www.baidu.com/">

多媒体：

图片<img src="转存失败，建议直接上传图片文件 " alt="转存失败，建议直接上传图片文件">；
音频<audio>；
视频<video>

输入 `<input>`

选择：选择多个<input type="checkbox">
单个<input type="radio">
下拉选择<select>
自由输入(带联想)<input list=" ">输入一个列表自动匹配，也可以自由输入

文本类

快捷引用\<blockqutoe cite=" "(来源)>
短引用<cite>(多用于作品名字)；
<p>（多用于之前讲过的具体事物）
代码<code>; 强调<em>

语义化是什么?

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
有序列表用ol;无序列表用ul
lang属性表示内容所使用的语言

谁在使用我们写的HTML

开发者-修改、维护页面
浏览器-展示页面
搜索引擎-提取关键词、排序
屏幕阅读器-给盲人读页面内容

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

第二节课的学习笔记｜ 青训营