前端小白HTML——1.html基础

最新推荐文章于 2024-01-24 10:30:49 发布

cheyayi0378

最新推荐文章于 2024-01-24 10:30:49 发布

阅读量359

点赞数

原文链接：https://my.oschina.net/u/3272626/blog/1858528

版权

#HTML语言的基本规则# ##1.1 HTML基本结构 <head>内是头部信息，不显示在网页上 <body>内是网页内容 <DOCTYPE>声明必须放在HTML文档第一行，不是html标签 <meta http-equiv="Content-Type content="text/html";charset=UTF-8"/>依次说明内容、文档类型、编码方式

<DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content-Type content="text/html";charset=UTF-8"/>
</head>
<body>
    网页主体内容
</body>
</html>

扩展名可以是htm或html ##1.2 html标签 ###1.21成对出现的标签标题标签<h1></h1>~<h6></h6> 段落标签<p></p> 轮播图效果<marquee behavior="altern">轮播内容</marquee> 字体规范标签<font size=30px color="blue" family="隶书">文本内容</font> 居中标签<div align="center">居中内容</div> 加粗字体<strong></strong>``` ###1.22单独出现的标签分隔线<hr/> 换行<br/>` 例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello</title>
</head>
<body>
	<h1>hello world!<br/>hello world!</h1><!--换行-->
	<h1>hello world!<hr width=60%/>hello world!</h1><!--分隔线-->
	<strong><p>I'm FXM</p></strong><!--加粗-->
	<div align="center">bilibili</div><!--居中标签-->
	<marquee behavior="altern">
	    <font size=30px color="blue">acfun</font><!--轮播图效果-->
	</marquee>
</body>
</html>

##1.3 <head>标签内容<title>网页名称</title>显示在浏览器标签栏上 ###meta标签 HTML中，meta标签没有结束标签。在XHTML中，meta需要被正确地关闭内容: 向浏览器传回一些有用的信息http-equiv="content-type" 规范文本内类型content="text/html; 字符编码，网页开发中一般用utf-8charset=UTF-8" 搜索引擎关键字name="keywords" content="搜索引擎关键字1 字2" 搜索引擎描述name="descripyion" content="描述1 描述2" 自动刷新，3：3秒，url：name="refresh" content="3;url=http://www.baidu.com" 加网页logo <link rel="icon" href="图片地址">

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html" charset="UTF-8">
	<!--http-eqiuv:设置浏览器兼容性，content:文本类型，charset:字符编码-->
	<title>哔哩哔哩动画</title><!--显示在网页标签栏-->
	<link rel="icon" href="picture.png"/>
	<!--rel:当前文档与被链接文档/资源之间的关系
	    href:图片地址-->
	<meta name="keywords" content ="动漫 二次元 bilibili"/>
	<!--设置搜索引擎关键字-->
	<meta name="desprition" content="动画动漫">
	<!--搜索引擎关键字描述-->
	<!--<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>-->
	<!--跳转到另一个网页-->
</head>
<body>
	
</body>
</html>

<DOCTYPE html>html5标记，告诉浏览器把当前文档解释为html格式 <div>容器是块级元素，显示时独占一行 <hr/>也是块级元素

<html>与</html>之间的文本描述网页 <body>与</body>之间的文本是可见的页面内容 <h>与</h>之间的文本被显示为标题 <p>与</p>之间的文本被显示为段落 ##1.4 html标记定义：html命令记为标记作用：用于控制html内容和外观分类：

双标签
单标签属性作用：修饰（颜色、对齐等） ###body标签属性： ####定义背景颜色<body bgcolor="red"> 三种颜色： 1.web颜色是十六进制RGB颜色,#FF0000 2.六位颜色,两两相邻时可以缩写为#F00 3.常量形式 red,green 设置背景颜色<body bgcolor=#F00> 图片地址 <body style="background:url(图片地址)"> 图片是否重复 <body style="background-repeat:no-repeat"> 背景图片大小<body style="background-size:100%"> text属性，改变文字颜色<body text="red">

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bilibili</title>
</head>
<body bgcolor="blue" style="background: url(picture.png);background-repeat: no-repeat;background-size: 100%" text="orange"><!--背景颜色、背景图片、图片重复、文字颜色-->
	<a href="https://www.bilibili.com/">bilibili</a><!--链接-->
	<img src="picture.png" width=50px height=50px/><!--图片-->
	<p>I'm an orange</p>
</body>
</html>

左边距leftmargin <body leftmargin=120> 上边距topmargin <body topmargin=120> 分隔线属性 <hr size=粗细 width=宽度 align=对齐方式 color=颜色/> 对齐方式可以是,left：左对齐,right:右对齐,justfy:两端对齐,center:居中 <h>属性 <h style="text-align:center">

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body leftmargin=50px topmargin=50px><!--左边距、上边距-->
	<p>hello world</p>
	<hr size="10" width="1500" align="center" color="black" /><!--分隔线标签属性-->
	<h1 style="text-align:center"> hello world  hello world  hello world  hello world</h1><!--h
属性-->
</body>
</html>

##1.5 一些特殊标签段落标签<p></p> 换行 <br/> 快捷键shift+ctrl 加粗 <b></b> 和<strong></strong> 斜体<i></i> 删除<s></s> 下标<sub></sub> 上标<sup></sup> 下划线<u></u>

1.6 路径

相对路径：根据其自身为参照点寻找其他位置 background=../1.png ../表示寻找上级文件 ../../寻找上上级文件，以此类推绝对路径：目标文件的完整路径，网页图片url https://www.baidu.com/img/bd_logo1.png

物理路径：某台计算机本地存储的路径 file:///e/1.png ##1.7 特殊符号空格 &nbsp 大于号> &gt 小于号< &lt 引号 &quot @ &copy ##1.8 插入图片 <img/>图片格式：JPG、GIF、PNG、BMP 作用：显示图片属性：src 声明图片路径 alt 图片无法显示时的替代信息 title 提示信息（光标放在图上） width：宽 height:高 align:周伟文本对齐方式（bottom默认、middle、top、left(图文)、right(文图)） hspace=像素:图片左右侧的空白 vspace=像素：图片上下的空白

##1.9标签

无序标签 <ul> 　　<li>段落1</li> 　　<li>段落2</li> </ul> 例：

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
</head>
<body>
    <h>hello html!</h>
    <p>This is a text.</p>
    <ul> <!--无序标签-->
    	<li>1.abc</li>
    	<li>2.abc</li>
    	<li>3.abc</li>
    </ul>
</body>
</html>

转载于:https://my.oschina.net/u/3272626/blog/1858528

cheyayi0378

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小白HTML——1.html基础

#HTML语言的基本规则###1.1 HTML基本结构<head>内是头部信息，不显示在网页上<body>内是网页内容<DOCTYPE>声明必须放在HTML文档第一行，不是html标签<meta http-equiv="Content-Typ...
复制链接

扫一扫