HTML概述
html是什么
超文本标记语言
标记语言 标签 用标签来标注网页内容 浏览器在运行网页时可以根据标注来显示
我的第一张
<b>网页
</b>
html做什么
制作网页
HTML基本语法
开发工具
HBuilder X
基本结构
<html>
<head>
<meta charset="utf-8" />
<link href="img/baidu.ico" rel="icon"/>
<title>百度百科
</title>
</head>
<boday>
</boday>
属性语法
属性格式:属性名=“属性值”
位置:写在开始标签
数量:多个
基本标签
标签分类
<开始>修饰内容<结束>-闭合标签 双标签
例:
<b>搜索一下，你就知道
</b>
<标签> -自闭合标签
例:<link href="img/baidu.ico rel="icon"/>
标题标签
<h1>...
<h6> 标题大小不同
<h1 align="center">惊现!
</h1>
<h2 align="center">惊现!
</h2>
<h3 align="center">酱酱!
</h3>
align="center"作用:居中
段落标签
<p> 段落表示
<p align="center">
标题段落里多个空格 浏览器只识别一个段落与段落之间有间隔段落里多个空格 浏览器只识别一个段落里多个空格 浏览器只识别一个
段落与段落之间有间隔 段落与段落之间有间隔
</p>
<br> 另起一行
<hr> 下划线
特殊标识符
特殊符号标识
空格
< 小于号
> 大于号
® 商标
© 版权
< > ® ©
列表
有序列表
<ol>有序列表
</ol>
<li>有序列表
<li>
例:
<ol type="I">
<li>张三
</li>
<li>李四
</li>
<li>王五
</li>
</ol>
type 表示序号类型
无序列表
<ul>无序
</ul>
<li>无序
</li>
例:
<ul type="square">
<li>张三
</li>
<li>李四
</li>
<li>王五
</li>
</ul>
图像标签
<img src="地址" alt="当图像加载不出来时会出现的文字" title="当鼠标移到这图片上时,出现的文字">
例:
<img src="img/libai.jpg" alt="其实这是李白"
title=" 哈哈哈哈哈啊哈哈 被骗了"/ >
超链接
<a href="所连接的网页地址" target="窗口打开类型"></a>
<a href="index.html" target="_blank">王一博
</a>
将图片加入超链接
<a href="index.html" target="_blank">
<img src="img/libai.jpg" alt="其实这是李白" title=" 哈哈哈哈哈啊哈哈 被骗了"/ >
</a>
综合练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body align="center">
<h1>古诗词鉴赏
</h1>
<hr/>
<h3>静夜思
</h3>
李白
<p>床前明月光，
<br/>疑是地上霜。
<br/>举头望明月，
<br/>低头思故乡。
</p>
<p>《静夜思》是唐代诗人李白所作的一首无言古诗。
<br/>此诗描写了秋日夜晚,诗人于屋内抬头望月的所感。
<br/>诗中运用比喻衬托的手法,表达客居思乡之情,
<br/>语言清新朴素而韵味含蕴无穷,历来广为传颂。
</p>
<img src="../img/libai.jpg"/>
<hr/>
<p>友情链接:
<a href="https//www.baidu.com" target="_blank">A网站
</a>
<a href="https//www.baidu.com" target="_blank">|B网站
</a>
<a href="https//www.baidu.com" target="_blank">|C网站
</a>
</p>
</body>
</html>
