html知识总结
1. html文档结构
注释 <!--注释-->
<html>
<head></head>:都不是给用户看的 主要是给浏览器看的一些配置信息
<body></body>:body书写的所有的内容 都是给用户看的
</html>
1.1 head内常用标签
title 定义网页标题信息
style 内部支持直接书写css代码
link 引入外部css文件
script 内部可以书写js代码并且也可以引入外部js文件
meta 定义网页源信息
1.2 body内常用标签
1.2.1 标题标签
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
1.2.2 水平分割线
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
1.2.3 段落标签
注意
: 如果在不产生一个新段落的情况下进行换行(新行),请使用
标签
<p>这个<br>段落<br>演示了分行的效果</p>
1.2.4 超链接标签
<a href='' target=''></a>
href
1.可以放一个url点击自动跳转
2.还可以放其他标签的id值 锚点功能
target
控制是否在当前页跳转
_self
_blank
1.2.5 图片标签
<img src='' alt='' title='' height='' width=''/>
src
1.可以放图片的路径 本地或者线上
2.还可以放一个url 会自动朝该url提交get请求获取图片数据展示
alt
图片加载不出来的时候 展示的提示信息
title
鼠标悬浮在图片上之后展示的提醒信息
height、width
单独调整某一个 另外一个会自动等比例缩放
如果两个都调整了 可能会出现图片的失真
1.2.6 表格标签
注意
:table定义表格, tr表示行, td表示一个数据单元格,数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等
<!--第一种-->
<table border="2">
<tr>
<td>row 1, cell 1</td> <!-- 第一行,第一列(第一格)-->
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<!--第二种-->
<table>
<thead>
<tr> 一个tr就表示一行
<th>username</th> 加粗文本
<td>username</td> 正常文本
</tr>
</thead> 表头(字段信息)
<tbody>
<tr>
<td>wesley</td>
<td>123456</td>
<td>playgame</td>
</tr>
</tbody> 表单(数据信息)
</table>
1.2.7 列表标签
<!--无序列表-->
<ul>
<li>cat</li>
<li>dog</li>
</ul>
<!--有序列表-->
<ol>
<li>cat</li>
<li>dog</li>
</ol>
1.2.8 表单标签
- 因内容较为重要且比较多,写去另一博客点这里
1.3 标签分类
"""
分类1:
双标签
<h1></h1>
单标签
<img/>
分类2:
块儿级标签:独占一行 可以设置长宽
div p
注意:块儿级标签内部可以嵌套任意的行内标签和块儿级标签
但是p标签只能嵌套行内标签
行内标签:自身文本多大就占多大 不能设置长宽
span a img
PS:上述的规定只是HTML书写规范 如果你不遵循 不会报错,浏览器会自动帮你解除嵌套关系
"""
1.4 特殊字符
空格
大于 >
小于 <
&
®
©
¥