HTML基础

xiaoxiao2021-02-28  107

html是Hyper Text Mark-up Language字母简写,意思是超文本标记语言

HTML基本结构

<!DOCTYPE html> <!-- 告诉浏览器我是html页面 --> <html lang="en"> <!--设置网页相关参数--> <head> <meta charset="UTF-8"> <!-- 设置页面参数,设置编码处理中文乱码--> <title>网页标题</title> </head> <body> body里面包含的是网页显示内容 </body> </html>

第一行是文档声明,第二行“html”标签和最后一行“/html”定义html文档的整体,“”标签中的‘lang=“en”’定义网页的语言为英文,定义成中文是’lang=”zh-CN”’,不定义也没什么影响,它一般作为分析统计用。 “head”标签和“body”标签是它的第一层子元素,“head”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“body”内编写网页上显示的内容。

html文档规范 1、所有的标签必须小写 2、所有的属性必须用双引号括起来 3、所有标签必须闭合 4、img必须要加alt属性(对图片的描述)

html注释:

<!-- 这是一段注释 -->

html标签特点: html的标签大部分是成对出现的,少量是单个出现的,特定标签之间可以相互嵌套,嵌套的意思是一个标签内可以保护一个或多个其它标签,包含的标签和父类的标签可以同类型的,也可以不同类型的。

<!-- 成对出现的标签 --> <body>......</body> <p>......</p> <div>......</div> <b>......</b> <!-- 单个出现的标签 --> <br /> <img src="..." /> <input type="..." /> <!-- 标签之间的嵌套 --> <p> <span>...</span> <a href="...">...</a> </p> <div> <h3>...</h3> <div> <span>...</span> <p>...</p> </div> </div>

字体效果列子

<!-- hx标签:设置文字的题目,x:1到6 <hx align="设置对齐方式 left 左 right右 center中间">设置文字标题 </hx> --> 标题 <h1 align="right">这是一级标题</h1> <h2 align="center">这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> <!-- font标签:设置文字效果 <font size="1~7" color="设置字体颜色 单词/16进制" face="设置字体库 宋体 黑体 "> 设置文字内容 </font> --> <font size="7" color="#66AEFF">王宝强</font> <font size="3" color="green">王宝强</font> <font size="3" color="green" face="楷体">王宝强</font> <!-- b标签:设置字体变粗 <b> 设置文字 </b> strong标签: 设置字体变粗 <strong> 设置文字 </strong> i标签:设置文字倾斜 <i> 设置文字 </i> --> <b> b标签:设置字体变粗 </b> <strong> strong标签:设置字体变粗 </strong> <i> i标签:设置文字倾斜 </i> </body>

html段落 <p>标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开

<P></P>

html换行 末尾加<br/>即可

html字符实体

<!-- 在段落前想缩进两个文字的空格,使用空格的字符实体:  --> <p>   一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br /> 文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br /> 渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。</p>

在网页上显示 “<” 和 “>” 会误认为是标签,想在网页上显示“<”和“>”可以使用它们的字符实体,比如:

<!-- “<” 和 “>” 的字符实体为 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>

html链接

<a>标签可以在网页上定义一个链接地址,通过src属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的提示文字框。

<a href="#"></a> <!-- # 表示链接到页面顶部 --> <a href="http://www.baidu.com/" title="跳转到百度">百度</a> <a href="2.html">测试页面2</a>

定义页面内滚动跳转

<a href="#mao1">标题一</a> ...... ...... <h3 id="mao1">跳转到的标题</h3>

html列表 有序列表 在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现,代码如下:

<ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ol>

无序列表 在网页上定义一个无编号的内容列表可以用<ui>、<li>配合使用来实现,代码如下:

<ul> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ul>

html表格 table常用标签

1、table标签:声明一个表格

2、tr标签:定义表格中的一行

3、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格 table常用属性:

1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有:left | center | right

5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并 html表单 表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,实现一个特定功能的表单区域(比如:注册),首先应该用<form>;标签来定义表单区域整体,在此标签中再使用不同的表单控件来实现不同类型的信息输入 html内嵌框架 <iframe>标签会创建包含另外一个html文件的内联框架(即行内框架),src属性来定义另一个html文件的引用地址,frameborder属性定义边框,scrolling属性定义是否有滚动条,代码如下:

<iframe src="http://www.baidu.com" frameborder="0" scrolling="no"></iframe>
转载请注明原文地址: https://www.6miu.com/read-35795.html

最新回复(0)