HTML 初识笔记总结（一）

最新推荐文章于 2024-07-08 09:55:40 发布

前小白，快跑！

最新推荐文章于 2024-07-08 09:55:40 发布

阅读量189

点赞数

分类专栏：前端小白 HTML入门文章标签： html

本文链接：https://blog.csdn.net/qq_43440304/article/details/111104567

版权

前端小白同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML入门

2 篇文章 0 订阅

订阅专栏

HTML 初识笔记总结（一）

hello world！我是前小白，一名平凡的小白级前端工程师。

一、 HTML常见页面规范

    <!DOCTYPE html>叫浏览器用 HTML5 文档格式解析该网页
    <html lang="en">  网页语言中文
    <head>
        <meta charset="UTF-8"> 设定网页字符编码，常用的有utf-8和gb2312；
        <meta name="viewport" content="width=device-width, initial-scale=1.0">移动设备设定， intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放。user-scalable 是否允许用户缩放(yes/no{默认])
        <link rel="icon" type="image/ico" href="/favicon.ico" /> 网页ico图标设置；
        <title>Document</title> 页面标题        
    </head>
    <body>
        <h1>网页一级标题</h1>
        <p>网页段落</p>
        <img src="图片的地址(本地相对地址或服务器资源url)">
        <input placeHolder="输入框提示信息，请输入"/>
    </body>
    </html>

二、 HTML元素和标签的区别？

HTML元素结构

<开始标签 “属性”=“属性值”> 内容 < /结束标签 >

HTML元素：从开始标签到结束标签的所有代码。一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。

    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>

< ul >< li >one< /li>< /ul> 和 < li>< /li> 都是标签，但整体也是个ul元素（包裹了li元素)

HTML标签：尖括号里的关键字，一般成对出现，开始标签和结束标签。

< p>< /p> 段落标签
< img/> 图片

三、HTML常用标签属性

id属性：元素的唯一ID（不可重名）
class属性：一个或多个类名（可重）
style属性：行内样式inline style
title属性：描述格外信息（工具条使用）单标签

四、标签

学外语也知道第一件就是词汇量，前端亦如此，而且量还不多。

必知标签

定义文档类型。请始终向 HTML 文档添加声明，这样浏览器才能获知文档类型。
< html > 定义 HTML 文档。
< head > 定义文档头部的信息。
< meta/> 定义关于 HTML 文档的元信息。
< title > 定义文档的标题。
< body > 定义文档的主体。
< link/> 定义文档与外部资源的关系。
< style > 定义文档的样式信息。
< script > 定义文档中的脚本信息

常用标签

< H1……H6 > 定义文档中的一到六级标题。
< div > 定义文档中的节，
< span > 定义文档中的节，。
< p > 定义段落
< Iframe> 定义文档的内联框架。
< code > 定义一行代码
< pre > 预格式化的文本。定义多行代码（保留换行和空格）。
< base > 定义页面中所有链接的默认地址或默认目标
< !–…-- > 定义注释。
&nbsp 定义空格
&amp，定义 &

HTML中有用的字符实体

注释：实体名称对大小写敏感

HTML5新增的语义化标签

< header > 定义 section 或 page 的页眉。
< footer > 定义 section 或 page 的页脚
< section > 定义 section。
< article > 定义文章。
< nav > 定义导航
< aside > 定义页面内容之外的内容。
语义化标签在IE8及以下不兼容，需做兼容处理
- 第一种：document.createElement(“nav”);标签为行级元素，需display:block;设置为块级元素。
  
  缺点：每个标签都需要创建一次。
- 第二种：引入js插件html5shiv.js(自己写也可以）
  
  缺点：在除IE8以下的浏览器多此一举，多一次请求。

多媒体链接标签

< img/> 定义图像。注意其alt属性，title属性
< canvas > 定义图形。
< audio > 定义声音
< video > 定义视频
< a > 定义超链接

列表标签

< ul > 定义无序列表。
< ol > 定义有序列表。
< li > 定义列表的项目。
< dl > 定义自定义列表。
< dt > 定义自定义列表中的项目。
< dd > 定义自定义列表中项目的描述。

表单

< form > 定义供用户输入的 HTML 表单。
< input > 定义输入控件。属性非常多，也很常用，详情请查阅手册。
< textarea > 定义多行的文本输入控件。
< button > 定义按钮。
< select > 定义选择列表（下拉列表）。
< option > 定义选择列表中的选项。
< label > 定义 input 元素的标注。
< datalist > 定义下拉列表。

表格

< table > 定义表格
< caption > 定义表格标题。
< thead > 定义表格中的表头内容。
< tbody > 定义表格中的主体内容。
< tfoot > 定义表格中的表注内容（脚注）。
< th > 定义表格中的表头单元格。
< tr > 定义表格中的行。
< td > 定义表格中的单元格。

其他\格式标签

< blockquote > 定义段落（与p标签相同）
< q > 定义应用文本（比label标签多了一对双引号）
< strong > 定义粗体文本。
< del> 定义被删除文本。
< em > 定义强调文本。
< sup > 定义上标文本。
< sub > 定义下标文本。
< hr/> 定义水平线。
< br/> 定义简单的折行。

废弃的标题及替代标签

html只关注语意（见闻知义: 见标签知用意），不关注样式。(css关注样式)
b标签=> < strong>：定义重要性强调的文字。
u标签=> < ins>：定义插入的文字。
i标签=> < em>：定义强调的文字。(i标签现在的定义是：图标标签)
s标签=> < del>：定义被删除的文字。
-## HTML 元素类别

五、HTML 元素类别

1.、行内\嵌元素【只占用自己的大小，不可设置宽高，顶底边距】

css样式 display：inline;元素的宽度为包含的文字或图片的宽度 margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

< a >
< img >
< span >
< label >
< input\textarea >
< select\option >
< strong >
< ins >
< em >
< sub\sup >

2、块状元素【占满一行,可设置宽高】

css样式 display：block; 默认宽度为本身父容器的100% margin和padding的上下左右均对其有效

< div >
< p >
< H1 >
< form >
< table >
< ul\li\ol >
< dl\dt\dd >

3、行内块状元素【只占用自己的大小，可设置宽高,行高，顶底边距】

css样式 display：inline-block; 兼具 inline 和 block元素的特性

< img/>
< input/>
< textarea >

元素类型转换

转为块状元素：display:block 或者 float: left\right
转为内联元素：display:inline
转为内联块状元素：display:inline-block
隐性改变display类型
- 有一个有趣的现象就是当元素（display:none 除外）设置以下 2 个句之一：
  1. position : absolute 或 position:fixed
  2. float : left 或 float:right

六、绝对路径 & 相对路径 & 网络路径

1、绝对路径

是从盘符开始的路径，形如

C:\windows\system32…

2、相对路径

相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法
…/…/代表【上两级目录】
/… 代表【下级目录】
/…/…代表【下两级目录】
…/代表【上一级目录】
同级则直接引用文件名

3、网络路径

< img src=“https://www.baidu.com/img/flexible/logo/pc/result.png” alt=“百度出来” title=“taidu快出来”>

小白谢幕

这周笔记也算如约而至，给大家呈现出一些自己归类汇中的前端 HTML的知识点，下周会准备介绍HTML每个标签的特点用途。若有前端大佬发现上述有疑问或错误点，也请在评论区指点，小白在此谢过(๑╹◡╹)ﾉ"""

前小白，快跑！

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML 初识笔记总结（一）

HTML 初识笔记总结（一）hello world！我是前小白，一名平凡的小白级前端工程师。一、 HTML常见页面规范 <!DOCTYPE html>叫浏览器用 HTML5 文档格式解析该网页 <html lang="en"> 网页语言中文 <head> <meta charset="UTF-8"> 设定网页字符编码，常用的有utf-8和gb2312； <meta name="viewpor
复制链接

扫一扫