前端与html 新手个人笔记~ ｜豆包MarsCode AI 刷题前端与html的新手个人起步笔记，涉及到初步的DOC

前端与html 新手个人笔记~

2024.11.04

Hi~ 各位好呀，我是NightToona。很高兴能进入到青训营当中与大家共同学习前端技术，因为对于前端方面属于第一次认真学习，所以文章可能会出现错误之处或是不够干货，如有错误望大佬指出呀。不过这个也算是我的个人学习经历的一次记录，如果能在某天正好帮到各位一点点点点，那真的是我的荣幸啦。不多说，这就开始我的学习之路啦~

HTML的基础结构

DOCTYPE

所有的html文件中开头处的<!DOCTYPE html>是HTML文件的声明，负责让浏览器选择适当的渲染器和解析版本对文本进行网页化。

不过要注意的是，目前网页中的<!DOCTYPE html>是指将网页文本以HTML5进行渲染。因为在W3C标准之前各种浏览器有自己的渲染标准与模式，因此不声明会导致HTML5中某些新特性的标签无法使用，如：

新特性	HTML 5 标签
语义化标签	`<header>` `<footer>` `<artical>` `<section>` `<nav/>`
多媒体	`<audio/>` `<video/>`
图像	`<canvas>`
本地储存	`<localStorage>` `<sessionStorage>`
新表单控件	`<input type="email">` `<input type="url">` `<input type="date">`

关于新特性中的本地储存，早期传统方式并且当前普遍使用的是cookie。而在HTML 5中的<localStorage> <sessionStorage>分别将数据分为了持久化类型（长） 和会话级类型（短） 两种，有效的提高了传统数据储存安全性与速度。

严格模式与混杂模式

上面我们提到过了没有<!DOCTYPE html>会导致页面渲染在不同浏览器下会出现不同显示状况，这就不得不提到严格模式与混杂模式这二者了。

严格模式：标准模式，以W3C标准解析代码，使多端平台显示统一化
混杂模式：兼容模式，浏览器各自解析各自的，容易造成显示错位、不显示等异常情况

关于<!DOCTYPE html>，它又称作 文件类型定义 ，缩写为 DTD ，同时这个声明须在文档的第一行。

！注意 :并不算是HTML标签！

关于二者之间的差异有：

盒模型的高宽包含内边距（padding）和边框（border）

可设置的行内元素的高宽

可设置的百分比的高度

margin:0 auto设置水平居中会在IE中错误显示 ……

HTML的整体结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> TitleName </title>
    <href="style.css" rel="stylesheet" type="text/css">
  </head>
  
  <body class="background">
    <header> 抬头的页眉 </header>
    <nav>  页眉处功能栏 </nav>
    
    <main> 页面主要内容
        <section></section>隔离内容
        <article></article>展示内容
    </main>
    
    <footer>页脚</footer>
  </body>
</html>

标签速查小笔记

<head></head> 用于声明HTML的编码、页面名、语言、引用等等；

同时<body></body>用于承载网页主要显示内容，当中可以包括以下标签：

<header></header> --> 用于显示页眉

<nav></nav> --> 用于显示页眉处功能按钮、logo等

<main></main> --> 用于显示网页主体内容

<section></section> --> 用于分隔文章与文章

<article></article> --> 用于显示文章具体信息等

<footer></footer> --> 用于显示页脚（版权、logo、联系方式等等）

最后用<html></html>进行整体闭合，规范代码结构。

HTML推荐的语法与建议

标签与属性不分大小写，建议书写时统一规范为小写（当使用vim等时便于区分HTML原生标签与其他的闭包组件的标签）；
空标签可不闭合，如<input/>、<mate/>等；
属性值用双引号；
HTML、CSS、Js等实现分别分文件进行书写，有利于提高文本的可读性，便于代码维护，不然像样式文本写入HTML中会导致过于混乱。
HTML撰写的时候要保证规范、简洁、准确，同时也要关注到无障碍与安全等等内容~

HTML的语义化

在最后，既然我们前面提到过关于HTML的撰写规范化，那就不可能绕得过 语义化 这个关键的内容了。

语义化，顾名思义就是将HTML中的相应结构的关键词进行含义化，便于使开发人员理解当前层级与层级下所包含的相关内容。用通俗的话来说就是：

减少使用无实际含义的<div/> <span/>等标签的使用!
将层叠样式表（CSS）、JavaScript脚本、HTML超文本三者分别在对应的文件中进行实现
保证整个文本结构的完整性，同时标签是否完整闭合及关键词是否有所遗漏。（虽然语法等方面要求不严，但养成好的规范有利于维护~）

前端与html 新手个人笔记~ ｜ 豆包MarsCode AI 刷题