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

原创
2018/07/18 08:56
阅读数 56

#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>
展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部