发表于： 2019-07-13 19:52:37
1 836
今天完成的事情
常用标签
使用ul，添加新闻信息列表（以下每条信息前都会有一个圆点）
<ul> <li>信息</li> <li>信息</li> ...... </ul>
使用ol，添加图书销售排行榜（以下每条信息前会按照序号排序）
<ol> <li>信息</li> <li>信息</li> ...... </ol>
<body>...</body>: 内文
<h>...</h>: 标题
<p>...</p>: 段落
<span>: 设置单独的样式
<em> ...</em>:设置字体为 斜体
<srtong> ...</stong>：设置字体为 粗体
<q>...</q>: 引用标签，引用一句话时使用
<blackquote>...</blackquote>: 引用标签，引用多句话时使用
<br/>: 换行标签，属于空标签，所以没有开始标签
<hr/>: 水平横线标签，属于空标签，所以没有开始标签
 : 空格标签
<address>...</address>: 地址标签
<code>...</code>: 代码表示标签，显示一行代码
<pre>...</pre>: 代码表示标签，显示多行代码
ul标签，使用后每条信息前都会有一个圆点
<ul>
<li>信息</li> <li>信息</li> ......
</ul>
ol标签，使用后信息会排序
ol标签：使用后信息会排序且每条信息前又序号
<ol>
<li>信息</li> <li>信息</li> ......
</ol>
元素分类
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
元素分类--块状元素
什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
元素分类--内联元素
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
div{ display:inline; } ...... <div>我要变成内联元素</div>内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
元素分类--内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
提示：下一小节是用视频动画来讲解css中的盒模型。
网页跳转
使用<a>标签，链接到另一个页面
使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
语法：
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
title是指网页标题，”链接现实的文本“是指你点击后进入新网页的文字
例如：
<a href="http://www.imooc.com" title="点击进入慕课网">click here!</a>
上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）
在新建浏览器窗口中打开链接
<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
如下代码：
<a href="目标网址" target="_blank">click here!</a>
代码实战
css样式外联文件
运行如下
今天遇到的问题
1.问题：以上代码body中图片参数不知道如何设置
对策：图片本身长宽是由比例的，所以设置高度或者宽度一个就可以了
2.问题：上述代码使用css样式错误
对策：当使用css内联样式时候，<style type="text/css">...</style>,在...之间写样式，
当使用外联时候，使用<link rel="stylesheet" type="text/css" href="xxxx.css">引入css外联样式
今天的收获：
1.在慕课网上将基础的知识学习了一部分，对常用标签有了一定认知
2.自己改造了以下代码，成功运行，代码进行了简化，引入了外联css样式
明天的计划：
1.任务二的进行
返回列表
评论