Day01-HTML

最新推荐文章于 2022-03-10 18:54:40 发布

jjizh

最新推荐文章于 2022-03-10 18:54:40 发布

阅读量405

点赞数

分类专栏： java学习随记文章标签： html 语言计算机标签

本文链接：https://blog.csdn.net/jjizh/article/details/72884764

版权

java学习随记专栏收录该内容

47 篇文章 0 订阅

订阅专栏

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其他表示

颜色的表示方法：

<font color="red" color=(11,22,33) color="#FFFAE8">haha</font>

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

宽度的表示方法：

  <table width="100%" width="60px">

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

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

     &nbsp;

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>

<h1 color="" width="" size="" align="">
</h1>

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

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

<font size="" color="">
</font>

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

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

<p>
</p>

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

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

<hr/>

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

  <hr noshade="noshade"/>

(5)换行标签 <br />

<br/>

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

<b>
</b>

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

<i>
</i>

二、图片标签 `<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：//；如果是本地的就要 ../ 找目录；如果只是#号，表示跳转到本页面；

<a href="page/AboutUs.html" target="_blank">关于我们</a>

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

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

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

<!--
  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：边框宽度，单位是像素px
- width：表格的宽度
- cellspacing:单元格之间的间隔，可以理解为细胞壁
- cellpadding：单元格边缘与单元格中的内容的间隔(左侧)
- bgcolor：背景色，在css中背景色是background-color，要区分开
- align：表示表格在整个页面中的对齐方式,left,right,center
<caption></caption>表的标题标签
<th></th>表头标签，标签内容默认居中加粗，用于表头使用。
<tr></tr>行标签
<td></td>单元格标签
- align：单元格中的内容的对齐方式,left,right,center
- colspan：横向合并单元格，合并两列，合并之后，被合并列的代码要删除
- 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:确定页面的路径

例子：
这里写图片描述

jjizh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Day01-HTML

Day01-HTML
复制链接

扫一扫

专栏目录

Day01-HTML

Day01-HTML

HTML的介绍

什么是HTML

HTML的结构介绍

html其他表示

HTML文件的各部分介绍

HTMl的基本标签

一、排版标签

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

三、列表标签

四、超链接标签

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

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

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

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

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

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