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

最新推荐文章于 2024-06-06 12:13:29 发布

scbiaosdo

最新推荐文章于 2024-06-06 12:13:29 发布

阅读量394

点赞数 2

分类专栏： html 文章标签：前端 html

本文链接：https://blog.csdn.net/scbiaosdo/article/details/79743671

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一次接触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>

h3{

color:red;

}

</style>

</head>

三、外部样式表

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

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

语法：

1、链接式

2、导入式

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

</style>

CSS语法

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：值值值值；默认顺序：上右下左

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

scbiaosdo

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
超文本标记语言-html的初尝试

第一次接触html，感觉很是简洁，因为之前自己学习的C语言，指针、调用搞得自己是焦头烂额，不胜其烦。但是经过学习html后，感觉每一种语言都有他独特的魅力，无法用另外一种语言替代。自身在计算机方面的学习其实是很薄弱的，毕竟专业是电子信息工程，学的东西不少，但是也很杂乱，但是临近毕业自己总是要有一门可以拿得出手的手艺，而自身对计算机方面又很浓的兴趣，在大学时间自己DIY过两个...
复制链接

扫一扫