HTML基础 20190527

今天学习了HTML基础内容:包括注释的使用方法、快捷键等,基本标签的使用、标签嵌套,表格标签的使用,对表格内容进行调整的标签的使用方法。

<!DOCTYPE html><!--声明 html-->
<html>
<head>
<meta charset="UTF-8"><!--定义网页中一些基本信息,字符集等。-->
<!--定义网页中的一些基本的信息-->
<!--<meta charset="UTF-8">-->
<!--charset 编码字符集-->
<!--UTF-8 万国码

gb2312 中国标准第2312条 中文,韩文....大部分的亚裔语言(繁体字不支持)
GBK 在上面的基础之上扩展 可以支持繁体字
unicode 使内存变大
UTF-8-->
<title>表格</title>
</head>
<body>

<!--浏览器只有5个(五大浏览器)
IE
谷歌
火狐
苹果
欧朋-->


1.行内标签(标记,元素,节点(js中的叫法))
在一行中显示,只有当这一行显示不下的时候才会出现换行
不能设置元素的宽和高,宽和高由内容来撑起来的
行内块标签:在一行中显示,并且可以设置宽和高

2.块级标签
自己独占一行
可以宽和高

<i>这是一段文本</i>
<s>这是一段文本</s>
<u>这是一段文本</u>
<b>这是一段文本</b>
<font color="green" size="7">文字标签</font>
<i><s><u><b><font color="red" size="7">这是一个多样式的文本</font></b></u></s></i>


<div>这个是div标签</div>
<p>这个是段落标签</p>
<h1>标题标签1</h1>
<h2>标题标签2</h2>
<h6>标题标签6</h6>


<h1>这个是一段文本</h1>
<b><font size="6">这个是一段文本</font></b>

<!--注释的快捷键
选择内容 ctrl+/
-->

<!--所有的连在一起的空格和换行都只会被解析成一个空格-->

<!--转义字符
&nbsp; 空格
&lt; <
&gt; >
&copy; 版权符

<br /> 单标签 表示换行
-->

<!-- 注释的内容
注释是给开发人员看的,不是给用户看的。在浏览器中,碰到注释会跳过,不会去解析他
注释里面不要嵌套注释
-->

<!--双标签-->
<!--<html 属性名="属性值 " 属性名2="属性值2"></html>
<html>
<head></head>
</html>-->
<!--单标签-->
<!--<meta 属性名="属性值 " 属性名2="属性值2"/>-->

<!--表格一定是工整的-->
<table align="center" cellpadding="10px" cellspacing="0" border="1px">
<!--cellpadding 这个是单元格里面的内容距离单元格边框的距离-->
<!--cellspacing 这个是单元格与单元格之间的距离-->
<!--一般情况下设置了这两个属性以后就不会去设置table的width和height-->
<caption>学生信息表</caption><!--表格标题 可省略-->
<thead><!--表格头部 可省略-->
<tr><!--行标签-->
<!--写了一个tr就表示一行-->
<th>姓名</th><!--th表头主要内容 有居中,加粗效果-->
<th>学号</th>
<th>班级</th>
<th>寝室号</th>
</tr>
</thead>
<tbody><!--表格主体 可省略-->
<tr valign="top">
<td colspan="2">张三</td><!--单元格,列-->
<!--写了一个td就表示一个单元格,第一行有多少个单元格,第二行就必须有多少个-->
<!--colspan=“2” 跨2列,把对应的列删除-->
<!--<td>14</td>--><!--删除对应的列-->
<td>4</td>
<td>5</td>
</tr>
<tr valign="bottom">
<td rowspan="2">李四</td><!--单元格,列-->
<!--rowspan="2" 跨2行 ,把对应的行删除-->
<td>77</td>
<td>6</td>
<td>5</td>
</tr>
<tr valign="middle">
<!--<td align="right">嘻嘻</td>单元格,列--><!--删除对应的行-->
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2" colspan="2"></td>
<!--<td></td>-->
<td></td>
<td></td>
</tr>
<tr>
<!--<td></td>-->
<!--<td></td>-->
<td></td>
<td></td>
</tr>
</tbody>


</table>
</body>
</html>

原文地址:https://www.cnblogs.com/ddrr123/p/10931998.html