一:html的初始代码
<!DOCTYPE html>:声明html文档
<html lang="en">
<head> :为头部,html的开始点,可以写标题
<meta charset="UTF-8">:为字符集,设置编码格式,utf-8,为中文的编码格式
<title>标题</title>:可以设置标题名称,可以在网页显示
</head>
<bead>:为主体,html内编写代码的位置
</bead>
</html>
总结:head头部内的的基本标签,如下:
title:定义网页的标题(唯一)
meta:定义网页的基本信息(供搜索引擎抓取)
link:导入外部css文件
script:定义js的脚本语言
style:定义css的样式
二:html的常用基本标签
标题标签:<h1></h1> —<h6></h6>,字体由大到小(h1-h6)
段落标签:<p></p>,可以使用在字体段落,自带换行属于块级元素
水平线标签:<hr/>,设置区分块区域,水平线标签可以添加样式:如,颜色,长度,宽度。。。
换行标签:<br/>,强制换行标签
无语意标签:<div></div>,<span></span>,没有任何语意,不会对文本有任何修饰
直接设置字体标签:<font></font>,可以在标签内添加颜色color,大小size, 字体face=“什么什么字体”
总结:
块级元素:独占一行,且自动换行
如:<h1>--<h6>,<p>,<div>
行内元素:不会自动换行
如:<span>...
三:html元素
html元素指的是从开始标签到结束标签的所有代码。、
开始标签 元素内容 结束标签
<p> 这是一段内容 </p>
<br/>
1,html元素以开始标签起始,以结束标签终止
2,元素的内容是开始标签与结束标签之间的内容
3,某些html元素具有“空内容”(empty content),空元素在开始标签中进行关闭(以开始标签的结束而结束),如:<br/>
4,大多数html元素可拥有属性
四:html属性与值
1,属性是html元素提供的附加信息:
2,属性一般描述于“开始标签”
3,属性总是以名称/值的形式出现
4,属性值应该始终被包括在引号内:
如:<标签名 属性名=“值”></标签名>
5.属性:
class:为html元素定义一个或多个类名
id:定义元素的唯一id,(唯一名称)
style:规定元素的行内样式(inline style)
title:描述元素的额外信息
五:html常用的引用输出标签
<code></code>:自动定义计算机代码,字体比正常文字小而细,为计算机语言代码
<pre></pre>:能识别预定的空格和换行(已经存在的换行或空格,会自动识别,不会忽略)
<address></address>:定义地址(与<i>,<em>字体样式一样自动为斜体)
<q></q>:定义短句的引号(双引号)
<bdo dir="ltr"></bdo>:定义文字的方向(ltr:为正方向,rtl:为反方向)
六:html的图片标签
<img src="../img/4.jpg.jpeg" alt="图-10" title="这是图像的名称" width=“100” height=“100”/>
<img src=""/>是图片的标签;
图片标签的属性与值:
<alt=" ">:里面写图片的命名,当网页上面图片无法加载时显示图片的名称
<title=" ">:标题,鼠标箭头放在图片上时,显示出来的文字
<width=" ">:宽度,设置图片的宽度值
<height=" ">:高度,设置图片的高度值
总结:
图片标签:<img src=" "/>
绝对路径:带有盘符的文件路径 如:D:\***\.jpg
相对路径:(相对于文件的位置)3种路径规则
1,图片和网页在同一级目录下 src=" "文件名
2,图片在网页的下一级 src=" "目录名称/文件名
3,图片在文件的下一级 src=" .../文件名"
七:html的注释
语法:<!--内部为注释文字-->
八:html语义化
语义化:
明白每个标签的用途(在什么情况下使用此标签合理),比如网页上文章的标题,就可以用标题标签:<hn></hn> (n为1-6)
好处:
1,更容易被搜索引擎收录
2,更容易让屏幕阅读器读出网页内容
总结
1,标签的语法:<标签名></标签名>
2,基础标签:<hn><hn>,<p></p>,<br/>,<hr/><span></span>,<div></div>
3,html元素:开始标签到结束标签的所有代码
4,html属性与值:元素的附加信息
5,html注释:<!--注释文字-->
6,html语义化:语义=语意,语义标签定义了元素内容的含义