【HTML】The first day——骨架与标签

最新推荐文章于 2024-07-18 20:18:47 发布

samarua

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量175

点赞数 2

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/m0_46202073/article/details/105748050

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

▉ Web标准

Web标准构成：结构（Structure），表现（Presentation），行为（Behavior）

可以理解为人的身体，人的着装，人的行为动作

分别对应HTML，CSS，JavaScript（它们都是独立的，放在不同的文件中）

▉ 初见HTML

• HTML（Hyper Text Markup Language， 超文本标记语言）

• HTML不是一种编程语言，而是一种标记语言

• 标记语言是一套标记标签（markup tag）

通俗地讲html和浏览器的作用：
网页是由网页元素组成的，这些元素是利用html标签描述出来的，浏览器的作用是解析

“超文本的含义”：
超越文本限制（图片、视频、声音…）；超链接

▶ HTML骨架标签

<html>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</html>

▶ 标签分类 ——> 常规元素（双标签）; 空元素（单标签）

▶ HTML标签关系

嵌套关系（父子）
并列关系（兄弟）

▶ 默认生成的html骨架

<!DOCTYPE html>                 <!-- 文档类型：告诉浏览器按照HTML5的规范页面 -->
<html lang="en">                <!-- 页面语言：指定html标签内容所用的语言(中文zh-CN) -->
<head>
    <meta charset="UTF-8" />    <!-- 字符集：让html文件以utf-8编码保存；浏览器根据utf-8解码 -->
    <title>Document</title>
</head>
<body>

</body>
</html>

▶ 标签语义化

就是根据标签的语义，在合适的地方给一个合理的标签，让结构更清晰

▉ HTML常用标签

▶ 排版标签


标题标签	<hx></hx>	一行只能一个；从h1到h6
段落标签	<p></p>
水平线标签	<hr />
换行标签	<br />
div(divison)标签	<div></div>	用来布局；一行只能一个div
span标签	<span></span>	用来布局；一行可以多个span

▶ 文本格式化标签


加粗	<strong></strong>、<b></b>	推荐前者，语义更强
倾斜	<em></em>、<i></i>
删除线	<del><del>、<s></s>
下划线	<ins></ins>、<u></u>

▶ 图像标签

语法： <img src=“图像URL” />

（注意属性值一定要加双引号""；不同属性中间用一个空格隔开）

属性	含义
src	（必须属性）URL，即路径
alt	图像不能显示时替代显示的内容
title	鼠标悬浮时显示的提示文本
width,height	图片大小；改变其中一个即可等比缩放
border	图像边框

▶ 链接标签

语法：<a href=“跳转目标” target=“目标窗口弹出方式”> 文本或图像 </a>

<a href="http://baidu.com"> 百度一下（外部链接） </a>

<a href="hello.html"> Hello（内部链接） </a>

<a href="#"> 这是一个空连接 </a>

<a href="http://baidu.com"><img src="lolibg.png" /></a>	 <!-- 这是一个图像链接 -->

<a href="http://baidu.com" target="_self"> 默认为本页面打开(_self) </a>
<a href="http://baidu.com" target="_blank"> 在新窗口打开(_blank) </a>

▶ 注释标签

▉ 其他

▋锚点定位

“找目标”：<h4 id=“here”> 目标位置 </h4>

“拉关系”：<a href="#here"> 链接目录 </a>（注意href的值加#号）

其实就是链接标签a与自定义id的组合使用

▋ base标签

base用于设置整体所有链接的打开状态（写在head之间）：

<head>
	<base target="_blank">
</head>

▋ 预格式化文本

<pre>
	* * * *
	    *
	   *
	 * * * *
</pre>

会按照我们的写的格式完全一样地显示；但比较少用，因为不好整体控制

▋ 特殊字符

几个常用的
	不换行空格（space）
&ensp;	半角空格（1/2汉字）
&emsp;	全角空格 (1个汉字)
<	<
>	>
&amp	和号&
²	²
³	³

▋ 关于XHTML

可扩展超文本标记语言（Extensible HTML）

XHTML是更严格更纯净的HTML版本；XHTML也是一个W3C标准

☀ loli suuuuuki

> _ < 这里是第二篇（共两篇）

samarua

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【HTML】The first day——骨架与标签

▉ Web标准Web标准构成：结构（Structure），表现（Presentation），行为（Behavior）可以理解为人的身体，人的着装，人的行为动作分别对应HTML，CSS，JavaScript（它们都是独立的，放在不同的文件中）▉ 初见HTML• HTML（Hyper Text Markup Language，超文本标记语言）• HTML不是一种编程语言，而是一种标记语言...
复制链接

扫一扫