html基础
标签基本语法
html - 通过不同的标签来给网页提供不同的内容
html中的标签有双标签和单标签两种
1)双标签
<标签名 属性1=属性值1属性2=属性值2 …>标签内容</标签名>
2)单标签
<标签名 属性1=属性值1-属性2=属性值2·…>·或者<标签名-属性1=属性值1-属性2=属性值2·…/>
说明:
a.标签名不是程序员自己命名的,而是html提前规定好的
b.每个标签是单标签还是双标签是确定的,不能修改
c.不管属性值的本质是什么数据,属性值都必须写在双引号里面
d.双标签的标签内容可以是任何内容,包括:只要文字、其他一个或者多个,一层或者多层标签、标签和文字的组合
常用标签
<!-- 版本说明 -->
<!DOCTYPE html>
<!--
html标签 - 代表整个网页
head标签 - 网页顶部,主要负责网页图标和网页标题的显示
body标签 - 网页内容的显示
-->
<!--
-->
<html>
<head>
<!-- 设置网页编码方式 -->
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>day——one</title>
<!-- 设置图标
link标签 - 导入外部文件
1)rel属性 - 文件的作用
2)type属性 - 导入的文件的类型和文件后缀;
text/css - 文本文件/后缀是.css
image/png - 文本文件/后缀是.png
3)href属性 - 文件路径
-->
<link rel="icon" type="image/png" href="./img/2.png"/>
</head>
<body>
<!-- 1.标题标签: h1~h6 -->
<h1 id=b>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 2.p标签
一个p标签的内容会单独占一行
-->
<!-- 3.行内文字标签:span -―>
<!-- 4.加粗和倾斜:b、i(行内的)—->
<!-- 5.图片标签: img
src属性: 本地图片地址或者网络图片地址(决定要显示的是哪张图片)
title属性: 当鼠标移动到图片上显示的内容
-->
<!--显示本地图片-->
<img src='./img/1.png' title="本地图片">
<!--显示网络图片-->
<img src='https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png' title="网络图片">
<!-- 6.超链接 : a
target属性 - 跳转方式; _self(默认值,直接在当前网页中加载新的页面)、_blank(在新的窗口中加载新的页面)
href属性 - 跳转地址
情况一:网页地址 - 跳转到新的网页
情况二:本地html文件路径 - 打开本地页面(本地跳转)
情况三:id选择器 ― 网页精确定位
-->
<!-- 文字超链接 -->
<a href="http://www.baidu.com">百度</a>
<!-- 图片超链接 -->
<a href="http://www.baidu.com">
<img src='./img/1.png' title="本地图片">
</a>
<!-- 描点超链接 -->
<a href="#b">跳转到id=b标签的位置</a>
</body>
</html>