学习目标:
学习掌握web前端开发学习内容:
- 掌握行级标签
- 掌握列表标签
- 掌握图片标签
- 掌握超链接标签
- 掌握表格标签
学习时间:
2020年12月27日学习产出:
1、 技术笔记 1遍 2、CSDN 技术博客 1篇 3、 网页制作作业两份课堂笔记
行级、列表、图片以及超链接标签
<!--
<!DOCTYPE html> 声明此html版本为html5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> html4的声明格式
-->
<!DOCTYPE html>
<html>
<!--
head头部标签:声明网站的标题以及元数据 所有的元数据都是以meta标签开头的
-->
<head>
<!-- 处理网页的乱码问题:设置统一的编码格式 -->
<meta charset="utf-8">
<!-- 设置网站的标题 -->
<title>这是我的第一个网页</title>
<style type="text/css">
/* li列表统一设置为蓝色背景色 */
li{
background: deepskyblue;
}
</style>
</head>
<body>
<!-- 锚点,name为名字,下次可以跳转到这个名字,href为超链接,本语句中跳转到锚点botton -->
<a name="top" href="#botton">回到底部</a><br>
<!-- 在html当中标签是可以嵌套标签的 -->
<!--
1,行级标签:默认会占用一行
-->
<!-- 标题标签
在html中标题使用h#来表示,h1~h6分别表示1~6六级标题
-->
<h1>一级标题</h1>
<!--
p:段落标签:段落标签页属于行级别标签,当前行填充满的情况下会默认换行。
-->
<p style="width: 200;height: 100;background-color: yellow;color: red;">这是一个p标签</p>
<!--  是空格,如果多个空格折叠后实际上只显示一个空格位 -->
<p>空格的 使用</p>
<div>
</div>
<!--
块元素:div 默认占一行
块元素当中是可以包含行级元素。
-->
<div style="background: red;">
我是box1
<p>我在div当中嵌套</p>
<p>我在div当中嵌套</p>
<p>我在div当中嵌套</p>
</div>
<div style="background: blue;">
我是box2
</div>
<!--
列表:有序列表无序列表,列表没有列表项是无意义的,列表的实际大小由列表项去撑开的
列表其实是一个块元素(行级块元素,其中的内容都是由内部定义的内容去撑开的,列表,div等等)
-->
<!-- ul是无序列表 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- ol是有有序列表 -->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!-- 列表中可以相互穿插-->
<ol>
<li>1</li>
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
<li>2</li>
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
<li>3</li>
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</ol>
<!--
行内元素
常用的行内元素有哪些:span,i 斜体,u 下划线,strong 加粗,img 图片标签
span没有特殊的一个含义:作用就是就是将某些文字作为一个行内块元素使用
br标签可以用来换行
-->
<p>
<span ><b>陕西省</b></span><i>汉中市</i><br><strong>东一环路</strong><u>一号</u>
</p>
<!-- img图片标签
常用属性:src:给定图片的路径,路径分为绝对路径和相对路径
绝对路径:从计算机的根目录开始向下查找的某一个文件下的某一个资源:D:/file/1.png,如果资源存在那么一定可以
找到该资源。
相对路径:使用一个参照物,来定位某一个资源
alt:对图片的描述,通常图片正常显示的情况下alt不显示
在hubilider当中直接访问本地的资源是访问不到的,因为hubuilder回将本地的根文件夹作为一个web应用程序来处理
需要制定ip和端口号
-->
<img src="http://127.0.0.1:8848/web/img/1.jpg"></img>
<!-- alt是错误后显示在图片位置的东西
<img src="../web/img/3.jpg" alt="美女图片">-->
<!--
它本身包含一级上级目录,找到它的上级目录吗,上级目录和和图片文件夹处于同级
<img src="../img/image/4.jpg" >
本身包含多级上级目录,定位到最顶级文件目录,再参照图片文件夹进入
-->
<img src="../img/image/2.jpg" >
<!-- 调用网站的图片链接 -->
<img class="logo58 customization_elements" src="//img.58cdn.com.cn/git/teg-app-fe/passport-pc/img/logo.png">
<!-- 超链接
a 标签表示超链接标签
href:给定超链接跳转的位置、如果没有指定跳转方式默认是在当前窗口打开目标
target:目标
跳转到其他网页:<a href="demo01.html">demo02</a>
-->
<a href="https://www.baidu.com" >百度</a>
<a href="https://www.taobao.com" target="_blank" >淘宝</a><br>
<!-- 超链接跳转顶部 -->
<a name="botton" href="#top">回到顶部</a>
</body>
</html>
表格学习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组学习</title>
</head>
<body>
<!--
表格:使用一对table标签
tr:行
td:列
border:线宽
width:宽度
hegith:高度
algin:对齐方式
rowspan:跨行
colspan:跨列
cellpadding:单元格的内边距
cellspacing:单元格之间的距离
-->
<!-- 内外边距都为5,高200宽400,对齐方式为右对齐的表格-->
<table border="" cellspacing="5" cellpadding="5" width="400px" height="200px" align="right">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
<!--
aa跨列合并占两行
<td rowspan="2">aa</td>
-->
<!--
aa跨列合并占两行
<td colspan="2">aa</td>-->
<!-- 表头-->
<table border="" cellspacing="" cellpadding="">
<!-- 表头-->
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>金额</th>
</tr>
</thead>
<tbody style="color: red;">
<tr><td>001</td><td>鼠标</td><td>50</td></tr>
<tr><td>002</td><td>键盘</td><td>150</td></tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr><td colspan="2">合计</td><td>200</td></tr>
</tfoot>
</table>
</body>
</html>