【HTML5学习笔记1】html标签(上)

web标准(重点)

w3c

构成:结构、表现、行为,结构样式行为相分离

结构:网页元素整理分类 html

表现:外观css

行为:交互 javascript

html标签

1.html语法规范

1)

所有标签都在<>内

且一般成对出现(双标签) <html></html>(开始结束

单标签<br />很少

2)标签关系

包含 (嵌套

<head>

<title> </title>

</head>

并列

<head> </head>

<body> </body>

<html>

<head> </head>

<body> </body>

</html>

2.html基本结构标签

1)第一个html网页

骨架标签

复制代码
<html>
  <head>
    <title>我的第一个页面</title>    
  </head>
  <body>
    月薪过万
  </body>
</html>

3.开发工具

vscode

输入感叹号 !

1)插件

auto rename tag 自动同步修改标签

one dark pro 主题颜色

格式化代码

设置-正在格式化 打开

open inbrowser 预览页面

live server 实时预览

vscodeicons 文件图标主题

easyless

会了吧 陌生单词

2**)快捷键**

shift alt 下箭头 直接复制整行

ctrl d 修改同样的部分

ctrl alt 上下箭头 添加多个光标

ctrl g 跳转行数

3)vscode骨架标签代码解释

<!DOCTYPE>文档类型声明标签,用的是什么版本的html

lang="en"定义当前文档显示的、"zh-cn" 中文网站

<meta charset = "utf-8">字符集

4.html常用标签

1)标签语义

标题标签:6个网页标题h1-h6

复制代码
<h1>一级标题</h1>	

段落标签:<p>

复制代码
<p>段落</p>

换行标签:<br />

2)案例 :新闻

3)文本格式化标签

加粗、斜体等

4)<div>、<span>没有语义

就是一个盒子,用来方东西的

div divsion表示分割分区。单独占一行 ,大盒子

span表示跨度、跨距离。一行可以放很多个。小盒子

5)图片标签

复制代码
<img src=""/>

src是img标签的必须属性,用于指定图像文件的路径和文件名

alt 图片无法显示的时候用文本替换

title 提示文字 鼠标经过图片时显示的文字

height

width 一般只修改高或者宽的一个

broder 边框

标签除了src要在最前面之外其他没有要求

6)图像标签和路径

文件夹 img

相对路径、

绝对路径

7)超链接标签(重点

1链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

属性:

href-指定连接目标的url地址

target-指定连接页面的打开方式,_self默认,__blank新窗口打开

2链接分类

外部链接:百度等

内部链接:自己写的网页

空连接:没有确定链接目标时,<a href="#">首页</a> (占位置)

下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件

网页元素链接:图片 文字 表格 音频都可以

锚点链接:快速定位跳转页面某个位置

复制代码
<a herf="#名字"> 名字</a>要进行链接的位置
<h3 id="名字"> 它的名字</h3>目标标签位置

5.html中的注释和特殊字符

1)注释

<!-- 注释 -->

2)特殊字符

相关推荐
_Kayo_17 分钟前
node.js 学习笔记3 HTTP
笔记·学习
加班是不可能的,除非双倍日工资3 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi3 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
CCCC13101633 小时前
嵌入式学习(day 28)线程
jvm·学习
gnip3 小时前
vite和webpack打包结构控制
前端·javascript
excel4 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
星星火柴9364 小时前
关于“双指针法“的总结
数据结构·c++·笔记·学习·算法
小狗爱吃黄桃罐头4 小时前
正点原子【第四期】Linux之驱动开发篇学习笔记-1.1 Linux驱动开发与裸机开发的区别
linux·驱动开发·学习
阿华的代码王国4 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
一条上岸小咸鱼4 小时前
Kotlin 基本数据类型(三):Booleans、Characters
android·前端·kotlin