HTML --- 简单的标签
2021-06-17 20:05
YPE >
标签：序列 oldboy 结构 css 元素 产生 效果 char ble
HTML --- 简单的标签
html概述和基本结构
html概述
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
HTML 使用标记标签来描述网页
html基本结构
一个html的基本结构如下：
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>网页标题title>
head>
body>
网页显示内容
body>
html>
第一行是文档声明，
声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是‘lang="zh-CN"‘,不定义也没什么影响，它一般作为分析统计用。 “
”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。html标签格式
html文档规范
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
标签的语法：
内容部分标签名>
html注释：
1
内常用标签
标签
meta介绍
元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
1 meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> 2 3 meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">
(2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
1 meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) 2 3 meta http-equiv="content-Type" charset=UTF8"> 4 5 meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
非meta标签
1 title>oldboytitle> 2 link rel="icon" href="http://www.jd.com/favicon.ico"> 3 link rel="stylesheet" href="css.css"> 4 script src="hello.js">script>
内常用标签
1 hn>: n的取值范围是1~6; 从大到小. 用来表示标题. 2 3 p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. 4 5 b> strong>: 加粗标签. 6 7 strike>: 为文字加上一条中线. 8 9 em>: 文字变成斜体. 10 11 sup>和sub>: 上角标 和 下角表. 12 13 br>:换行. 14 15 hr>:水平线 16 17 特殊字符： 18 < >；"；©®
html块
：
： 表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
html图像
1 img src="images/pic.jpg" alt="产品图片" />
超链接标签(锚标签)
标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。
1 a href="#">a> 2 a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客a> 3 a href="2.html">测试页面2a>
定义页面内滚动跳转
页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。
1 a href="#mao1">标题一a> 2 ...... 3 ...... 4 h3 id="mao1">跳转到的标题h3>
html列表
有序列表
在网页上定义一个有编号的内容列表可以用
- 、
- 配合使用来实现，代码如下：
1 ol> 2 li>列表文字一li> 3 li>列表文字二li> 4 li>列表文字三li> 5 ol>
在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。
无序列表
在网页上定义一个无编号的内容列表可以用
- 、
- 配合使用来实现，代码如下：
1 ul> 2 li>列表文字一li> 3 li>列表文字二li> 4 li>列表文字三li> 5 ul>
在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
定义列表
定义列表通常用于术语的定义。
- 标签表示列表的整体。
- 标签定义术语的题目。
- 标签是术语的解释。一个
- 中可以有多个题目和解释，代码如下：
1 h3>前端三大块h3> 2 dl> 3 dt>htmldt> 4 dd>负责页面的结构dd> 5 6 dt>cssdt> 7 dd>负责页面的表现dd> 8 9 dt>javascriptdt> 10 dd>负责页面的行为dd> 11 12 dl>
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 设置单元格垂直合并
传统布局：
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：
1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0
2、单元格里面嵌套表格
3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
4、通过属性或者css样式设置单元格中元素的样式
HTML --- 简单的标签
标签：序列 oldboy 结构 css 元素 产生 效果 char ble
原文地址：http://www.cnblogs.com/alwaysInMe/p/7265024.html
- 配合使用来实现，代码如下：