HTML学习篇01

最新推荐文章于 2022-04-14 13:01:31 发布

A__B__C__

最新推荐文章于 2022-04-14 13:01:31 发布

阅读量339

点赞数

分类专栏： JavaWeb JavaWeb学习笔记篇

本文链接：https://blog.csdn.net/A__B__C__/article/details/89761842

版权

JavaWeb 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

JavaWeb学习笔记篇

11 篇文章 0 订阅

订阅专栏

一、HTML简介：

二、HTML的编辑器

三、HTML基础语法及基本标签

3.1 标题标签： ……（文本内容） n表示数字1-6

一、HTML简介：

HTML是用来写网页的一种语言。浏览器通过读取HTML文档，然后将文档中的内容以网页的形式显示出来（浏览器不会显示HTML的标签，而是通过其中的标签来解释页面的内容）；
HTML的全称是Hyper Text Markup Language ，翻译为超文本标记语言；
HTML是一种标记语言，它定义了自己的一整套标记标签；
HTML的标签是由一对尖括号括起来的，通常情况下是成对出现的，例如：<.b>......</b>,前者称为开始标签，后者称为结束标签；

举个例子：下面是一段HTML语言和经过浏览器解释以后显示的结果

	<!--
    	作者：pilipala@qq.com
    	时间：2019-05-02
    	描述：html的基本语法
    -->
	<!--html注释格式-->
	<html>  <!-- <html>和</html>之间的文本描述网页 -->
		<head> <!-- 头标签-->
			<meta charset="UTF-8">  <!--设置字符编码格式-->
			<title>
				当前窗体标题
			</title>
		</head>
		<body>
			要显示的内容...
		</body>
	</html>

二、HTML的编辑器

对于HTML程序，可以使用文本文档来编写，最后保存的时候将后缀名.txt改为.html，然后用浏览器打开；也可以使用一些专门用来编写html程序的软件编写，比如HBuilder等，我这里使用的是HBuilder编辑器；

三、HTML基础语法及基本标签

在这里，我将使用一些实例来说明一些常见的HTML标签的用法

3.1 标题标签： <hn>……（文本内容）</hn> n表示数字1-6

注意：这里所说的<hn>以及</hn>中的n并不是字母n，而是用来代替数字1-6；反别表示不同级别的标题，数字越小，标题等级越大（在浏览器解释的结果中的区别就是数字越小，字体越大）；

实例如下（左边为代码，右边为运行结果）：

3.2 段落标签

段落标签：<p> ......</p>

段落缩进：<blockquote>......</blockquote>

3.3 文本其他常见标签

加粗标签： <b>...</b>

斜体标签：<i>... </i>

换行标签：<br/>

水平线标签：<hr/>

原样输出标签：<pre> ... </pre>

上标：<sup> ... </sup>

下标：<sub>...</sub>

滚动标签：<marquee>...</marquee>

滚动标签中有几个常用属性：

behavior 表示滚动方式
- behavior="alternate" 表示来回滚动
- behavior="scroll" 朝一个方向滚动（循环滚动）
- behavior="slide" 朝一个方向滚动（不循环，从一端到另一端之后就不动了）
direction 表示滚动方向
- direction="down" 从上向下滚动
- direction="up" 从下向上滚动
- direction="left" 从由向左滚动
- direction="right" 从左向右滚动

3.4 块标签和行内标签

块标签：<div>...</div>

行内标签：<span>...</span>

3.5 列表标签

有序列表：ol

一个常用属性type 表示序号类型
- type = 1
- type = a
- type = A
- type = i
- type = I

无序列表：ul

一个常用属性type
- type = circle 表示空心圆圈
- type = disc 表示实心圆
- type = square 表示实心正方形

实例如下：

3.6 超链接标签 <a>...</a>

超链接标签的常用属性：

href：链接的URL地址
target：打开链接文件的形式
- 两个常用属性：_self 在当前窗口直接打开；
- _blamk 新建窗口打开
超链接的使用场景：

跳转到指定文件
作锚链接使用

           1)、在同一页面中使用锚链接
               a、打锚点：跳转标记
               超链接的name属性 <a name="锚点(标记)名称">...</a>
               b、进行跳转链接
<a href="#锚点(标记)名称">开始跳转</a>
           2)、在不同页面中使用锚链接
               a、打锚点：跳转标记
               超链接的name属性 <a name="锚点名称">...</a>
               b、进行跳转链接
                   <a href="连接的资源文件#锚点(标记)名称">开始跳转</a>

3.7 图片标签：<img />

常用属性：

src = 图片文件路径
width 宽度（width的值可以为百分比如：width = “100%”，也可以是像素，如width = “100px”）
height 高度（值的类型同上）
border 边框（值一般为像素，如1px）
alt 替代文本(当图片失效/打不开的时候起作用，打不开图片时显示文本替代图片)
title 当鼠标在图片上悬停的时候，显示的内容

举个例子：

我把图片文件删除，打不开文件时，alt起作用，将图片替换为指定的值（打不开文件title也能起作用）：

当能打开图片，鼠标悬停的时候，title的值起作用：

3.8 表格标签 <table>

表格标签的几个常用属性：

border 边框
width
height
align 对其方式（这个属性也可以用在 tr 上，指定每个单元格中内容的对齐方式）

行标签：tr
单元格标签：td
表头标签： th 可以自动加粗居中

单元格的合并：
合并列：colspan
合并行：rowspan
表格标签的作用：对网页进行页面布局（现在多用css+div）

使用案例：

表格操作：

合并单元格操作：

表格拆分操作：

表格拆分：通常将表格拆分为3部分：

头 thead
体 tbody
脚 tfoot

作用：在后面部分的js中做一些业务处理，如让表格隔行变色等操作

A__B__C__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习篇01

目录一、HTML简介：二、HTML的编辑器三、HTML基础语法及基本标签3.1 标题标签： ……（文本内容） n表示数字1-63.2 段落标签3.3 文本其他常见标签3.4 块标签和行内标签3.5 列表标签3.6 超链接标签 ...3.7 图片标签：一、HTML简介：HTML是用来写网页的一种语言。浏览器通过读取HTML文档，然后将文...
复制链接

扫一扫