HTML 01-01 标签笔记

最新推荐文章于 2024-07-22 15:26:19 发布

不停喝水

最新推荐文章于 2024-07-22 15:26:19 发布

阅读量222

点赞数 4

分类专栏： # 【HTML5】文章标签： html

本文链接：https://blog.csdn.net/weixin_48200589/article/details/106472196

版权

【HTML5】专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.HTML

指的是超文本标记语言
HTML不是编程语言，是一种超文本标记语言
1.1.网页：HTML利用标签描述出来，然后通过浏览器解析展示给用户
总结：由图片，文字，文本，链接组成

2.常用浏览器

浏览器内核：读取网页内容，整理讯息，计算网页的显示方式并显示页面。
Chrome Blink内核就是Webkit的分支

3.WEB标准（重点）

基本分为两类:第一种IE,一般就是政府网站或者BAT大厂才需要兼容
第二种就是其他的
由W3C组织和其他标准化组织指定的一系列标准的集合。
3.1让WEB发展前景更好、内容被更多的设备访问、更容易被搜索引擎搜索、降低网站流量费用

3.2****WEB标准的构成
主要包括结构、表现、和行为三个方面

WEB标准提出的最佳体验方案：结构、样式、行为相分离。
人话：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中

HTML语言规范

1.双标签和单标签

1.2标签关系

包含关系和嵌套一样的说法
并列关系

开发工具VScode

1.新建文件
2.保存为HTML文件
3.快捷生成

!tab

开发工具！TAB总结

字符集（Character set)是多个字符的集合。

在<head>标签中，<meta Character set ="UTF-8"> 必须写

在HTML5当中不写闭合 / 也行。

HTML常用标签

排版标签

<html> 根标签，最大的标签
<head>网页头部显示内容
<title></title>文档标题
<hx></hx>标题标签
<p></p>段落换行标签
<hr />水平线标签
<br />换行标签
<div></div>用来布局的，只能放一个
<span></span>用来布局的，可以放好多个span
<b></b>和<strong></strong>文字加粗标签,推荐使用strong
<i></i>和<em></em>文字斜体标签，推荐使用em
<s></s>和<del></del>文字加删除线显示，推荐del
<u></u>和<ins></ins>文字加下划线显示，不赞成使用u

ctrl +回车快速换行
shift+下建直接复制这一行代码下面这两行就是这样复制的

h1-h6 p div 单独占一整行块级元素
strong b em i ins u del s span 一行内显示多个元素行内元素

 <!-- div 和 span 是没有语义的，就是一个盒子，装内容 
    division的缩写：表示分割，div 的子级 也可以是div-->
    <div>这是头部，我是一个div标签一个人占一行</div>
    <div>我是<span>老王</span></div> <br>
    <div> 这个里面可以加所有HTML5其他标签 </div>
    <!-- span是一个小盒子 后面学到网页布局的时候会用到
    一行可以用到多个span -->

图像标签

<img src="图像URL" /> 该语法中src属性用于指定图像文件的路径和文件名

<img />标记属性

alt =“”图像不能显示时的替换文本
title=“” 鼠标悬停图片上时显示的内容
width=“” 设置图像的宽度
height=“” 设置像素的高度
高和宽只需要设置一个就可以，会等比例缩放
border="" 设置图片边框后面会使用css来做，这里只要记住这个单词就好了

<!-- 图像标签的使用 -->
    <!-- alt替换文本 没有照片 或者显示不出来的时候 -->
    <img src="#" alt="我是一张照片">
    <!-- title 提示文本，鼠标放到图像上，能有文字提示 -->
    <img src="#" alt="没有照片时显示的文字" title="鼠标放上来就会显示这些文字">

图像标签和路径（重点）

相对路径：图片相对与HTML页面的位置
./ 和直接输入 xx.jpg时一样的 ./代表着当前的意思并且会有提示
…/ 返回上一级

同级：<img src="#" / >

上级：<img src="image/#" />

<img src="timg.gif" alt="">
    <img src="文件夹名字/文件夹名/timg.jpg " alt="">
    <img src="../" alt="">

链接标签
空连接有个注意事项
name只能放再a链接里面

<a href="跳转目标">文本或图像</a>

<a href="demo.html"内部链接 </a>

<a href="#"> 空连接</a>
1.空连接 用一个#的时候 点击链接 会回到顶部 有一个刷新的效果 
<a href="javascript:;"> 空连接</a>
最好写上javascript:; 这样不会跳转刷新


<a href="网址"> <img src="文件名" /> </a> 图像链接
<a href="" target="_blank"> 文本或图像 </a> 默认是_self，_blank是在新窗口打开

注释标签

<!-- 注释语句 --> 快捷键ctrl+/ 或者 ctrl+shift+/

路径

相对路径：保存不同目录的网页引用同一个文件时，使用的路径不相同，为相对路径
从代码所在的这个文件出发，去寻找我们的目标文件的，而我们说的上下同级，就是图片位于HTML页面的位置
1.同一级路径：同一级路径，图片引用的时候，直接写图片的名字就可以了 
2.下一级路径：<img src="images/timg.jpg" /> 需要"/"符号表示下一级路径
3.上一级路径：<img src="../images/timg.gif"> 需要"../"
绝对路径：<img src="网络图片网络地址或者电脑图片文件夹地址" /> 不推荐使用图片文件夹地址
电脑文件夹地址方向\是这个样子
而相对路径是/这个

锚点定位

通过创建锚点链接，能够快速定位到目标内容**，使用#id定位

1.id模式
<a href="#id名称">链接的内容</a>	
<h3 id="id名称">需要目标内容</h3>

2.name模式
使用name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用。

<a href="#name名称" 链接地址</a>
<a name="name名称" 需要链接的内容 > </a>

 锚点定位 链接中加上#号 标记可以用id或者name
    但是name不能放在块级元素（p hx div ul ol li）中

base标签

1.base可以设置整体链接的打开方式
2.base写到<head></head>之间`
3.把所有的连接都默认添加target="_blank"

<base target="_blank">

pre标签预格式化文本

这个标签里的文字，会按照我们书写的模式显示，不需要段落和换行标签了。但是，比较少用，因为不好整体控制。

<pre>
        可以对空格和空行

           进行控制

</pre>

特殊字符（理解）

不需要用＆ｎｂｓｐ；
用输入法的全角输入方法就可以了
只需要记住空格大于号小于号就可以了，剩下的回来查阅
1.是以运算符&开头，以分号符；结尾
2.他们不是标签，而是符号。
HTML中不能使用小于号“<“和大于号”>”特殊字符，浏览器会将它们作为标签解析，若要显示正确，在HTML源代码中使用字符实体

空格符：&nbsp;
大于号：&gt;
小于号: &lt;

<a href="#">more &gt;&gt;</a>

不停喝水

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML 01-01 标签笔记

!tab排版标签<title></title>文档标题<hx></hx>标题标签<p></p>段落换行标签<hr />水平线标签<br />换行标签<div></div>用来布局的，只能放一个<span></span>用来布局的，可以放好多个span<b></b>和<strong></strong>
复制链接

扫一扫