前端基础--学习笔记HTML

HTML,全称为“Hyper Text Markup Language” 即超文本标签语言。主要是通过标签对网页中的文本,图片,声音等内容进行描述。

html基础概述

基本框架:

<!DOCTYPE html>	//html5标准
<html lang="zh-cn">	//网页的语言标识,zh-cn代表中文,en代表英文
<head>	//头部标签主要存储一些网页的信息,比如编码,标题等
    <meta charset="UTF-8">	//字符集
    <title>Document</title>	//标题
</head>
<body>	//body标签中存放网页的主要内容
    
</body>
</html>

字符集简介:
utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312
gb2312 简体中文,包括6763个常用汉字
BIG5 繁体中文,港澳台地区使用
GBK包含所有中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312
UTF-8包含几乎所有国家需要的字符

html核心:标签(带有<>的元素),表示某个功能的编码

1.双标签
<标签名> 内容 </标签名>
example:< h1> 与 </ h1>

2 单标签
<标签名/>
example:< br/>

标签关系
1.嵌套关系
2.并列关系

标签属性:
<标签 属性1=“属性值1” 属性1=“属性值1”…> 内容 </标签>
属性不分前后,以空格间隔

常用标签:

标题标签< h1> - < h6>
字体逐级变小,h1一般一个页面只有一个,为logo

段落标签< p>内容< /p>

水平线标签< hr />

换行标签< br />

布局标签
< div>内容< /div> (实际上就是一个盒子)
< span>内容< /span>

文本格式化标签:
< b>< /b>,< strong>< /strong> 文字以粗体方式显示
< i>< /i>,< em>< /em> 文字以斜体方式显示
< s>< /s>,< del>< /del> 文字加删除线
< u>< /u>,< ins>< /ins> 文字加下划线

图像标签< img>
< img src=“图像路径”> src为标签img的必须属性,指定了图像文件的路径和文件名
相对路径
图像和文件在同一级目录下,只需要输入图片名称,如:src = “图片名.jpg”
图像在文件下一级,则需要文件夹加图片名,如 src = “img/图片名.jpg”
图像在文件上一级,则需要在图片名前加…/,如 src = “…/图片名.jpg”
绝对路径
从盘符开始到该图片的完整路径或完整的网络地址。

属性 属性值 描述
src URL 图像路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度(一般宽和高只用设置一个)
border 数字 设置图像边框的宽度

影音标签
< audio>< /audio>只能播放音频
< video>< /video>音频视频都可
< embed>< /embed>flash动画

链接标签< a>

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

target取值有self,blank。默认值时self表示在本页跳转,blank为在新窗口跳转。
href = "#“表示空链接,即点击不会跳转
href=”#id名"可跳转到页面内该id标签处

base标签

<base target="_blank"> 设置整体连接的打开状态为blank

常用特殊字符标签

特殊字符 描述 代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
¥ 人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 上标二 &sup2;
³ 上标三 &sup3;

注释标签

<!-- 注释语句 -->

猜你喜欢

转载自blog.csdn.net/qq_43813560/article/details/88645483