【学习笔记】HTML入门
作者：互联网
【学习笔记】HTML入门
网页基本信息
-
在html中注释
-
方式是<!-- -->
-
快捷键：ctlr + /
-
-
DOCTYPE：告诉浏览器，我们使用的规范，默认是html5
-
html标签，我们所有的代码必须在这个标签中，否则无效
-
title标签是网页的标题
-
meta标签是描述性标签，用来描述我们网站的一些信息，一般用来做SEO
-
seo是搜索引擎优化，我们可以在meta中定义keywords，这样用户就能通过这写关键字搜索到我们的网站
-
网页基本标签
-
标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>标签从一级到六级，从六级之后就没有了，往后就是普通文本
-
段落标签 <p>
<p>第一段，一一一一一一一一一 一一一一一一一</p>
<p>第二段，二二二二二二二二二 二二二二二二二</p>
<p>第三段，三三三三三三 三三三</p>
<p>第四段，四四四四四四 四四</p>
<p>第五段，五五五五五五五五 五五五五五五五五</p>
-
换行标签
第一段，一一一一一一一一一 一一一一一一一</br>
第二段，二二二二二二二二二 二二二二二二二</br>
第三段，三三三三三三 三三三</br>
第四段，四四四四四四 四四</br>
第五段，五五五五五五五五 五五五五五五五五</br>
换行标签比段落标签要紧凑
-
水平线标签 <hr/>
-
字体样式标签
-
粗体：<strong></strong>
-
斜体：<em></em>
-
-
特殊符号
-
空格： ；
-
大于号：> ;
-
小于号：<；
空 格
-
可以先输入一个&，然后再去选则自己想要的符号
图片标签<img>
-
属性：
-
src：图片路径，推荐使用相对路径 【必填】
-
alt：如果图片没有加载出来，就显示这个文字 【必填】
-
title：悬停文字，当鼠标悬停在这张图片上时，显示的文字
-
width：设置图片的宽度
-
height：设置图片的高度
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../resources/image/spring1.png" alt="图片1" title="悬停文字" width="300" height="300">
</body>
</html>
超链接标签<a></a>
-
属性：
-
herf：表示要跳转到那个页面 【必填】
-
target：表示窗口在哪里打开
-
_blank :在新标签中打开
-
_self：在当前网页打开
-
-
-
可以在a标签中嵌套一个图片标签，点击图片就会跳转
<body>
<a href="http://www.baidu.com">跳转到百度</a>
<a href="1.我的第一个网页.html" target="_blank">跳转到网页一</a>
<a href="http://www.baidu.com" target="_blank">
<img src="../resources/image/spring1.png" alt="图片1" title="悬停文字" width="300" height="300">
</a>
</body>
-
锚标签
-
需要一个锚标记，要有name属性
-
跳转标签中，herf属性是 # + 要跳转的位置的name
-
<a name="top">顶部</a>
.
.
.
<a href="#top">回到顶部</a>现在name属性已经废弃，可以用id属性来代替name属性
除了一个页面间的锚标记，页面之间也可以通过锚标记跳转
<a href="超链接标签.html#down">跳转到页面4的底部</a><a id="down">底部</a>
-
功能性链接
-
邮件链接：mailto：
-
qq链接：在qq推广的官网，可以生成qq的超链接
-
行内元素和块元素
-
块元素：
-
无论内容多少，该元素独占一行
-
（p、h1-h6）
-
-
行内元素：
-
内容撑开宽度，左右都是行内元素的可以排成一行
-
（a、strong、em）
-
列表
-
有序列表<ol>,里面的每一项用<li>
<ol>
<li>java</li>
<li>python</li>
<li>c</li>
</ol>
-
无序列表<ul>,里面的每一项用<li>
-
自定义列表，可以有表头
-
< dl > ：表示自定义列表
-
< dt >：表示表头
-
< dd >：表示每一项内容
-
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>c</dd>
<dt>城市</dt>
<dd>北京</dd>
<dd>上海</dd>
</dl>
表格
标签<table>
在table中，行用<tr>，列用<td>
table中有一个属性是border，用来设置表格的边框的大小
跨列：在td中，有属性叫做colspan，设置成几就是跨几列
跨行：在td中，有属性叫做rowsapn，设置成几就是跨几行
<table border="1px">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">狂神</td>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">秦将</td>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
</table>
标签：一一,入门,四四,标签,五五,笔记,HTML,nbsp,跳转 来源： https://www.cnblogs.com/wztblogs/p/16685790.html