Html简介基本标签的使用

灰太狼 2022-01-28 01:59 270阅读 0赞

**一、Html简介**  
全写： HyperText Mark-up Language  
译名： 超文件注标式语言（译名之一），超文本：文本，图片，音频，视频…，标注也就所谓：记号，标志，HTML：编写网页的标准，语言主要有：java.python.程序语言(也就是代码)。  
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。  
HTML 是在 SGML 定义下的一个描述性语言，或可说 HTML 是 SGML 的一个应用程式，HTML 不是程式语言，如 C++ 和Java 之 类，它只是标示语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML,HTML 的格式非常简单，只是由文字及标记组合而 成,于编辑方面，任何文字编辑器都可以，只要能将文件另存成 ASCII 纯文字格式即可，当然 以专业的网页编辑软件为佳。  
**二、Html标记的含义**：（告诉浏览器，用什么(图片)格式来翻译 ）  
`<head></head>`:告诉浏览器，网页用什么字符集  
`<title></title>`:中只能写纯文本  
`<body></body>`:网页中99%内容在body中，只要放在body中，最终浏览器才能翻 译出来  
`<body>`常用属性( bgColor：网页背景色 background：网页背景图片地址 )  
**三、Html标记的写法**

*    
    
 *  任何标记皆由"<“及”>“所围住，如
 *    
    
 *  标记名与小于号之间不能留有空白字符。
 *    
    
 *  某些标记　要加上参数，某些则不必。如 Hello
 *    
    
 *  参数只可加于起始标记中。
 *    
    
 *  在起始标记之标记名前加上符号”/"便是其终结标记，如
 *    
    
 *  标记字母大小写皆可。
 *

**四、Html使用过程**  
主要过程：  
1.新建一个项目  
2.点击这个项目  
css：层叠样式表资源文件夹  
img:存放图片  
js：存放js的文件  
index.html：首页  
.html:代表的是网页的后缀名;.htm  
**五、Html基本标签**（单标/双标）  
主要格式：<标签 属性 1=“值1” 属性 2=“值2”></标签>  
**1、Html文本修饰标记：**  
`<b></b>`：加粗 bold。  
`<i></i>`：斜体 italic。  
`<u> </u>`:下划线underline。  
`<s></s>`：删除线 strike。  
`<sup></sup>`：上标。  
`<sub></sub>`：下标。  
`<font></font>`：表示字体标记，主要属性有：size:文本大小，取值1-7，慢慢变大color:颜色值。Face：字体  
**2、Html排版标记:**  
`<p></p`>表示一个段落。  
常用属性：align：水平对齐方式，取值：left(左)、 center(居中)、 right(右）  
**3、水平线标记（单边标记）：**  
`<hr>`属性：size：水平线的粗细，单位一般为 px。color：水平线的颜色。 width：水平线的宽度。 noshade：去掉水平线的阴影(在 HTML 中，noshade 是没有值的属性)  
**4、标题标记：**  
`<h1>……<h6>` 功能：定义各种标题。属性：align 水平对齐方式，取值：left，center，right。  
**5、`<div>`和`<span>`标记**  
`<div>`和 `<span>`都是是没有任何意义的标记，但是，又是使用最多的标记。  
`<div>`和 `<span>`一般要与 CSS 配合使用。  
`<div>`是一个块元素而 `<span>`是一个行内元素。  
(1)、块元素：一般是单独占一行，不管内容多少，总是占一行。主要有 `<div>`、 `<p>`、 `<h1>`、 `<h2>`、 `<pre>`等。  
(2)、行内元素： 行内元素，不会单独占一行。行内元素的宽度，主要是根据内容决定。 多个行内元素，会排在同一行。行内元素主 要有 `<font>、<b>、<i>、<u>、<sub>、<sup>`等。  
注意：在标记嵌套时，一般是块元素中嵌套行内元素。  
**6、HTML字符实体（用时可查）**  
空格：代表一个半角空格。

空格： 代表一个半角空格.
     <：<
     >：>
     &：&
     ￥：¥
     ×：×
     ÷：÷

**7、HTML项目符号(无序列表)**  
**去除列表前面图标:list-style:none**

`<ul>`属性：  
type:项目符号的类型，取值：disc(小黑点)、circle(空心圆)、square(实心方块)  
**8、HTML编号列表(有序列表)**

`<ol>`属性：  
type：编号类型，取值：1、a、A、i、I  
start：从第几个开始编号(数字)  
**9、滚动字幕标记`<marquee>`格式：**

<marquee>滚动的内容</marquee>

属性：  
Direction：滚动方向，取值：up、down、left、right  
Width：滚动宽度  
Height：滚动高度  
bgColor：滚动背景色  
scrollAmount：滚动步长值。值越大，滚动越快.  
scrollDelay：两步之间的停留时间，以毫秒单位.  
loop：循环滚动的次数  
**10、预定义格式化标签:**

**11、换行标签：**

<br />

**12、表格**  
（1）

(2)

表格属性：  
border：表示的是表格的边框宽度  
align：设置元素的水平对齐方式  
valign：设置元素的垂直对齐方式  
cellspacing：设置单元格与单元格之间的距离  
cellpadding：设置单元格内容与单元格边框之间的距离  
rowspan：合并行  
colspan：合并列  
bgcolor：设置元素的背景颜色  
caption：表的标题  
&copy：版权符号  
**13、超链接标签**  
**去掉下划线:text-decoration:none**  
内容

属性：  
href：表示的是超链接链接的路径地址  
target：设置是否打开一个窗口  
锚点定位 （难点）  
通过创建锚点链接，用户能够快速定位到目标内容。 创建锚点链接分为两步：  
1.使用“a href=”\#id 名>“链接文本"创建链接文本。  
2.使用相应的 id 名标注跳转目标的位置。  
**14、图像标签**

**第一次写csdn，写的不好敬请谅解，大家可以评论出来我的不足。谢谢！！！！！！**