怎么建公司网站教程,郑州自助建站模板,专业烟台房产网站建设,网站建设相关文献目录 1.格式化标签
2.图片标签: img
3.超链接标签: a
4.综合案例: 展示博客2
5.表格标签
5.1基本使用
5.2合并单元格
6.列表标签 1.格式化标签 加粗#xff1a;strong标签和b标签 倾斜#xff1a;em标签和i标签 删除线#xff1a;del标签和s标签 下划线#xff1a;i…目录 1.格式化标签
2.图片标签: img
3.超链接标签: a
4.综合案例: 展示博客2
5.表格标签
5.1基本使用
5.2合并单元格
6.列表标签 1.格式化标签 加粗strong标签和b标签 倾斜em标签和i标签 删除线del标签和s标签 下划线ins标签和u标签 strongstrong加粗标签/strongss加粗标签/semem倾斜标签/emii倾斜标签/ideldel删除标签/delss删除标签/sinsins下划线标签/insuu下划线标签/u 2.图片标签: img
img 标签必须带有 src 属性. 表示图片的路径.
img srcrose.jpg
此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中. img 标签的其他属性 alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字. title: 提示文本. 鼠标放到图片上, 就会有提示. width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡. border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定. img srcrose.jpg alt鲜花 title这是一朵鲜花 width500px height500px border5px 注意: 1. 属性可以有多个, 不能写到标签之前 2. 属性之间用空格分割, 可以是多个空格, 也可以是换行. 3. 属性之间不分先后顺序 4. 属性使用 键值对 的格式来表示. 3.超链接标签: a
href: 必须具备, 表示点击后会跳转到哪个页面. target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
a hrefhttp://www.baidu.com 百度/a
链接的几种形式:外部链接: href 引用其他网站的地址
内部链接: 网站内部页面之间的链接. 写相对路径即可.
空链接: 使用 # 在 href 中占位.
a hreftest.zip下载文件/a
网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
a hrefhttp://www.sogou.comimg srcrose.jpg alt
/a
锚点链接: 可以快速定位到页面中的某个位置.
a href#one第一集/a
a href#two第二集/a
a href#three第三集/a
p idone第一集剧情 br第一集剧情 br...
/p
p idtwo第二集剧情 br第二集剧情 br
...
/p
p idthree第三集剧情 br第三集剧情 br
...
/p
4.综合案例: 展示博客2
预期效果: 在上个博客页面的案例基础上, 加上图片和超链接 参考代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1meta nameviewport contentwidthdevice-width,initial-scale1.0 解释/h1h4蒂其之死/h4p简单来说 meta nameviewport contentwidthdevice-width,initial-scale1.0 解释/ppcontent属性值 :br/width:可视区域的宽度值可为数字或关键词device-widthbr/height:同widthbr/intial-scale:页面首次被显示是可视区域的缩放级别取值1.0则页面按实际尺寸显示无任何缩放br/maximum-scale1.0, minimum-scale1.0;可视区域的缩放级别br/maximum-scale用户可将页面放大的程序1.0将禁止用户放大到实际尺寸之上。br/user-scalable:是否可对页面进行缩放no 禁止缩放br//pp复杂的说br/移动前端开发之viewport的深入理解br/在移动设备上进行网页的重构或开发首先得搞明白的就是移动设备上的viewport了只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。br//ph3一、viewport的概念/h3p通俗的讲移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域在具体一点就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域但viewport又不局限于浏览器可视区域的大小它可能br/比浏览器的可视区域要大也可能比浏览器的可视区域要小。在默认情况下一般来讲移动设备上的viewport都是要大于浏览器可视区域的这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小所以为了能在移动设备上正常显示那br/些传统的为桌面浏览器设计的网站移动设备上的浏览器都会把自己默认的viewport设为980px或1024px也可能是其它值这个是由设备自己决定的但带来的后果就是浏览器会出现横向滚动条因为浏览器可视区域的宽度是比这个默认的br/viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。/pimg src1.png alt图片h3二、css中的1px并不等于设备的1px/h3p在css中我们一般使用px作为单位在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素这可能会造成我们的一个错觉那就是css中的像素就是设备的物理像素。但实际情况却并非如此css中的像素只是一个抽象的单位br/在不同的设备或不同的环境中css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中我们无需对这个津津计较但在移动设备上必须弄明白这点。在早先的移动设备中屏幕像素密度都比较低如iphone3它的分br/辨率为320x480在iphone3上一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展移动设备的屏幕像素密度越来越高从iphone4开始苹果公司便推出了所谓的Retina屏分辨率提高了一倍变成640x960但屏幕尺br/寸却没变化这就意味着同样大小的屏幕上像素却多了一倍这时一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级分辨率也是五br/花八门安卓设备上的一个css像素相当于多少个屏幕物理像素也因设备的不同而不同没有一个定论。/pa hrefhttp://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.htmlstrong这是一篇文章/strong/aimg src2.png alt图片
/body
/html
提示: 可以从页面上右键图片, 下载图片到本地. 可以从页面上右键链接, 复制链接, 粘贴到代码中.
5.表格标签
5.1基本使用 table 标签: 表示整个表格 tr: 表示表格的一行 td: 表示一个单元格 th: 表示表头单元格. 会居中加粗 thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的) tbody: 表格得到主体区域. table 包含 tr , tr 包含 td 或者 th.
表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置. 这些属性都要放到 table 标签中. align 是表格相对于周围元素的对齐方式. aligncenter (不是内部元素的对齐方式) border 表示边框. 1 表示有边框(数字越大, 边框越粗), 表示没边框. cellpadding: 内容距离边框的距离, 默认 1 像素 cellspacing: 单元格之间的距离. 默认为 2 像素 width / height: 设置尺寸. 注意, 这几个属性, vscode 都提示不出来.
table aligncenter border1 cellspacing0 cellpadding20 width500 height500trtd姓名/tdtd性别/tdtd年龄/td/trtrtd张三/tdtd男/tdtd20/td/trtrtd李四/tdtd男/tdtd18/td/tr/table
效果展示 5.2合并单元格
跨行合并: rowspann 跨列合并: colspann
步骤 1. 先确定跨行还是跨列 2. 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格) 3. 删除的多余的单元格
table aligncenter border1 cellspacing0 cellpadding20 width500 height500trtd姓名/tdtd性别/tdtd年龄/td/trtrtd张三/tdtd colspan2男/td/trtrtd李四/tdtd男/tdtd18/td/tr/table
效果展示 6.列表标签 主要使用来布局的. 整齐好看. 无序列表 ul li 有序列表 ol li 自定义列表 dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕 着标题来展开的. 注意 元素之间是并列关系 ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd li 中可以放其他标签. 列表带有自己的样式, 可以使用 CSS 来修改. (例如前面的小圆点都会去掉) bodyh3无序列表/h3ulli关羽/lili花木兰/lili老夫子/li/ulh3有序列表/h3olli亚联/lili马超/lili张飞/li/olh3自定义列表/h3dldt法师/dtdd小乔/dddd王昭君/dddd安琪拉/dd/dl
/body
效果展示
