HTML详解1(黑马程序员笔记)

最新推荐文章于 2023-04-08 21:39:06 发布

1lyy

最新推荐文章于 2023-04-08 21:39:06 发布

阅读量4.5k

点赞数 4

分类专栏：前端基础 (黑马程序员) 文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_60256026/article/details/122500541

版权

前端基础 (黑马程序员) 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

web标准

web标准的构成：结构，表现，行为


结构	网页上的标签	html文件
表现	网页外观（颜色，大小）	css文件
行为	网页的交互，移动	JavaScript文件

html标签

基本语法

一对标签

<html></html>

单标签(很少使用)

<br/>

标签关系

标签关系分为包含关系和并列关系
包含关系

<html>
	<head></head>
</html>

并列关系

<html></html>
<head></head>

基本结构标签

标签	定义	说明
< html >< /html >	html标签	最大的标签（根标签）
< head >< /head >	头	最上方网页头部
< title >< /title >	标题	网页标题
< body >< /body >	主体	页面里的内容

<html>
	<head>
		<title>第一个页面</title>
	</head>
	<body>
		哈哈哈
	</body> 
</html>

网页开发工具

文档类型声明标签

文档类型声明，处于< html >标签之前，不属于html标签

<!DOCTYPE>

lang语言种类

<html lang="en">

en定义语言为英文，zh-CN定义语言为中文

字符集

<meta charset="UTF-8">

字符集是多个字符的集合，以便计算机能够识别各种存储文字

html常用标签

标题标签< h1 >< h6 >

标题标签文字全部加粗，只显示一行，由< h1 >到< h6 >重要性依次递减

段落标签和换行标签

段落标签：文本自动换行，段落之间有空隙

    <p>段落标签1</p>
    <p>段落标签2</p>

换行标签：单标签，行间距较小

<p>文本1<br/>文本2</p>

文本格式化标签

文字的加粗，斜体，下划线

语义	标签
加粗	< strong > < /strong >或< b >< /b >
斜体	< em >< /em >或< i >< /i >
删除线	< del >< /del >或< s >< /s >
下划线	< ins >< /ins >或< u >< /u >

< div >和< span >

这两个标签没有语义，他们是一个盒子，用来装内容
< div >只能站一行，是一个大盒子
< span >一行可以站多个，是一个小盒子

图片标签和路径

src

、< img >用于定义HTML页面中的图像，src用于指定图像文件的路径和文件名。

<img src=“图像URL”/>

alt

除了src属性，图像标签还具有其他属性，例如alt，替换文本，图像不能显示时显示文字。

    <img src="图片.jpg" alt="图片显示失败"/>

显示如下，
在这里插入图片描述

tite

tite,提示文本，鼠标放在图像上，显示的文字。

    <img src="图片.jpeg" alt="图片显示失败" title="图片的文本解释"/>

在这里插入图片描述

width

width,图像的宽度，单位是像素

 <img src="图片.jpeg" alt="图片显示失败" title="图片的文本解释" width="200"/>

在这里插入图片描述

height

height修改图像的高度

<img src="图片.jpeg" alt="图片显示失败" title="图片的文本解释" width="200" height="50"/>

这样看起来图片就扁了，在实际开发过程中，一般只修改高或者宽，另外一个等比例缩放在这里插入图片描述

border

border,给图像加边框

<img src="图片.jpeg" alt="图片显示失败" title="图片的文本解释" width="500" border="15"/>

给图片加一个黑色的大边框。
在这里插入图片描述

总结

属性	属性值	说明
src	图片路径	必须属性
alt	文本	图像不能正常显示时，显示说明文字
title	文本	鼠标移动到图像上时显示的文字
width	像素	图像宽度
height	像素	图像高度
border	像素	图像边框

特性：
  1.一个图像可以有多个属性，必须写到标签名的后面。
   2.属性之间不分先后顺序，标签名与属性名，属性名与属性名之间以空格隔开。
   3.属性=“属性值”

相对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

相对路径分类	符号	说明
同一级路径		图像和html文件位于同一级
下一级路径	/	图像位于html文件下一级
上一级路径	… /	图像位于html文件上一级

绝对路径

绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的。注意这时候为" \ "，例如：D:\Users\apple\Destop\qianduan\图片.jpg

超链接标签

实现页面跳转，格式为：
其中target是打开窗口的方式，_self当前窗口打开页面，_blank新窗口打开页面

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

链接分类

1.外部链接，以hppt://开头

<a href="http://www.qq.com" target="_self">腾讯</a>

2.内部链接，网站内部页面之间的相互连接，直接链接内部页面名称即可

    <a href="首页.html" target="_blank">首页</a>

3.空连接，#代替链接名

<a href=#>空连接</a>

4.下载链接，（将文件压缩后处理）地址链接的是文件.exe或者是zip等压缩包的形式，直接写压缩包地址即可。

    <a href="首页.zip" target="_blank">下载</a>

5.网页元素链接，在网页中的各种网页元素（文本，视频，图片），点击后链接到对应地址。

    <a href="http://www.qq.com" target="_blank"><img src="图片.jpeg"/></a>

6.锚点链接，点击链接可以快速定位页面中的某个位置，在herf的属性中，属性值为” #名字 “的形式

<a herf="#life">个人生活</a>

<h3 id="live">个人生活<h3>
文本内容

html注释标签和特殊字符

注释标签：< !–注释内容-- >，快捷键Ctrl+/
特殊字符:

字符	描述	代码
	空格	&nbsp ;
<	小于号	&lt ;
>	大于号	&gt ;

1lyy

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML详解1(黑马程序员笔记)

html基础1
复制链接

扫一扫

专栏目录