Day01-HTML

xiaoxiao2021-02-27 222

Day01-HTML

HTML的介绍

什么是HTML

HyperText Markup Luanguage ：HTML全称叫超文本标记语言 * 超文本：可以完成文本所不能完成的功能的一种特殊的文本。（另一种说法，含有超链接的文本叫超文本） * 标记：标签，一个标签就能完成一项具体的功能。 * 语言：人与计算机沟通的桥梁。 *html属于语法松散的语言

我们在浏览网页的时候，可以通过查看源代码来看到具体的html代码，网页的内容一般包括HTML代码，CSS代码，JavaScript代码等内容 1) HTML代码：用于展示需要显示的数据，主体框架 2) CSS代码：使显示的数据更加好看，样式 3) JavaScript代码：使整个页面显示的数据更具有动态效果，动态

网页根据内容是否改变可以分为：静态页面：编写之后在浏览器中不再改变的网页，HTML 就是用于编写静态页面的；动态页面：会根据不同的情况展示不同的结果。例如登录成功后右上角显示用户名字；主要通过js完成

HTML的结构介绍

HTML的语法特征

1.html有一个良好的结构正确的嵌套并且有一个根标签 <html></html>

2.html的标签是以尖括号包裹关键字成对出现的，有开始有结束；有的标签也单个存在，叫做空标签。空标签：在自身结束的标签叫空标签，例如< br/>换行标签,< hr/>水平线标签,< img src=”” />图片标签，如果没有结束标签，就建议以/结尾。本质上就是没有标签体的标签。标签体：在开始标签和结束标签之间的部分

4.html不区分大小写，这要是为什么web项目命名的时候，不区分大小写，相同字母会认为是同名。

html其他表示

颜色的表示方法：

1）英文 2）RGB表示法（数字1，数字2，数字3），数字是0-255 3）16进制表示法:#ffffff，六个16进制数字，两两表示红、绿、蓝的颜色；如果红绿蓝两位取值分别相同，可以省略成为1位，也就是#112233，简化成为#123；实际开发过程中基本只有16进制表示方法

宽度的表示方法：

1）像素表示方法（px），在html中，px单位可以省略。但是在css中，单位px是不能够省略的，所以在写的时候建议都写上。 2）百分比表示法：width=“50%”，实际开发中最常用百分比表示法，百分比表示占上层父类标签的百分之多少。

空格的表示方法：注意后方的分号不能够省略；

HTML文件的各部分介绍

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的网页</title> </head> <body>  我们是<font color="red" size="5">程序员</font> </body> </html> 1)文档声明：<!DOCTYPE html>，这个表示html5，而html4则是下方的一长串符号 * <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2)根标签：<html></html>3)普通标签 : 除了根标签外的标签都叫普通标签头标签：<head>：用于引入脚本，导入样式css和js，提供元信息<meta charset="UTF-8">等等，一般情况下头标签的内容在浏览器端都不显示的。title显示在浏览器的页面上方。体标签：<body>4)属性5)文本6)注释 ：注释标签不能够嵌套

HTMl的基本标签

一、排版标签

（1）标题标签 <h></h>

标题标签有1-6级，1级标签字体最大，标题标签后面跟着一个自动换行，属性：color, width, size, align等

（2）字体标签<font></font>

size:字体大小，区间是1-7，最大是7，浏览器默认的值是3； color：字体颜色 face ：字体样式

(3) 段落标签 <p></p>

p标签会自动在其前后创建一些空白；

(4)水平线标签 <hr />

<hr/>

属性： noshade：没有阴影，取值noshade表示显示纯色

(5)换行标签 <br />

<br/>

(6)粗体标签 <b></b>,和word软件中的加粗符号是一样的

(7) 斜体标签 <i></i>，和word软件中的斜体符号是一样的

二、图片标签 <img src="" />

图片标签的属性 src：（src属性是图片标签必须具备的属性）图片的路径，如果图片和html在同一级目录下，就直接写文件名字即可。如果不在同一级目录，使用相对路径引用图片： . . / 这份符号表示返回上一级目录； / 表示找下一级目录width：图片宽度height：图片高度alt : 图片无法显示的时候的替代文本title：鼠标移动到图片上显示的提示。border：边框，图片的边框

三、列表标签

<ul> </ul> <ol> </ol> 无序列表<ul><ul/> 列表：<li>标签属性：type：disk(实心圆，默认是这种)、circle(空心圆)、square(小方块) <ul type="square"> <li>大天狗</li> <li>花鸟卷</li> <li>青行灯</li> </ul> 有序列表<ol></ol> 列表：<li>标签属性：type=“a”; = “A”; =”1”; =“i”;=”I”;type的取值可以有五种 start=“4”；貌似只有数字形态的有序列表的时候才可以设置其实值 <ol type="1" start="4"> <li>大天狗</li> <li>花鸟卷</li> <li>青行灯</li> </ol>

四、超链接标签

<a>标签中，href属性是必须存在的属性记得要是联网的链接，前面要加上 http：//；如果是本地的就要 ../ 找目录；如果只是#号，表示跳转到本页面；

属性： * href：表示超链接跳转的路径 * target：确定以何种方式打开href所设置的界面，target表示页面的打开的地方，是否新建，记住两个取值，_self(默认的，在本页面打开)，_blank,在空白页面打开，在布局frameset中也可以直接从对应的布局变量中打开。在后面的框架模型frameset中，还可以指定在某个frame中打开指定页面。

五、表格标签 <table></table>

快速创建表格方法：table>tr*3>td*3 然后按tab键，快速创建表格

<table width="100%" border="1" cellspacing="5" cellpadding="100" align="center" bgcolor="red"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>

<table></table>标签

border：边框宽度，单位是像素pxwidth：表格的宽度cellspacing:单元格之间的间隔，可以理解为细胞壁cellpadding：单元格边缘与单元格中的内容的间隔(左侧)bgcolor：背景色，在css中背景色是background-color，要区分开align：表示表格在整个页面中的对齐方式,left,right,center

<caption></caption>表的标题标签

<th></th>表头标签，标签内容默认居中加粗，用于表头使用。<tr></tr>行标签<td></td>单元格标签 align：单元格中的内容的对齐方式,left,right,centercolspan：横向合并单元格，合并两列，合并之后，被合并列的代码要删除rowspan：纵向合并单元格，合并两列，合并之后，被合并列的代码要删除nowrap：单元格中的内容是否折行，规定表格单元格中的内容不换行。nowrap=”nowrap” <table width="100%" border="1" cellspacing="5" cellpadding="100" align="center" bgcolor="red"> <tr > <td rowspan="2"></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td colspan="3"></td> </tr> </table> 若要合并四个单元格，先合并行，后合并列，也可以先合并列，在合并行

六、框架标签<frameset></frameset>

<frameset>标签，是多个窗口页面整合在一起的一个集合（框架集）。每一个页面（框架）都是单独文档，需要使用子标签<frame>来确定整体布局。多个<frameset>可以嵌套使用。子标签是<frame>，且<frame>标签是<frameset>中必须存在的标签 <frame>可以作为单标签来使用

<frameset rows="80,*" noresize> <frame name="top" src="index.html" > <frame name="bottom" src="index.html" > </frameset> <frameset>标签，是多个框架整合在一起的一个框架集合，每一个框架都是一个单独的文档，需要使用子标签<frame>来确定框架引用的页面的位置。 *<frameset>标签，通过列和行来确定整体布局，使用cols来确定列数，使用rows来确定行数 <frameset rows="80,*"> 80表示80个像素，*表示剩下的像素

*多个<frameset>标签可以嵌套使用。 * <frameset>和<body>不能共存

<frameset>属性： * noresize表示禁止改变框架的大小结构 * rows表示分成多少行 * cols表示分成多少列 *target：确定需要显示的页面在何处显示，在a标签中写target，指定页面在哪个frame打开

<frame>属性： *name：确定分区的名字 * src:确定页面的路径

例子：

转载请注明原文地址: https://www.6miu.com/read-14809.html

技术

最新回复(0)