<!DOCTYPE GTML>
<html>
<head>
<meta charset="utf-8">
<title>Hello Word</title>
</head>
<body>
<img src="bccd.jpg" width="400" height="400">
</body>
</html>
运行结果:
一 .文档结构
1.文档类型 标准的HTML文档的起始元素为指定文档类型的标记<!DOCTYPE HTML>
2.根元素
HTML的根元素是<html>标记,所有的HTML文件都是以<html>开头,</html>结束
3.头元素
<head>标记 用于存放HTML文档信息,在<head>标记中,可以使用<title>标记来指定文档的标题,也可以使用<meta>标记来指定字符的编码
<meta charset="utf-8">
4 主体元素
HTML 页面的主题元素为<body>标记
<body>
</body>
二.HTMl文字排版标记
1.文字与特殊符号 在HTML文档中,要显示普通文字,只需要在<`body`>主题标记中或者其他子标记中,直接输入所需文字就可以了,对于 其他符号就需要以 & 符号开头,以 ; 符号结束
eg
Test © 2018测试HTML特殊符号
三个空格
结果展示:
Test © 2018测试HTML特殊符号
三个空格
2.段落标记<p></p>
段落标记以<p>标记开头以</p>结束
段落标记在段前和段后各添加一个空行
3 换行标记<br>
段落标记是各行换行,换行标记不用隔行
4 标题标记<h*></h*>
html 设置了6个标题标记,分别为<h1> 到 <h6>,数字越小,级别越高,字体越大
eg
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4 align="left">四级标题 左对齐</h4>
<h5 align="center">五级标题 居中<h5>
<h6 align="right">六级标题 右对齐</h6>
结果展示
一级标题
二级标题
三级标题
四级标题 左对齐
五级标题 居中
六级标题 右对齐
5 文字列表标记
文字列表标记可以将文字以列表的形式依次排列.
•无序列表 <ul> <li>
在列表的每一项之前加一个圆点符,通过<ul>标记可以创建一组无序列表,其中每一个列表项以<li>标记
•有序列表 <ol><li>
有序列表可以将列表项进行排号,有序列表的标记为<ol>,每一个列表项前用<li>标记.有序列表项有一定顺序.
三 图片与超链接标记
1.图片标记 使用` <img src="uri" width="value" height="value" border="value" alt="我是一个图片"></img>
结果展示
-
属性说明
- src 用于指定图片来源
- width 宽度
- height 高度
- border 图片的边框宽度 默认为0
- alt 图片无法显示时,显示的文字
2 超链接
URL Uniform Resource Location 统一资源定位符
使用<a>来定义超链接 超链接的定义如下
<a href="url" hreflang="language" name="bookmarkName" type="mimeType" charset="code" shape="area" coords="coordinate" target="target" tabindex="value" accesskey="key">
LinkContent
</a>
- herf 指定超连接地址(可以是绝对路径,包括适用的协议,如 http/ftp等),也可以是相对路径,(属于同一网站之下,可以在不同的目录)
- hreflang 用于指定超链接位置所用的语言
- name 用于指定超连接的标识名
- type 用于指定超链接位置所使用的MIME类型
- charset 用于指定超链接位置所使用的编码方式
- target 用于指定超链接的目标窗口
- tabindex 用于指定按下tab键时的顺序
- linkcontent 超链接的内容 文字或者图片
- accesskey 为超链接设置快捷键
eg
<a hred="https://blog.csdn.net/Good_StudyDaydayUp"> 好好学习天天向上</a>
结果展示:
好好学习天天向上
HTML5 新增的语义元素
在HTML5中,为了使文档的结构更加清晰,追加列几个与眉页.页脚,内容区块等文档结构相关联的语义元素<header>元素
<header>元素表示页面中一个内容区域或者整个页面的标题,
eg 应用<header>元素定义页面中的页眉,包括网站的logo和标题
<header>
<img src="mrlogo.jpg" alt="图片">
<h1>header中的h1元素 </h1>
</header>
运行:
header中的h1元素
2<footer> 元素
<footer> 整个页面或者内容区域块的脚注(日期,作者,相关文档链接,授权)
<footer>
<ul>
<li>footer 元素用于写脚注,一般防御最底部</li>
<li>
版权信息
</li>
</ul>
</footer>
结果
- footer 元素用于写脚注,一般防御最底部
- 版权信息
<section>
<h2>section的使用</h2>
<p>
这里添加一个新的段落.放置于section中显示
</p>
<footer>2018-12-11</footer>
</section>
结果展示:
section的使用
这里添加一个新的段落.放置于section中显示
<aside>
附属信息
引用,侧边栏,广告,导航等
<nav>
页面中导航链接区域