Web前端基础【1】--HTML基础

HTML不是编程语言,是一种表现网页信息的符号标记语言。标记语言是一套标记,HTML使用标记来描述网页。Web浏览器的作用就是读取HTML文档,并以网页的形式显示出来。

一:HTML的基本结构

1:<html>内容</html>:HTML文档由<html></html>包裹,这是HTML文档的文档标记。这对标记分别位于网页的最前端和最后端。

2:<head>内容</head>: HTML头标记,用来包含文件的基本信息,比如网页的标题、关键字等,在<head></head>内可以放<title></title>、<meta></meta>、<style></style>等标记。 在<head></head>标记的内容不会在浏览器中显示。

3:<title>内容</title>:HTML文件标题标记。网页的“主题”

4:<body>内容</body>:<body>......</body>是网页的主体部分,在此标记中可以包含<p></p>、<h1></h1>、<br></br>等标记。

5:<meta>内容</meta>:页面的元信息。注意meta标记必须放在head元素里面。

下面以百度首页的页面作为示例:

二:格式标记

1:<br>:换行标记,让后面的信息显示在下一行

2:<p>:段落标记

3:<center>:居中标记,让段落或者文字相对于父标记居中显示

4:<pre>:预格式化标记

5:<li> :列表项目标记,每一个列表使用一个<li>标记

6:<ul>:无序列表标记

7:<ol>:有序列表标记

8:<hr>:水平分割线标记

9:<div>:分区显示标记,也称为层标记

10:<!--->:注释标记,定义注释。

三:文本标记

1:<h1>-----<h6>:标题标记,h1最大,h6最小。

2:<font>:字体设置标记。用来设置字体的格式,一般有三个属性:size(字体大小);color(字体颜色);face(字体)

3:<b>:粗字体标记

4:<i>:斜字体标记

5:<sub>:文字下标字体标记

6:<sup>:文字上标字体标记

7:<tt>:打印机字体标记

8:<cite>:引用方式的字体,通常是斜体

9:<em>:表示强调,通常是斜体字

10:<strong>:表示强调,通常是粗体字

11:<big>:大型字体标记

12:<small>:小型字体标记

13:<u>:下划线字体标记

四:图像标记

<img>称为图像标记,用来在网页中显示图像。使用方法:<img src=''路径/文件名.图片格式"width="属性值"height="属性值"border="属性值"alt="属性值">

<img>标记主要有以下属性:

1:src属性指定我们要加载的图片的路径,图片的名称以及图片的格式

2:width属性指定图片的宽度

3:height属性指定图片的高度

4:border属性指定图片的边框宽度

5:alt属性有两个作用:

① 如果图像加载失败,会用文字来代替图像显示。

② 搜索引擎可以通过这个属性的文字来抓取图片。

注意:<img>是单标记,不需要使用</img>来闭合

五:超链接的使用

链接的引用使用的是<a>标记。<a>标记的基本语法:<a href="链接地址"target="打开方式"name="页面锚点名称">链接文字或图片</a>

<a>标记主要有以下几个属性:

1:href属性值是链接的地址。

2:target属性用来定义打开链接的方式。当属性值为"-blank"时,作用是在一个新的窗口打开链接;当属性值为"_self"时,作用是在当前窗口打开链接;当属性值为"_parent"时,作用是在父窗口打开链接;当属性值为"_top"时,在顶层窗口打开链接。

3:name属性用来指定页面的锚点名称。

六:表格

表格的基本结构包括<table>、<caption>、<tr>、<td>、<th>等标记

1:<table>标记有以下属性

① width属性:表示表格的宽度

② height属性:表示表格的高度

③ border属性:表示表格外边框的宽度

④ align属性表示表格的显示位置:left居左显示;center居中显示;right居右 显示。

⑤ cellspacing属性:单元格之间的间距

⑥ cellpadding属性:单元格内容与边框的显示距离

⑦ frame属性:控制表格边框外层的四条线框

⑧ rules属性:控制显示单元格之间的分割线

2:<caption>标记用于表格中使用标题

<caption>标记的align属性有四个取值:

① top表示标题放在表格的上部

② bottom表示标题放在表格的下部

③ left表示标题放在表格的左部

④ right表示标题放在表格的右部

3:<tr>标记用来定义表格的行,对于每一个表格行,都是由一对<tr>...</tr>标记表示。<tr>标记有如下几种属性

① bgcolor属性用来设置背景颜色

② align属性用来设置垂直方向对齐方式

③ valign属性用来设置水平方向对齐方式

4:<td>和<th>都是单元格的标记,其必须嵌套在<tr>标记中,成对出现。<th>是表头标记,<th>中的文字会被默认加粗,而<td>不会,<td>是数据标记,表示该单元格的具体数据。两者的标记属性是一样的:

① bgcolor属性用来设置背景颜色

② align属性用来设置垂直方向对齐方式

③ valign属性用来设置水平方向对齐方式

④ width属性用来设置表格的宽度

⑤ height属性用来设置表格的高度

⑦ rowspan设置单元格所占行数

⑧ colspan设置单元格所占列数

每天学习一点点,每天进步一点点。

原文发布于微信公众号 - 小白客(youcoding)

原文发表时间:2017-10-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

jquery mobile 移动web(2)

button 按钮   data-role="button" 将超链接变成button。   具有icon 图标的button 组件...

20550
来自专栏十月梦想

css的position定位详解

iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

10830
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:快速在手机上实现n×m形式的菜单(IconMenuView)

打开集合编辑器,并点击“添加”,ID属性(用于标识菜单组),Items属性(菜单项集合),Title属性(菜单组文本),Value属性(菜单组值),如图1、图2

18810
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:实现手机上常见的ListMenuView

打开集合编辑器,并点击“添加”,ID属性(用于标识菜单组),Items属性(菜单项集合),Title属性(菜单组文本),Value属性(菜单组值),如图1、图2

12140
来自专栏.Net移动开发

.NET(C#、VB)移动开发——Smobiler平台控件介绍:TextTabBar控件

获得和设置标签栏单元集合,打开集合编辑器,并点击“添加”,分别填写Text(菜单项文本),Value(内部值,不在界面上显示),如图 7、图 8;

15820
来自专栏Nian糕的私人厨房

CSS 布局_3 Position元素定位

我们之前已经介绍过行元素,块元素及行内块元素的属性了,能够知道它们是具有自己默认的显示方式的,即元素会按照文档流 (document flow) 的方式,自上而...

15440
来自专栏.Net移动开发

用VS2017进行移动开发(C#、VB.NET)——OfflineCameraButton控件,Smobiler移动开发

若将该属性设置为“0”,该控件的背景色即为全透明的,显示为Smobiler窗体设计界面的背景色。

22430
来自专栏柠檬先生

jquery 层级选择器

关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :...

201100
来自专栏十月梦想

HTML表格

            4.cellspacing:外边距(单元格和单元格之间的距离)

71220
来自专栏达摩兵的技术空间

css常规水平居中&&垂直居中方案

无论水平居中还是垂直居中相信你并不陌生,但有多少种实现方式,每种的优劣以及兼容性相信你并不清楚。

12420

扫码关注云+社区

领取腾讯云代金券