html学习笔记_html5学习笔记-CSDN博客

本文链接：https://blog.csdn.net/q982151756/article/details/79278497

一、html的规范

1、一个html文件开始标签和结束标签<html> </html>
2、html包含两部分内容

<head>设置相关信息</head>
<body>显示在页面上的内容</body>

3、html标签有开始标签，也必须要有结束标签。
4、html标签不区分大小写
5、有些标签没有结束标签，比如<br>换行标签，这时我们需要在标签内结束，可以这样写<br/>。

二、body中的常用标签

1、文字标签
<font></font>属性有：size、color
color属性推荐使用十六进制表示法表示

2、注释标签

注释内内容不会显示在页面中，但是会出现在源代码中。

3、标题标签
<h1>标题内容</h1> 、<h2>标题内容</h2>、…….<h6>标题内容</h6>
从1~6标题字体越来越小，标题标签自动换行

4、水平线标签
<hr/>属性有：size、color

5、特殊字符标签
想要在页面上显示这样的内容：<html>:是网页的开始
我们会发现不能直接在标签中写这句话，这时候就需要对特殊字符进行转义
这里列举一些转义字符：

<：<
>：>
空格： 
&：&
"："

6、列表标签
<dl>表示列表的范围</dl>
<dt>主内容</dt>
<dd>附属内容</dd>
这里的标签不太好理解，所以写一个例子：

<dl>
    <dt>水果</dt>
    <dd>西瓜</dd>
    <dd>橘子</dd>
</dl>

这里写图片描述
7、有序列表标签
<ol>表示列表的范围</ol>属性：type可以控制有序列表的样式
<li>主内容</li>
例子：

<ol>
    <li>西瓜</li>
    <li>橘子</li>
</ol>

这里写图片描述
同样的还有无序列表的标签，写法和有序的是一样的：
<ul>表示列表的范围</ul>属性：type可以控制无序列表的样式
<li>主内容</li>

8、图像标签
<img src="图片路径"/>属性有：src图片的路径、width图片的宽度、height图片的高度、alt图片路径错误后显示的解释文字
这里把路径重点介绍一下，路径分为绝对路径和相对路径：
绝对路径：
从盘符开始到文件所在目录的路径为绝对路径，或者网络路径，例如：
c:\Users\img\a.jpg
http://www.baidu.com/b.jpg
相对路径：
一个文件相对于另一个文件的位置，分为三种：
（1）html文件和图片在一个路径下，可以直接写文件名称，例如：<img src="a.jpg/>"
（2）图片在html的下层目录，例如：
C:\User\aa.html：html文件
C:\Users\img\a.jpg：图片文件
<img src="img\a.jpg"/>
（3）图片在html文件的上层目录，例如：
C:\User\html\aa.html：html文件
C:\Users\a.jpg：图片文件
../：表示上层路径
<img src="../a.jpg"/>

9、超链接标签
链接资源：
<a href="链接到资源的路径">显示在页面上的内容</a>" 属性有：
href：链接到资源的路径，如果那也不跳转的话可以设置为href="#"。

target：设置打开方式，默认是在本页面打开，可以设置为—_blank在新窗口打开，_self在本页面打开。
定位资源：
如果想要定位资源，需要定义一个位置
<a name="top">顶部</a>
回到这个位置
<a href="#top">回到顶部</a>

10、原样输出标签
<pre>需要原样输出的内容</pre>

11、表格标签
<table>表格的范围</table>属性：
border：表格线的粗细
bordercolor：表格线的颜色
cellspacing：单元格直接的距离
width：表格的宽度
height：表格的高度

<tr>行标签</tr>属性：
align：设置对齐方式，可以设置为left、crnter、right。

<td>单元格</td>属性：
align：设置对齐方式，可以设置为left、crnter、right。
colspan：跨列。
rowspan：跨行。

<caption>标题内容</caption>

我们使用<th></th>也可以表示单元格，可以实现居中和加粗。

例子：

<table border="1" width="500px">
    <tr><td colspan="3">1</td>
    <tr><td>4</td><td>5</td><td rowspan="2">6</td></tr>
    <tr><td>7</td><td>8</td></tr>
</table>

这里写图片描述

12、表单标签
因为表单标签比较复杂，但是又非常重要，本人已经学过java web的一部分内容，所以有些知识我自己明白，但是我的语言组织能力有限，讲的不是很清楚，所以如果看的不是很明白，可以自行百度。
<from>定义一个表单的范围</from>属性：
action：提交到的地址
method：表单的提交方式，一般为get和post

一般输入项：
<input type="bbb"/>属性：

type：见下面

name：用于描述提交的内容的属性，比如你提交的是手机号，那么可以name="phone"。

bbb可以为：
text：输入框
password：密码输入框
radio：单选输入，需要加name来表示选项
checkbox：多选输入，需要加name来表示选项
file：文件输入
hidden：隐藏项，不会显示在页面上
submit：提交按钮
reset：重置按钮
button：普通按钮，和javascript一起使用
下拉输入项：

<select name="birth">
    <option value="0">请选择</option>
    <option value="1991">1991</option>
    <option value="1992">1992</option>
    <option value="1993">1993</option>
</select>

文本域：
<textarea cols="宽度" rows="高度"></textarea>
使用图片做提交按钮
<input type="img" src="图片路径"/>

三、head中常用的标签

1、title：表示在标签页上显示的内容
2、<meta>：设置页面的一些相关的内容，比如
<meta http-equiv="refresh" content="跳转的倒计时;url=跳转的地址" />这个可以实现页面的定时跳转
3、<base>：设置超链接标签，比如：
<base target="_blank/>"这样所有的超链接标签都是新页面打开。
4、<link>：引入外部的文件

html中的标签是非常多的，我列举的只是比较常用的标签，其他的标签都可以很轻松的百度到，学习html主要还是靠练，多写几个页面自然就会了。