商业网站缩写,大有网网站,企业公司网站模板,微信带颜色的公众号第一天
总结:
h1-h6 p 段落 hr br有序 ol li 无序 ul li 定义列表 dl dt dd块级元素#xff1a;独占一行#xff0c;h1-h6 p hr div行内元素#xff1a;共占一行, em和i strong和b u del和s span块级分区元素#xff1a;div header nav article footer行内分区元素#…第一天
总结:
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特殊字符 空格nbsp 小于号: lt 大于号: gt图片 img alt图片不能正常显示的时候显示此内容 src路径 width/height100px / 50% title鼠标悬停时显示的内容图片地图
细节:
文本标签:
h1-h6 内容标题标签内容独占一行 属性alignleft/right/centerp 段落标签 内容独占一行hr 水平分割线br 换行
代码实现: !-- 文档声明,告诉浏览器使用哪个版本的标准解析此页面,
此写法是最高版本h5的写法 --
!DOCTYPE html
html!-- 除了声明所有的标签都在html标签内部 --head!-- 头:里面的内容是给浏览器看的 --!-- 告诉浏览器页面的字符集 --meta charsetUTF-8!-- 页面标题,显示在浏览器的选项卡中 --title文本标签/title/headbody!-- 体:里面的内容是给用户看的 --h1 aligncenter我是老大/h1h2 alignright我是老二/h2h3我是老三/h3h4我是老四/h4h5我是老五/h5h6我是老六/h6hrp我是段落标签1/pp我是段落标签2/pp我是段落标签3/p开始学习HTML了br你开心吗?/body
/html 列表标签:
ul 无序列表 子标签li/liol 有序列表 属性:type1/a/A/i/I reverserdreverserd start10 子标签li/lidl 定义列表 子标签:dt/dt dd/dd有序列表和无序列表之间可以相互嵌套
代码实现: !DOCTYPE html
html
head
meta charsetUTF-8
title列表标签/title
/head
bodyh3无序列表:/h3ul typesquare!-- typesquare/circle/disc前面的小标记样式 --li刘备/lili貂蝉/lili项羽/lili狄仁杰/lili吕布/li/ulh3有序列表:/h3把大象关进冰箱需要几步?ol reversedreversed start10!-- 从10开始倒序 --li打开冰箱门/lili把大象装进冰箱/lili关上冰箱门/li/olh3定义列表/h3dl!-- defined定义 list列表 --dt凉菜/dt!-- defined title标题 --dd大拌菜/dd!-- defined data数据 --dd花毛一体/dddd拍黄瓜/dddt炒菜/dtdd宫保鸡丁/dddd木须肉/dddd小炒肉/dd/dlh3列表嵌套:/h3!-- 嵌套有两种方式 --olliol1/liliol2!-- 1.嵌套在li/li里面 --ulli第二层1/lili第二层2/li!-- 2.嵌套在li/li下面 --olli第三层1/lili第三层2/lili第三层3/li/olli第二层3/li/ul/liliol3/li/ol
/body
/html 特殊字符:
空格:nbsp; :lt; :gt;
代码实现: !DOCTYPE html
html
head
meta charsetUTF-8
title特殊字符/title
/head
body
我爱nbsp;nbsp;nbsp;nbsp;nbsp;学习br
lt;我爱学习gt;
/body
/html 分区标签: 分区标签自身没有显示效果可以充当容器的作用用于包含多个功能相关元素可以进行元素的整体控制。 div块级分区元素独占一行 span行内分区元素和其它行内元素共占一行 开发页面时通常会分为三大区 头部 体部 脚部 H5标准中新增的分区标签 作用和div一样 但是更直观 头部 导航 文章正文脚部
代码实现: !DOCTYPE html
html
head
meta charsetUTF-8
title块级元素和行内元素/title
/head
body
h3分区标签/h3divdiv1/divdivdiv2/divdivdiv3/divspanspan1/spanspanspan2/spanspanspan3/spanh3H5新增分区标签/h3header头部区域/headernav导航区域/navarticle正文区域/articlefooter脚步区域/footer
/body
/html 图片img: 路径分为两种 相对路径 访问站内资源使用相对路径 a.图片和页面同一目录直接写图片名称 b.图片在页面的上级目录, ../图片名 c.图片在页面的下级目录, 文件夹名/图片名 绝对路径 访问其它网站的资源使用绝对路径以http开头存在风险如果目标图片路径发生改变则不能显示 常用属性 alt: 当图片不能正常显示的时候显示此内容 title 当鼠标在图片上悬停的时候显示此内容 width/height: 设置图片的宽度和高度可以设置像素px或百分比%如果只设置宽度则高度等比例缩放 支持的图片格式 jpg/jpeg不支持透明色 png支持透明色 GIF动图
代码实现 !DOCTYPE html
html
head
meta charsetUTF-8
titleInsert title here/title
/head
body
!-- 当图片不能正常显示的时候显示此内容 --
!-- 图片路径
1.相对路径:显示站内资源使用相对路径a.图片和页面同一目录,直接写图片名称 a.jpgb.图片在页面的上级目录, ../water.jpg(上两级../../xxx)c.图片在页面的下级目录, abc/tiger.jpg
2.绝对路径:通常以http开头,访问站外资源使用绝对路径,访问站外资源也称为图片盗链目标图片路径发生改变,则不能正常显示--!-- 支持的图片格式:jpg/jpeg不支持透明色 png支持透明色 gif动图 --!-- title:鼠标悬停时显示的内容 --!-- width/height 值为像素px或百分比,如果只设置宽,则高度会等比缩放 --
img alt这是一个美女 srca.jpg
img alt这是一片风景 title这是标题 width50% src../water.jpg
img alt这是一只老虎 width50% srcabc/tiger.jpg
img srchttps://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 charsetUTF-8
titleInsert title here/title
/head
body
img srca.jpg width500px usemap#mymap
!-- 图像地图标签 --
map namemymap idmymap
!-- area:区域 shape:形状 rect:矩形 coords:坐标对角线两个点的坐标(x1,xy1,x2,y2) --
area alt文字介绍 shaperect coords0,0,100,100 hrefdemo06.html
area alt文字介绍 shapecircle coords200,200,100 href../water.jpg
/map
/body
/html 回顾练习: !DOCTYPE html
html
head
meta charsetUTF-8
title回顾总结练习/title
/head
bodyh1这是h1/h1h2这是h2/h2h3这是h3/h3h4这是h4/h4h5这是h5/h5h6这是h6/h6hr!-- 水平分割线 -- p段落标签1/pp段落标签2/pp段落标签3/p测试换行br测试换行 h3无序列表/h3ul typecircleli吃饭/lili睡觉/lili敲代码/li/ulh3有序列表/h3ol type1 start8 reversedreversedliHTML/liliCSS/liliJavaScript/liliJQuery/li/olh3定义列表/h3dldt歌星/dtdd周杰伦/dddd刘德华/dddd张学友/dddt影星/dtdd周星驰/dddd成龙/dddd李连杰/dd/dlh3列表嵌套/h3ulli我的订单/liulli全部订单/lili待付款/lili待收货/lili待评价/lili退货退款/li/ulli我的优惠券/lili收货地址/liulli地址管理/li/ulli账号管理/liulli我的信息/lili安全管理/li/ul/ulh3分区标签/h3divdiv1/divdivdiv2/divdivdiv3/divspanspan1/spanspanspan2/spanspanspan3/spanh3H5新增分区标签/h3header头部区域/headernav导航区域/navarticle正文区域/articlefooter脚步区域/footerh3块级元素/h3div,h1-h6,p,hrh3行内元素/h3span,em斜体/em i斜体/istrong加粗/strong b加粗/bu下划线/udel删除线/del s删除线/sbrh3图片标签/h3img alt这是图片 title图片 width50% src../water.jpg usemap#mymaph3图片地图/h3map namemymap idmymaparea shaperect coords0,0,100,100 hrefhttp://www.baidu.comarea shapecircle coords150,50,50 hrefhttp://www.baidu.com/map/body
/html 本文转载于:猿2048https://www.mk2048.com/blog/blog.php?idhii0i0jtitle从0开始接触html--第一天学习内容总结
