发表于: 2018-10-27 19:36:14
1 712
今天完成的事情:
html是由元素标签组成的:
1、HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.
<h1> 定义最大的标题。 <h6> 定义最小的标题。 应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
例如<h1>这是一个标题。</h1>
2、HTML 段落是通过<p> 标签来定义的.
例如<p>这是一个段落。</p> (有一点要牢记:p标签是一个文本级标签,p里面只能放文字、图片、表单元素。其他的一律不能放。)
3、HTML 链接是通过标签 <a> 来定义的.
例如<a href="www.baidu.com">这是一个链接</a>
href是属性在其中是指定链接的地址
4、HTML 图像是通过标签 <img> 来定义的.
例如<img src="/images/logo.png" wight="宽度" height="高度'' />
5、<hr> 标签在 HTML 页面中创建水平线。
<hr>可以用来分隔内容
例如<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
上面四个元素并且都通过vscode编辑器用代码的形式动手打出来了。
了解HTML 文档由嵌套的 HTML 元素构成,有三个重要元素:
html元素定义了HTML整个文档;
body在html中代表文档主题内容;
p元素在html文档中代表“段落”。
这三种元素都拥有一个开始标签 例如<html> ,以及一个结束标签例如</html>。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
了解div标签:div的语义是division“分割”;
div标签是一个容器级标签,里面什么都能放,甚至可以放div自己。
含义:div元素是用来为html文档内大块(block-level)的内容提供结构和背景的元素。
<div>可定义文档中的分区或节。
<div>标签可以把文档分割为独立的、不同的部分。他可以用作严格的组织工具,并且不适用任何格式与其关联。
如果用id或class来标记<div>,那么该标签的作用会变得更加有效。
用法:<div>是一个块级元素。这意味着它的内容自动地开始一个新行,实际上,换行是<div>固有的唯一格式表现。
可以通过<div>的class或id应用额外的样式。不必为每一个<div>都加上类或id。
可以对同一个<div>元素应用class或id属性,但是更更常见的情况是应用其中的一种。这两者的差异是,class
可以用于元素组(类似的元素,或者可以理解为某一类元素),而id用于标识单独的唯一的元素。
div作用
让内容包裹在DIV内,实现各式各样的美化,比如对div设置边框,这样内容就区就有边框样式、对div设置字体颜色这
样对应DIV内字体就有了各式各样的颜色;对div设置背景颜色或背景图片,这样内容就有了漂亮的css背景。
了解XHTML和HTML的区别:
最主要的不同:
XHTML 元素必须被正确地嵌套。(首尾必须一致例如<b><i>...<i><b>)
XHTML 元素必须被关闭。(非控和空标签都必须用结束语标签例如</p>)
标签名必须用小写字母。(例如<body>)
XHTML 文档必须拥有根元素。(必须要有<html> </html>)
html标签分为两种:双边标记<html></html> 单边标记<br />、<hr />
了解什么是css:
css含义:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化
1、css固定样式:<为了方便阅读可以将代码写在新行内。>
p{
font-size:30px;(设置字号大小)
color:blue;(设置字体颜色)
font-weight:bold;(设置字体加粗)
}
使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
2、css的优势:
编辑一段文字,把原来css还可以这样span文字颜色啊!把这两个英文设置成红色,这时就可以通过设置样式来编写
一条css样式语句
span{
color:red;
}
完成了编码实际操作,为html添加标签,并尝试添加lcss样式以打代码的形式操作出来。
了解了style是用来写样式的,分为三种内联式css样式、嵌入式css样式、外联式css样式。
1、内联式css样式:
<p style="color:red">这里文字是红色。</p>(并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。)
2、嵌入式css样式:
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。
3、外联式css样式:
<link href="base.css" rel="stylesheet" type="text/css"/>
要求:
1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel=“stylesheet” type=“text/css”是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
以上是今天所学内容。
明天计划的事情:
通过学习的内容尝试完成任务一。
接着任务指示继续学习接下来的内容。
问题:
html的属性有点不太理解
在打代码的时候,因为不熟悉标点符号用成中文的,导致代码在网页上显示不一致。多练习熟练每个代码的运用
收获:学会遇到问题先自己想方法去解决,让自己养成习惯。
评论