第一天
总结:
- h1-h6 p 段落 hr br
- 有序 ol li 无序 ul li 定义列表 dl dt dd
- 块级元素：独占一行，h1-h6 p hr div
- 行内元素：共占一行, em和i strong和b u del和s span
- 块级分区元素：div header nav article footer
- 行内分区元素：span
- 特殊字符： 空格： 小于号:< < 大于号:> >
- 图片
- 图片地图
细节:
文本标签:
- h1-h6 内容标题标签，内容独占一行 属性：align=left/right/center
- p 段落标签 内容独占一行
- hr 水平分割线
- br 换行
代码实现:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本标签title>
head>
<body>
<h1 align="center">我是老大h1>
<h2 align="right">我是老二h2>
<h3>我是老三h3>
<h4>我是老四h4>
<h5>我是老五h5>
<h6>我是老六h6>
<hr>
<p>我是段落标签1p>
<p>我是段落标签2p>
<p>我是段落标签3p>
开始学习HTML了<br>你开心吗?
body>
html>
列表标签:
- ul 无序列表 子标签
- ol 有序列表 属性:type=1/a/A/i/I reverserd="reverserd" start="10" 子标签
- dl 定义列表 子标签:
- 有序列表和无序列表之间可以相互嵌套
代码实现:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签title>
head>
<body>
<h3>无序列表:h3>
<ul type="square">
<li>刘备li>
<li>貂蝉li>
<li>项羽li>
<li>狄仁杰li>
<li>吕布li>
ul>
<h3>有序列表:h3>
把大象关进冰箱需要几步?
<ol reversed="reversed" start="10">
<li>打开冰箱门li>
<li>把大象装进冰箱li>
<li>关上冰箱门li>
ol>
<h3>定义列表h3>
<dl>
<dt>凉菜dt>
<dd>大拌菜dd>
<dd>花毛一体dd>
<dd>拍黄瓜dd>
<dt>炒菜dt>
<dd>宫保鸡丁dd>
<dd>木须肉dd>
<dd>小炒肉dd>
dl>
<h3>列表嵌套:h3>
<ol>
<li>ol1li>
<li>ol2
<ul>
<li>第二层1li>
<li>第二层2li>
<ol>
<li>第三层1li>
<li>第三层2li>
<li>第三层3li>
ol>
<li>第二层3li>
ul>
li>
<li>ol3li>
ol>
body>
html>
特殊字符:
- 空格:
- < :<
- > :>
代码实现:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特殊字符title>
head>
<body>
我爱 学习<br>
<我爱学习>
body>
html>
分区标签:
-
分区标签自身没有显示效果，可以充当容器的作用，用于包含多个功能相关元素，可以进行元素的整体控制。
-
div：块级分区元素，独占一行
-
span：行内分区元素，和其它行内元素共占一行
-
开发页面时通常会分为三大区
头部
体部
脚部
-
H5标准中新增的分区标签 作用和div一样 但是更直观
头部
导航
文章，正文脚部
代码实现:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块级元素和行内元素title>
head>
<body>
<h3>分区标签h3>
<div>div1div>
<div>div2div>
<div>div3div>
<span>span1span>
<span>span2span>
<span>span3span>
<h3>H5新增分区标签h3>
<header>头部区域header>
<nav>导航区域nav>
<article>正文区域article>
<footer>脚步区域footer>
body>
html>
图片img:
-
路径分为两种：
-
相对路径： 访问站内资源使用相对路径 a.图片和页面同一目录，直接写图片名称 b.图片在页面的上级目录, ../图片名 c.图片在页面的下级目录, 文件夹名/图片名
-
绝对路径： 访问其它网站的资源使用绝对路径，以http开头，存在风险，如果目标图片路径发生改变则不能显示
-
常用属性：
-
alt: 当图片不能正常显示的时候显示此内容
-
title： 当鼠标在图片上悬停的时候显示此内容
-
width/height: 设置图片的宽度和高度，可以设置像素px或百分比%，如果只设置宽度则高度等比例缩放
-
支持的图片格式： jpg/jpeg不支持透明色 png支持透明色 GIF动图
代码实现
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<img alt="这是一个美女" src="a.jpg">
<img alt="这是一片风景" title="这是标题" width="50%" src="../water.jpg">
<img alt="这是一只老虎" width="50%" src="abc/tiger.jpg">
<img src="https://goss.veer.com/creative/vcg/veer/800water/veer-152360031.jpg">
body>
html>
图片地图:
- 常用属性：
- shape： 形状，常用rect矩形 和 circle圆形
- coords：坐标 矩形四个值(x1,y1,x2,y2) 圆形三个值(x,y,半径)
- href: 值为路径，可以写相对路径和绝对路径，路径可以指向页面，也可以指向文件，如果浏览器支持打开此格式的文件则直接浏览（图片，pdf等）如果不支持打开则下载此文件
代码实现:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<img src="a.jpg" width="500px" usemap="#mymap">
<map name="mymap" id="mymap">
<area alt="文字介绍" shape="rect" coords="0,0,100,100" href="demo06.html">
<area alt="文字介绍" shape="circle" coords="200,200,100" href="../water.jpg">
map>
body>
html>
回顾练习:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回顾总结练习title>
head>
<body>
<h1>这是h1h1>
<h2>这是h2h2>
<h3>这是h3h3>
<h4>这是h4h4>
<h5>这是h5h5>
<h6>这是h6h6>
<hr>
<p>段落标签1p>
<p>段落标签2p>
<p>段落标签3p>
测试换行<br>测试换行
<h3>无序列表h3>
<ul type="circle">
<li>吃饭li>
<li>睡觉li>
<li>敲代码li>
ul>
<h3>有序列表h3>
<ol type="1" start="8" reversed="reversed">
<li>HTMLli>
<li>CSSli>
<li>JavaScriptli>
<li>JQueryli>
ol>
<h3>定义列表h3>
<dl>
<dt>歌星dt>
<dd>周杰伦dd>
<dd>刘德华dd>
<dd>张学友dd>
<dt>影星dt>
<dd>周星驰dd>
<dd>成龙dd>
<dd>李连杰dd>
dl>
<h3>列表嵌套h3>
<ul>
<li>我的订单li>
<ul>
<li>全部订单li>
<li>待付款li>
<li>待收货li>
<li>待评价li>
<li>退货退款li>
ul>
<li>我的优惠券li>
<li>收货地址li>
<ul>
<li>地址管理li>
ul>
<li>账号管理li>
<ul>
<li>我的信息li>
<li>安全管理li>
ul>
ul>
<h3>分区标签h3>
<div>div1div>
<div>div2div>
<div>div3div>
<span>span1span>
<span>span2span>
<span>span3span>
<h3>H5新增分区标签h3>
<header>头部区域header>
<nav>导航区域nav>
<article>正文区域article>
<footer>脚步区域footer>
<h3>块级元素h3>
div,h1-h6,p,hr
<h3>行内元素h3>
span,<em>斜体em> <i>斜体i>
<strong>加粗strong> <b>加粗b>
<u>下划线u>
<del>删除线del> <s>删除线s><br>
<h3>图片标签h3>
<img alt="这是图片" title="图片" width="50%" src="../water.jpg" usemap="#mymap">
<h3>图片地图h3>
<map name="mymap" id="mymap">
<area shape="rect" coords="0,0,100,100" href="http://www.baidu.com">
<area shape="circle" coords="150,50,50" href="http://www.baidu.com">
map>
body>
html>