HTML学习笔记--第一天

最新推荐文章于 2022-07-29 12:17:11 发布

「已注销」

最新推荐文章于 2022-07-29 12:17:11 发布

阅读量340

点赞数

分类专栏：前端学习文章标签： html5

本文链接：https://blog.csdn.net/DreamCloud714/article/details/103747662

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1界面基本结构

<!DOCTYPE HTML>
<html>
  <head>
    <title>这里是标题</title>
  </head>
  <body>
    
  </body>
</html>

HTML存在有版本差异
HTML5的头部

<!DOCTYPE HTML>

其他版本

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

页面标签

meta标签

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

<meta charset="utf-8"/><!--网页解析编码格式配置(HTML5):告诉浏览器使用指定的编码格式解析文档-->
<!--HTML4:文档编码格式设置-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!--网页关键字-->
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
<!--网页描述-->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
<meta name="author" content="白大神"/><!--网页作者-->
<!--网页自动跳转 5秒跳转到百度-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<!--
	width=device-width ：表示页面宽度是设备屏幕的宽度 
	initial-scale=1.0：表示初始的缩放比例 
	minimum-scale=0.5：表示最小的缩放比例 
	maximum-scale=1.0：表示最大的缩放比例 
	user-scalable=no：表示用户是否可以调整缩放比例。
-->

<h1>----<h6>标签定义了六个不同级别的标题
<p></p>标签段落标签其中的内容为一段结束时自动换行并且段与段之间的行间距增大
<hr/> 横线
<br/> 换行
<div></div> 是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)，它应该在没有任何其它语义元素可用时才使用 (比如 <article> 或<nav>) 。
<span></span>元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个块元素而\ <span> 则是行内元素。

文本格式化标签

b和strong 粗体
i和em 斜体
s和del 加删除线
u和ins 加下划线

标签的属性
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。

<img src="../imgs/wo.jpg" alt="这里需要显示一张图片" width="200px" height="200px" border="5px">

超链接标签

<a href="news.html" target="_self">这是一个超链接</a>

href：表示链接的地址地址可以时内部地址也可使外部地址

<a href="http://www.baidu.com" target="_self">跳转到百度</a>

  <a href="#two" target="_self">跳转到百度</a>

<p id="one">
    Reference的缩写。意思是超文本引用
    target：打开的目标：_self 在当前窗口打开
 _blank 在新窗口中打开
注意：
1.外部链接 需要添加 http:// www.baidu.com
2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

base标签
base 可以设置整体链接的打开状态
base 写到 <head> </head> 之间

<base target="_blank">

转义字符
例如空格无论在编辑器中加多少个空格在页面显示只显示一个空格
如果想要显示多个空格可使用转义字符
路径：
实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为：相对路径和绝对路径
相对路径
图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=“logo.gif” />。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src=“img/img01/logo.gif” />。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="…/logo.gif" />。
绝对路径
绝对路径“D:\web\img\logo.gif”，或完整的网络地址。

「已注销」

关注

0
点赞
踩
0

收藏

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

1界面基本结构<!DOCTYPE HTML><html> <head> <title>这里是标题</title> </head> <body> </body></html>HTML存在有版本差异HTML5的头部<!DOCTYPE HTML...
复制链接

扫一扫