HTML常用标签

╰+攻爆jí腚メ 2022-02-23 04:04 322阅读 0赞

## HTML ##

HTML:全称Hyper Text  Markup Language超文本标记语言，
    		  可以标记字体颜色、视频、音频等。
    标准结构：
    	<html>
    		<head>    //头标签：主要指定当前网页的编码格式以及当前窗口标题
    			<title></title>    //当前窗口标题
    		</head>
    			<body>
    			</body>    //当前html页面在浏览器中显示的内容
    	</html>

html是一个结构不严谨的语言，标签不区分大小写，而xml（可扩展性的标记语言），结构严谨，本身用来替代html语言，但没有替代成功，有自己的结构要求！

快捷键：alt+/:代码提示  
ctrl+shilft+R：复制行  
ctrl+shilft+/：html注释

## HTML常见标签 ##

#### 1.文本标签 ####

！DOCTYPE:指定当前文档声明：告诉浏览器当前html使用的版本；  
meta标签：指定当前编码格式

*  标题标签：h1~h6
 *  段落标签：p
 *  段落缩进标签：blockquote
 *  加粗标签：b 或 strong(带强调等语义)
 *  斜体标签：i 或 em
 *  水平线标签：hr
 *  换行标签：br
 *  原样输出标签：pre — 将当前文本格式直接显示出来
 *  上下标标签：sup 和 sub
 *  滚动标签：marquee  
    – 属性：behavior  
    – 属性值：  
    alternate:来回滚动  
    scroll：交替滚动  
    slide：滚动一次，默认从右到左
 *  块标签：div
 *  行内标签：span

#### 2.列表标签 ####

*  有序列表

您的爱好：
    <ul>
    	<li>篮球</li>
    	<li>足球</li>
    	<li>排球</li>
    </ul>
    //  type属性：无序列表的类型
    disc：默认的
    circle：空心圆点
    square：小正方形

*  无序列表

您喜欢的明星有哪些：
    <ol>
    	<li>陈奕迅</li>
    	<li>高圆圆</li>
    	<li>林宥嘉</li>
    </ol>
    //  type属性：指定有序列表的类型

#### 3.超链接标签：a ####

属性：href：链接的URL地址
    target：打开链接文件的方式
    	- _self：当前窗口直接打开
    	- _blank：新建窗口打开
    	
    常见的协议：
    file：//本地文件协议
    http：//http协议（在当前本地找对应的hosts文件，找到了直接打开，
    找不到就调用网卡联网操作，中间DNS服务器找）
    jdbc：//mysql：//数据库名称
    thunder：//迅雷协议
    email：邮件协议
    
    
    超链接的使用场景：
    1.跳转到指定的文件：普通使用
    2.作锚链接使用
    	- 在同一页面中使用锚链接
    			a)打锚点：跳转标记
    				<a name = "锚点（标记）名称"></a>
    			b)进行跳转链接：
    				<a href = "#锚点（标记）名称">开始跳转</a>
    	- 在不同页面中使用锚链接
    			a)打锚点：跳转标记
    				<a name = "锚点（标记）名称"></a>
    			b)进行跳转链接：
    				<a href = "链接的资源文件#锚点（标记）名称">开始跳转</a>

#### 4.图像标签：img ####

属性：
    src：连接图片资源    ../：回退上一级目录
    alt：替代文本（当图片文件失效时起作用）
    title：当鼠标悬停的时候，title起作用

#### 5.表格标签：table ####

行标签：tr
    列标签：td
    表头标签：th -- 自动加粗 居中显示
    
    属性：
    border：边框线大小
    width：表格的宽度
    height：表格的高度
    align：对齐方式
    bgcolor：背景色
    colspan：列合并
    rowspan：行合并

#### 6.表格拆分（在后面js会业务处理） ####

——解决用户体验性问题  
thead：头  
tbody：体  
tfoot：脚