HTML知识笔记-附源码_html格式的笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_70569151/article/details/145785813

html(Hyper Text Markup Language):超文本标记语言

1、构建网页步骤

记事本：新建文本文档.txt->重命名为.html->浏览器打开

VSCODE：文件夹拖入操作区，文件显示在左侧目录上->新建文件后缀加.html

 快速生成标签：英文+tab
 快速查看网页效果：alt+b
 快速生成结构标签：!+tab
 快速复制一整行：ctrl+c
 快速粘贴一整列：ctrl+v
 快速删除、剪切一整行：ctrl+x
 注释：ctrl+/
 选中相同的元素：ctrl+d
 网页元素样式查看：浏览器检查+箭头
 路径中提示同级目录文件/文件夹：./
 编辑多行：先按住选中多个位置，再ctrl+shift+方向选中
 快速生成块级元素：输入div*4{$}

2、网页

组成：文字、图片、音频、视频、超链接

本质：通过浏览器将代码转成网页（解析和渲染）

浏览器内核：FireFox火狐浏览器->Geckp,Safari苹果浏览器->Webkit,Chrome/Opera浏览器->Blink,IE/360极速/百度/猎豹安全->Trident

基本骨架：

<html>
     <head>
         <title>标题</title>
     </head>
     <body>
         正文
     </body>
 </html>

3、web标准

构成：结构html(页面元素和内容)+表现css（外观与位置）+行为javascript（网页模型的定义与页面交互）

4、html标签

<标签名属性名1="属性值1" 属性名2="属性值2" 属性名3="属性值3"...>

1.单标签：无法包裹内容

2.双标签：开始标签-包裹内容-结束标签

3.标签关系：父子关系（嵌套关系）,兄弟关系（并列关系）

(1)标题标签

文字加粗变大，大小递减，独占一行，

 <h1>一级标题</h1>
 ......
 <h6>六级标题</h>

(2)段落标签

独占一行，段落间存在间隙

 <p>段落内容</p>

(3)换行标签

 <br>

(4)水平线标签

 <hr>