一、HTML:Hyper Text Markup Language:超文本标记语言
他可以对字体,视频,音频进行标记
注意:我们的html语言中:表格中是没有列的概念的,列的概念是通过单元格来实现的
1.html文本标签
成对出现的标签–》有标签体的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html的文本标签</title>
<style>
</style>
</head>
<body>
<!--
作者:offline
时间:2019-04-01
描述:标题标签
-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--段落标签:p标签-->
<p>床前明月光</p>
<p>疑似地上霜</p>
<!--水平线标签-->
<!--原样输出:pre-->
<pre>
你好
你好
你好
你好
</pre>
<!--滚动标签:marquee
属性:behavior指定当前的滚动方式
属性值:alternate 来回滚动
scroll 交替滚动
slide:滚动某一边停止
属性 :scrollamount 滚动速度:指定整数值
属性:direction 滚动方式:left right up down
属性:bgcolor--背景色->html标签的属性
backgound-color->CSS样式属性
-->
<!--引用标签
q标签:大引用 效果展示:"内容"
blockquote:段落缩进标签——>小引用
-->
<p>第一章内容</p>
<q>解释说明第一章内容</q>
<blockquote>解释某个内容</blockquote>
<!--展示效果字体倾斜的效果-->
<address>重庆市垫江县</address>
<code>java语言是目前流行的语言</code>
<!--换行标签:注意换行标签是一个单标签-->
<br/>
<!--
上下标签 sup 和 sub
转义字符: 相当于两个空格
-->
数学公式:x^2 x<sup>2</sup>
<br/>
化学公式:CO2 CO<sub>2</sub>
<!--
列表标签
无序列表 和 有序列表
ul li ol lo
ul和ol中都有默认属性type:指定当前的列表项类型
比如: ul type="disc" circle square
-->
您喜欢的明星?
<ul type="square">
<li>l</li>
<li>o</li>
</ul>
喜欢的水果?
<ol>
<li>苹果</li>
<li>香蕉</li>
</ol>
<br />
<!--行内标签span/div
注意:div是占一行的标签
-->
<!--字体标签-->
<font color="aliceblue">字体标签</font>
<!--居中标签-->
<center><h1>标题1</h1></center>
<!--
斜体标签 i em
后者em标签是带一种语义的,即是一种强调
注意:在一般情况下如果没有需要强调我们一般使用i标签
-->
<!--粗体标签
b strong
后者标签:是一种强调,带“语义”
-->
</body>
</html>
2.图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像标签</title>
<!--img标签
属性:src->引入当前图片的一个url
属性:width/height 宽度/高度(可以指定像素px,也可以执行百分比)
alt“替代文本:当图片失效的时候来解释图片的文字
align:图片对齐的方式
src:属性 通过js方式来操作img的是如此属性改变图片
-->
</head>
<body>
<img alt="搞笑图片" src="url" height="500px" width="300px" />
</body>
</html>
3.表格标签
【重点】为什么要进行表格拆分?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
<!--表格标签:
table 表格标签
tr:行
td:单元格
th:表头
属性:border-》边框线
属性:width/height
背景色:bgcolor
对其方式:align边框线之间的距离
属性:cellspacing-》单元格边沿和
cellpadding:内边距-》单元格边缘与内容之间的距离
单元格的合并:
行合并:rowspan
列合并: cospan
表格标签:默认拆分
thread:头
tbody:体
tfoot:脚table标签,将table标签中的每一行的内容用tbody包含起来,荣用户体验更好
<!--css样式-->
<style>
/*标签选择器*/
tr{
/*文本左右对齐方式*/
text-align:center;
}
</style>
</head>
<body>
<table>
<!--表格的标题标签-->
<capton>学生信息表</capton>
<tr>
<th>序号</th>
<th>姓名</th>
<th>学号</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>01</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>02</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>03</td>
</tr>
</table>
</body>
</html>
4.表单标签
【重点】表单的作用是什么?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
<!--
作者:offline
时间:2019-04-01
描述:表单的作用
-->
</head>
<body>
<form>
<!--input有一个属性h5
placeholder:给当前的表单项中提供一个默认值
-->
用户名:<input type="text" placeholder="请输入用户名"/>
</form>
</body>
</html>
5.超链接标签