超文本标记语言-html的初尝试

      第一次接触html,感觉很是简洁,因为之前自己学习的C语言,指针、调用搞得自己是焦头烂额,不胜其烦。但是经过学习html后,感觉每一种语言都有他独特的魅力,无法用另外一种语言替代。

      自身在计算机方面的学习其实是很薄弱的,毕竟专业是电子信息工程,学的东西不少,但是也很杂乱,但是临近毕业自己总是要有一门可以拿得出手的手艺,而自身对计算机方面又很浓的兴趣,在大学时间自己DIY过两个台式机,还购买过两个笔记本,在这之间学会了不少硬件知识,至少在装机方面稍强。在询问过不少本专业和非本专业的学长学姐,他们都比较推荐学习计算机语言,而我在高考刚刚结束时就接触过了C语言,自己网购了一本c prime plus,在家啃了一个多月,对这方面是很感兴趣的,所以我就开始了对计算机语言的学习,咨询了多方意见之后就打算从html学起了。

html的构成

html总的来说是由三部分构成的html根标签、head子标签和body子标签构成的。

html标签:是为了告诉浏览器这是一个html文件,并且限制了文档的开头与结尾;

head子标签:用于定义文档的头部,它是所有头部元素的容器。包含了标题和一些元素,并且可以写入css。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等;

body子标签:body子标签是主体部分,里面书写的内容是为了展示给用户所看到的部分。

html的基础标签

<h1>-<h6>标签:标题标签,<h1></h1>的字体是标题标签中最大的,<h1></h6>是最小的;

<font><font>标签:字体标签,用于规定字体,字体颜色,字体尺寸;

              属性:color,替代字体颜色

                        face,替代字体样式

                        size,替代字体尺寸

<p></p>标签:段落标签,html中段落就是由它规定的;

              属性:align,替代包含段落内的文本对齐方式  left,right,center

<a></a>标签:链接标签,在html中实现超链接;

             属性:harf,用于连接目标的URL

                       name,规定锚名称

                        可以应用于锚链接,进行特殊位置的跳转,比如置顶。


<img/>标签:图像标签,实现了图片的插入;

              属性:src,规定图像的URL

                        width,规定图像宽度

                        height,规定图像高度

                        alt,图像显示出错时所显示的文字

                        title,鼠标停留1s时所显示的文字

<table></table>标签:表格标签,可以在浏览器中显示出一个表格;

               一个表格是由table元素以及一个或多个 tr、th 或 td 元素组成。

                <th></th>,表头标签,显示的字体稍大并且加粗

                <td></td>,单元格标签,相当于列

                <tr></tr>,行标签

                 rowspan,行与行之间进行合并

                 colspan,单元格与单元格 之间进行合并

                 属性:align:对齐方式

                            border:规定边框宽度

                            width:规定表格宽度

                            height:规定表格高度

<form></form>标签:表单标签,允许用户在里面输入一些信息;

               <input/>,用于搜集用户信息

                 属性:type:规定元素类型     text文本输入框 password密码 submit提交 radio单选框 checkbox复选框 hidden不会显示内容,但会携带信息 file用于文件上传 button规定一个按钮 reset重置按钮

                           value:默认值

                  <textarea></textarea>,显示出来一个文本域,用于输入信息

                   属性:cols,规定宽度

                          rows,规定高度

                <select></select>,可创建单选或多选菜单

                           <option></option>,元素定义下拉列表中的一个选项

                            属性:value,送至服务器的选项值

                

                  属性:action,提交的地址

                            method,提交的方式     post与get方式   post更具有保密性并且不会限制大小

                            name,必填,用于后台的调用

<ul></ul>标签:无序标签,一个项目的列表,此列项目使用典型的小黑圆圈进行标记;
<ol></ol>标签:有序标签,一个项目列表,默认使用数字标记;
<blockquote></blockquote>标签:段落缩进标签,在段落的两端产生缩进;
<div></div>标签:块标签,相当于一个容器,用来存放东西;
<span></span>标签:行内标签,被用来组合文档中的行内元素;
<pre></pre> 标签:原样输出标签,常见应用就是用来表示计算机的源代码;
<hr />标签:水平线标签,在 HTML 页面中创建一条水平线;
<br/>标签:换行符标签,可插入一个简单的换行符;
<sub></sub> 标签:下标标签,可定义下标文本,常用于标注化学元素;
<sup></sup>标签:上标标签,可定义上标文本,常用于数学标注与商标标注;

指层叠样式表-CSS (Cascading Style Sheets)

CSS的使用方法

一、行内样式

使用style属性引入CSS样式。

示例:
<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
实际在写页面时不提倡使用,在测试的时候可以使用。

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

示例:

<head>

   <style type="text/css">

      h3{

            color:red;

         }

   </style>

</head>

三、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。

语法:

1、链接式

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2、导入式

<style type="text/css">

  @import url("css文件路径");

</style>

CSS语法

由三部分选择器、属性和值构成

CSS选择器

标签选择器

最普通的选择器

      书写样式

              标签名称{

                             属性:值;

                            }

id选择器

需要先给标签指定id才可以使用(每个标签的id是唯一的)

       书写样式

              #id{

                    属性:值;

                    }

类选择器

需要先给标签指定class才可以使用(多个标签可以指定同一个类)

         书写样式

                .类{

                     属性:值;

                     }

并集选择器

可以同时选中多个选择器

          书写样式

                选择器1,选择器2,选择器3{

                                                            属性:类;

                                                            }

交集选择器

可以选中多个选择器中相同的部分

           书写样式

                 选择器1 选择器2 选择器3{

                                                        属性:类;

                                                         }

CSS伪类

伪类:一种状态   重点学习了超链接的四种状态

            link:没有访问过的状态

            visited:被访问过的状态

            hover:鼠标悬浮的状态

            active:鼠标点击但未松开的状态

            书写样式

              a:link{

                       属性:值     /*可以设置字体大小 颜色 下划线之类*/

                      }

          四种状态只能以此为顺序排列

CSS文本属性

text-decoration:值;    文本下划线的设置  none没有下划线 underline下划线 overline上划线 line-through穿过文本的线

color:值;    字体颜色的设置

text-height:值;      设置行高

text-align:值;     设置对其方式

letter-spacing:值;   字符间距

word-spacing:值;   字间距(默认两个为一个单词)

CSS字体属性

font-family:值;  设置字体

font-size:值;    设置字体大小

font-style:值;    设置字体样式     normal标准样式   italic斜体

font-weight:值;  设置字体粗细    normal标准样式  bold适当加粗  bolder更粗 lighter更细  100  200  300

简写样式font:style weight size family;必须按此样式书写  例如font:italic bold 30px “宋体”;

color:值;   指设置字体颜色

CSS背景属性

background-color:值;    设置背景颜色

background-image:url(图片位置);   设置背景图片

background-repeat::值;   设置图片是否重复  

                           repeat x轴,y轴都重复  no-repeat不重复 x-repeat水平方向重复 y-repeat竖直方向重复 

background-position:值;    设置图片的位置        

                             图片的三种位置top content bottom  图片在浏览器中的位置left center right

简写样式background:color url() repeat position; 例如background:black url() no-repeat top center;

CSS列表属性

list-style-image:url(图片路径);  可以设置有序或无序列表前的图片

CSS表格属性

border-left-color:值;  设置左边框颜色

border-right-color:值;  设置右边框颜色

border-top-color:值;  设置上边框颜色

border-bottom-color:值;  设置下边框颜色

简写属性border-color:值 值 值 值;  默认顺序为 上 右 下 左 (某一边框未设置则会取对边颜色)


border-left-width:值;   设置左边框宽度

border-right-width:值;  设置右边框宽度

border-top-width:值;  设置上边框宽度

border-bottom-width:值;  设置下边框宽度

简写属性border-width:值 值 值 值;  默认顺序为 上 右 下 左

border-left-style:值;   设置左边框样式

border-right-style:值;  设置右边框样式

border-top-style:值;  设置上边框样式

border-bottom-style:值;  设置下边框样式

简写属性border-style:值 值 值 值;  默认顺序为 上 右 下 左  dotted点状 solid实线 double双实线 dashed虚线 none无边框


整体的简写属性border:width style color;  必须按照此顺序 例如border:1px dotted black;

width:值;  边框宽度

height:值;  边框高度

CSS浮动

float:值; 使快标签一条线排列  left左浮动 right右浮动

clear:值; 设置元素左右师傅可以有浮动  

                   none默认值左右都允许有浮动  left不允许左边有浮动 right不允许右边有浮动 both左右两边都不允许有浮动

display:值;规定元素应该生成的框的类型

                    none不会被显示   block左右两边带有换行符 inline默认属性前后不带有换行符

CSS框模型

margin-top:值;  上外边框宽度

margin-bottom:值;  下外边框宽度

margin-left:值;  左外边框宽度

margin-right:值;  右外边框宽度

简写属性margin:值 值 值 值;     默认顺序:上 右 下 左        


padding:值;  内边框宽度

padding-top:值;  上内边框宽度

padding-bottom:值;  下内边框宽度

padding-left:值;  左内边框宽度

padding-right:值;  右内边框宽度

简写属性padding:值 值 值 值;     默认顺序:上 右 下 左       



经过一系列的学习对网页的前端知识有了不少的了解,目前的重点会放在对所学前端知识的理解并且熟练运用。



 



  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值