前端自学之HTML（02）

HTML自学笔记02（接着上一篇）

超链接a

分为：文字超链接、图片超链接和导航栏
代码

<a href="网址">文字或图片</a>
连接到本站点其他网页
<a href="news.html">新闻</a>
连接到其他站点
<a href="https://www.baidu.com/">百度</a>
虚拟超链接
<a href="#">板块</a>

效果

插入图像img

拓展：
JPG：有损压缩，色彩丰富图片，打开快，且对原图质量影响小。
GIF：简单动画，背景透明。
PNG：无损压缩，透明、交错、动画。
代码

<img src="Pictures\mypic.jpg" alt="图片" />

解释
src属性：路径+文件名（运用到绝对路径和相对路径的知识）
alt属性：在图片无法显示的情况下显示的文字
效果
（即将图片插入进来，在此就不截图了）

区域div

用途：页面的一个组成部分、一个栏目板块即可设为一个区域，结合CSS样式对不同区域进行单独的排版设计。
代码：

<div align="center"><h1>web前端开发</h1><p>HTML</p><p>CSS</p><p>JavaScript</p>
</div>

说明：align属性：对齐方式；center：居中对齐。
效果：

无序列表 ul li

用途：文字超链接组合、图片超链接组合、导航栏等
代码：

<h1>web前端开发</h1>
<ul><li>HTML</li><li>CSS</li><li>JS</li>
</ul>

说明：ul：列表项；li：标签对。假如超链接标签可以点击（同样适用下面的有序列表）
效果：

有序列表 ol li

用途：排行榜等
代码：

<h2>web前端开发</h2>
<ol><li>HTML</li><li>CSS</li><li>JS</li>
</ol>

效果：

表格 table tr td

代码：

<table border="2"><tr><th>学号</th><th>姓名</th><th>班级</th></tr><tr><th>001</th><td>小明</td><td>5班</td></tr><tr><th>002</th><td>小红</td><td>2班</td></tr>
</table>

说明：table：表格；tr：行标签；th：表头单元格（字加粗）；td：单元格；border属性：设置边框。
效果：

示例

代码：

<div id="top" align="center"><table border="2"><tr><th><h1>Top Language</h1></th></tr><tr><td><ol><li><a href="#">Java</a></li><li><a href="#">Pathon</a></li><li><a href="#">C</a></li><li><a href="#">Go</a></li><li><a href="#">PHP</a></li></ol></td></tr></table>
</div>

效果：

前端自学之HTML（02）相关推荐

前端自学资料汇总001
前端自学资料汇总001 主要来自github,bili,博客园,掘金 Github学习资料 bilibili 掘金其他实战项目主要来自github,bili,博客园,掘金欢迎给作者star 和 ...
为什么大家都觉得前端自学比培训好？
「这个是仁者见仁,智者见智的问题了.一般情况下说这些话的人不是自控能力超强,就是自学能力强,或是有一定的底子.」觉得自学比培训好的原因而大家觉得自学前端比培训好是主要原因有以下几点: 01前端入门 ...
【干货】前端自学之路（持续更新)
前言:将我有过了解前端自学网站和书本分享给大家,互联网是个好东西,多多利用:希望能给大家提供一点帮助作为我对大家七夕的祝福,好好学习,天天向上.共勉,哈哈. mooc网站(看视频) 慕课网:http: ...
前端自学日记-day5
前端自学日记 day5 内容总结:学习了代码快速编写方法和一些小工具,CSS复合选择器,CSS元素显示模式,CSS背景. 1.学习进度更新 2.具体内容 2.1 Emmet简介作用:使用缩写tab输 ...
B站Up主-山地人-这位老哥2019年的前端自学计划进展如何？——讲一个B站Up主自学前端85天的故事...
前言自从上次在掘金发布[2019年山地人的前端完整自学计划--讲一个B站UP主山地人的40天前端自学故事] 以来,一眨眼山地人老哥在B站做Up主已经有85天了. 时隔一个半月,这位山地人老哥现在究竟 ...
前端自学HTML笔记之二【超链接】
我已加入 1_bit 博主的免费前端站起来学习计划,专栏链接:https://blog.csdn.net/a757291228/category_11609526.html 前端自学HTML笔记二 ...
一个「学渣」从零开始的Web前端自学之路
从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的"丰富". 最后的机缘巧合下,走上了前端开发之路,作为 ...
前端自学日记-day3
前端自学日记 day3 内容总结:学习了表格标签,列表标签,表单标签. 1.学习进度更新 2.具体内容常用标签 2.1 表格标签 2.1.1 作用表格标签是用来在页面中展示数据的. 2.1.2 标 ...
web前端自学学习方法分享
web前端自学学习方法分享 1.web前端自学学习误区总结在分享给大家入门前端的学习方法之前,我们先来看看一些新手常犯的学习误区,大家可以引以为戒.比如盲目看太多书或各种学习视频,这样会迷失学习的方 ...
我的web前端自学之路-心得篇：我为什么要学习web前端？
时光如流水,转眼间,自己已经是大三的学长了,看着一个个学弟学妹,心中有种莫名的感觉,很怀念大学的前两年时光,但也很憧憬着自己的未来,自己将要去经历很多从未经历的事.我是我们学校信科院的一名学生,在编程 ...

前端自学之HTML（02）

HTML自学笔记02（接着上一篇）

前端自学之HTML（02）相关推荐

最新文章

热门文章