从0开始接触html--第一天学习内容总结
程序员文章站
2022-04-30 23:42:14
第一天 总结: 细节: 文本标签: 代码实现: 列表标签: 代码实现: 特殊字符: 代码实现: 分区标签: 分区标签自身没有显示效果,可以充当容器的作用,用于包含多个功能相关元素,可以进行元素的整体控制。 div:块级分区元素,独占一行 span:行内分区元素,和其它行内元素共占一行 开发页面时通常 ......
第一天
总结:
- 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
- 特殊字符: 空格:  小于号:< < 大于号:> >
- 图片 <img alt="图片不能正常显示的时候显示此内容" src="路径" width/height="100px / 50%" title="鼠标悬停时显示的内容">
- 图片地图
细节:
文本标签:
- h1-h6 内容标题标签,内容独占一行 属性:align=left/right/center
- p 段落标签 内容独占一行
- hr 水平分割线
- br 换行
代码实现:
<!-- 文档声明,告诉浏览器使用哪个版本的标准解析此页面, 此写法是最高版本h5的写法 --> <!doctype html> <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>我是段落标签1</p> <p>我是段落标签2</p> <p>我是段落标签3</p> 开始学习html了<br>你开心吗? </body> </html>
列表标签:
- ul 无序列表 子标签<li></li>
- ol 有序列表 属性:type=1/a/a/i/i reverserd="reverserd" start="10" 子标签<li></li>
- dl 定义列表 子标签:<dt></dt> <dd></dd>
- 有序列表和无序列表之间可以相互嵌套
代码实现:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>列表标签</title> </head> <body> <h3>无序列表:</h3> <ul type="square"><!-- type="square/circle/disc"前面的小标记样式 --> <li>刘备</li> <li>貂蝉</li> <li>项羽</li> <li>狄仁杰</li> <li>吕布</li> </ul> <h3>有序列表:</h3> 把大象关进冰箱需要几步? <ol reversed="reversed" start="10"><!-- 从10开始倒序 --> <li>打开冰箱门</li> <li>把大象装进冰箱</li> <li>关上冰箱门</li> </ol> <h3>定义列表</h3> <dl><!-- defined定义 list列表 --> <dt>凉菜</dt><!-- defined title标题 --> <dd>大拌菜</dd><!-- defined data数据 --> <dd>花毛一体</dd> <dd>拍黄瓜</dd> <dt>炒菜</dt> <dd>宫保鸡丁</dd> <dd>木须肉</dd> <dd>小炒肉</dd> </dl> <h3>列表嵌套:</h3><!-- 嵌套有两种方式 --> <ol> <li>ol1</li> <li>ol2 <!-- 1.嵌套在<li></li>里面 --> <ul> <li>第二层1</li> <li>第二层2</li> <!-- 2.嵌套在<li></li>下面 --> <ol> <li>第三层1</li> <li>第三层2</li> <li>第三层3</li> </ol> <li>第二层3</li> </ul> </li> <li>ol3</li> </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>div1</div> <div>div2</div> <div>div3</div> <span>span1</span> <span>span2</span> <span>span3</span> <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 here</title> </head> <body> <!-- 当图片不能正常显示的时候显示此内容 --> <!-- 图片路径 1.相对路径:显示站内资源使用相对路径 a.图片和页面同一目录,直接写图片名称 a.jpg b.图片在页面的上级目录, ../water.jpg(上两级../../xxx) c.图片在页面的下级目录, abc/tiger.jpg 2.绝对路径:通常以http开头,访问站外资源使用绝对路径, 访问站外资源也称为图片盗链 目标图片路径发生改变,则不能正常显示 --> <!-- 支持的图片格式:jpg/jpeg不支持透明色 png支持透明色 gif动图 --> <!-- title:鼠标悬停时显示的内容 --> <!-- width/height 值为像素px或百分比, 如果只设置宽,则高度会等比缩放 --> <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 here</title> </head> <body> <img src="a.jpg" width="500px" usemap="#mymap"> <!-- 图像地图标签 --> <map name="mymap" id="mymap"> <!-- area:区域 shape:形状 rect:矩形 coords:坐标 对角线两个点的坐标(x1,xy1,x2,y2) --> <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>这是h1</h1> <h2>这是h2</h2> <h3>这是h3</h3> <h4>这是h4</h4> <h5>这是h5</h5> <h6>这是h6</h6> <hr><!-- 水平分割线 --> <p>段落标签1</p> <p>段落标签2</p> <p>段落标签3</p> 测试换行<br>测试换行 <h3>无序列表</h3> <ul type="circle"> <li>吃饭</li> <li>睡觉</li> <li>敲代码</li> </ul> <h3>有序列表</h3> <ol type="1" start="8" reversed="reversed"> <li>html</li> <li>css</li> <li>javascript</li> <li>jquery</li> </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>div1</div> <div>div2</div> <div>div3</div> <span>span1</span> <span>span2</span> <span>span3</span> <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>
下一篇: CDR简单绘制扑克牌四个花色