HTML学习笔记 1

最新推荐文章于 2024-08-22 11:40:47 发布

HammerTien

最新推荐文章于 2024-08-22 11:40:47 发布

阅读量192

点赞数

分类专栏：前端学习文章标签： html 学习笔记

本文链接：https://blog.csdn.net/hammertien/article/details/90760489

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

写在前面

HTML 笔记系列源自于 bilibili av15241731 黑马程序员培训视频，感谢UP主上传精彩学习视频

第一部分内容来源 p1 - p34，建议1.5倍速，一天时间

刚刚接触前端学习，如有错误、疑问以及任何其他问题，欢迎一起探讨学习

HTML学习笔记 1

1 初识 HTML

HTML 是带有标签的特殊语言

XXX
strong XXX strong
<strong> XXX </strong>

2 HTML 骨架格式

<html>

    <head>
        <title></title>    <----- 这个部分显示在浏览器标签页里
    </head>
    
    <body>
                           <----- 这个部分显示在浏览器内容里
    </body>

</html>

3 标签分类

标签分为双标签和单标签

双标签

<strong> </strong>

单标签（非常少）

<br />

4 HTML 标签关系

1.嵌套关系

<html>                     <----- 根标签
    <head>
        <title> </title>
    </head>
</html>

2.并列关系

<html>

    <head>
        <title></title> <-+
    </head>               |
                          +--- head 和 body 就是并列关系
    <body>                |
                        <-+
    </body>

</html>

5 文档类型 <!DOCTYPE>

<!DOCTYPE html> (html5)

主要是用来声明 html 的版本

6 字符集

<meta charset="UTF-8">

字符集	说明
UTF-8	目前最常用的字符集，包含全世界的字符
GB2312	简单中文，包括 6763 个汉字
BIG5	繁体中文，港澳台地区使用
GBK	包含全部中文字符，是 GB2312 的拓展，加入繁体字并兼容 GB2312

7 HTML 标签

7.1.排版标签

7.1.1 标题标签

为了使网页更具有语义化，常会使用标题标签，html 提供六种等级

<h1> <h2> <h3> <h4> <h5> <h6>

基本语法格式

<hi> head </hi>

其中 h1 一般是给 logo 使用，尽量少用

7.1.2 段落标签

<p> 段落文字 </p>

7.1.3 水平线标签

<hr/>

7.1.4 换行标签 break

<br/>

7.1.5 div(division) 与 span

div 分割，组合网页

span 跨度

7.2.文本格式化

标签	效果
<b></b> 与 <strong></strong>	加粗
<i></i> 与 <em></em>	斜体
<s></s> 与 <del></del>	加删除线
<u></u> 与 <ins></ins>	加下划线

7.3.标签属性

标签可以有多个属性，写在开始标签中来定制显示样式

<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>

7.4.图像标签

<img src="图像URL" 属性=XXX />

属性	属性值	描述
src	URL	图片路径
alt	文本	图像无法显示时用文本替换
title	文本	鼠标悬浮时显示的内容
width	像素	设置图片宽度
height	像素	设置图片高度
border	数字	设置图片边框宽度

7.5.链接标签 anchor

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

herf 如果暂时没有链接，就以 # 代替临时链接

targrt 有两种，self 直接跳转，blank 新窗口打开

7.6.锚点定位

使用 <a herf="#链接文本"> 点击文本 </a>

7.7.base 标签

base 可以设置整体链接的打开状态

<base target="_blank"/>

8 路径

相对路径：同一级路径直接就是文件名
上一级路径：” …/文件
下一级路径： /文件夹/文件
绝对路径：直接写文件的地址

9 列表标签

9.1.无序列表 ul

<ul>
    <li> 列表项1 </li>
    <li> 列表项2 </li>
    <li> 列表项3 </li>
</ul>

<ul> 标签里边只能放 <li> 标签
<li> 标签也是一个容器，里边可以容纳所有元素
无序列表会带有自己的样式属性，可用 css 调整

9.2.有序列表 ol

<ol>
    <li> 列表项1 </li>
    <li> 列表项2 </li>
    <li> 列表项3 </li>
</ol>

9.3.自定义列表

<dl>
    <dt> 沈阳 </dt>    <------- 名词
    <dd> 和平 </dd>    <---+
    <dd> 沈河 </dd>    <---+--- 名词解释
    <dd> 铁西 </dd>    <---+
</dl>

HammerTien

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记 1

文章目录写在前面HTML学习笔记 11 初识 HTML2 HTML 骨架格式3 标签分类4 HTML 标签关系5 文档类型 6 字符集7 HTML 标签7.1.排版标签7.1.1 标题标签7.1.2 段落标签7.1.3 水平线标签7.1.4 换行标签 break7.1.5 div(division) 与 span7.2.文本格式化7.3.标签属性7.4.图像标签7.5.链接标签 anchor7.6...
复制链接

扫一扫