自我学习Day1:HTML入门
前言:由于之前就自学过配置环境，就不在记录了
Hellow world!
我的第一个标题
我的第一个段落。
：表示是h5文档
中文网页需要设置，有的浏览器（如360）设置gbk为默认，设置为
一、常用标签
1、标题
效果：变粗变大
我是一级标题
备注：等级分
——六个等级，越往下越小
2、段落
2、段落
效果：段落会自动换行，段落直接留有空格
我是一个段落标签
3、换行
效果：简单的开始新的一行，并不会如段落插入间距
备注：
也可以，但是建议写成
4、链接
效果：增加一个html链接
这是一个链接备注：1、支持外部或内部链接
2、无确定目标可用< a href="#">
3、如果地址是文件/压缩包，则会下载文件
4、id属性：先插入一个id
需要引导到的位置 在建立一个链接到id（id="tips"）
访问的链接也可以是跨网页链接
5、元素，
效果：只是装饰内容布局的，
块级元素
是大盒子一行只能有一个，如果与CSS使用可以对应样式属性，同时是页面布局常用。
内联元素小盒子可以多个
这是大盒子
这是小盒子 这是小盒子 这是小盒子
6、图片![]()
效果：定义图片
备注：src是![]()
必须属性，指定图片的路径和文件名
其他属性如下，格式为 key='value'格式
属性
属性值
说明
src
图片路径
必须属性
alt
文本
可替换文本，图片不能显示的文字
title
文本
提示文本，鼠标放图片上显示的文字
width
像素
宽
height
像素
高
border
像素
边框粗细
二、基础内容
1、路径
1.1绝对路径
通常指的是从盘符开始的路径，例“E:\server\test\logo.png”，"~\server\test\logo.png"
或者是完整的网络地址itcast.cn/images/logo.gif
1.2相对路径
分类
符号
说明
同级目录
同级，如
下级目录
/
下级，如
上级目录
../
上级，如![]()
2、特殊字符
三个常用的大于小于空格，其他的直接百度
字符
描述
字符代码
空格符
<
小于号
<
>
大于号
>
3、文本格式化
例：加粗文字
加粗文本
3.1文本格式化
标签
描述
加粗
着重
斜体
小号字
加重语气
下标字
上标字
插入字
删除字
3.2计算机输出
标签
描述
计算机代码
键盘码
计算机代码样本
小号字
加重语气
3.3引用，引文和标签定义
标签
描述
缩写
地址
文字方向
长引用
短引用
引用、引证
定义项目
4、头部
元素可以插入脚本(scripts)，样式文件(CSS)，meta信息，包括, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。</p>
<p> (<header>标签仅仅用于定义文档页眉介绍，不一样）</p>
<h4> 4.1<title></h4>
<p> 定义浏览器工具栏的标题、收藏夹中的标题、搜索引擎中的标题</p>
<h4> 4.2<meta></h4>
<p> <head>标签第一行主要作用：</p>
<p> 1、文档编码chrset</p>
<pre><code class="language-html"><meta chrset="utf-8"></code></pre>
<p> 2、搜索关键字description</p>
<pre><code class="language-html"><meta name="keywords" content="baidu,百度"</code></pre>
<p> 3、网页作者author</p>
<pre><code class="language-html"><meta name="author" content="爱丽数码"></code></pre>
<p> 4、网页描述description</p>
<pre><code class="language-html"><meta name="description" content="umamusume赛马娘，爱丽数码"></code></pre>
<h4> 4.3<script></h4>
<p> 加载脚本</p>
<h4> 4.4其他</h4>
<p> <base>：页面链接默认链接地址</p>
<p> <link> ：文档与外部资源关系，例如显示其他图片</p>
<pre><code class="language-html"><link rel="shortcut icon" href="图片url"></code></pre>
<p> <style> ：定义html样式</p>
<h3> 5、表格<table></h3>
<p> 1、定义</p>
<p><tr>为行，<td>为列内单元格，<table border=“1”>为边框大小为1，无边框改为<table></p>
<pre><code class="language-html"><h4>两行三列:</h4>
<table border="1">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table></code></pre>
<p>浏览器样式如下<a href="http://img.e-com-net.com/image/info8/d331bf6385e64fdf9fae75a41d267ffa.jpg" target="_blank"><img alt="" height="73" src="http://img.e-com-net.com/image/info8/d331bf6385e64fdf9fae75a41d267ffa.jpg" width="141"></a></p>
<p> 2、表头<th></p>
<p>可以把上方第一行内的<td></td>改为<th></th></p>
<pre><code class="language-html"><h4>两行三列:</h4>
<table border="1">
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table></code></pre>
<p> 3、合并单元格</p>
<p>跨列<td colspan=“2”>跨行<td rowspan=“2”>，同时有则用空格隔开，归属以左上角优先</p>
<p>例：一个向右跨两列的单元格<td colspan=“2”></p>
<pre><code class="language-html"> <tr>
<th colspan="2">时间\日期</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
</tr></code></pre>
<p> 4、常用属性</p>
<p>4.1<table></p>
<pre><code class="language-html">border="1" 表格边框的宽度
bordercolor="#fff" 表格边框的颜色
cellspacing="5" 单元格之间的间距
width="500" 表格的总宽度
height="100" 表格的总高度
align="right" 表格整体对齐方式 (参数有 left、center、right)
bgcolor="#fff" 表格整体的背景色</code></pre>
<p>4.2<tr></p>
<pre><code class="language-html">bgcolor="#fff" 行的颜色
align="right" 行内文字的水平对齐方式 (参数有left、center、right)
valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)</code></pre>
<p>4.3<td><th></p>
<pre><code class="language-html">width="500" 单元格的宽度，设置后对当前一列的单元格都有影响
height="100" 单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff" 单元格的背景色
align="right" 单元格文字的水平对齐方式 (参数left、center、right)
rowspan="3" 合并垂直水平方向的单元格
colspan="3" 合并水平方向单元格
valign="top" 单元格文字的垂直对齐方式 (参数middle、bottom、top) </code></pre>
<h4> 5、列表<ul><ol><dl></h4>
<p>5.1无序列表<ul>，用粗体圆点标记</p>
<p>例：</p>
<pre><code class="language-html"><ul>
<li>Coffee</li>
<li>Milk</li>
</ul> </code></pre>
<p> 5.2有序列表<ol>，用数字标记</p>
<p>例：</p>
<pre><code class="language-html"><ol>
<li>Coffee</li>
<li>Milk</li>
</ol> </code></pre>
<p>5.3自定义列表<dl>，每个自定义列表以<dt>开始，列表的定义项以<dd>开始</p>
<pre><code class="language-html"><dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> </code></pre>
<p><br></p>
<h2> 三、CSS</h2>
<h4> 1、定义：渲染</h4>
<h4> 2、引用</h4>
<p>2.1、内联：使用元素"style"属性</p>
<pre><code class="language-html"><p style="color:blue;margin-left:20px;">这是一个段落。</p></code></pre>
<p>2.2、内部样式表：<head>的<style>元素来包含CSS</p>
<pre><code class="language-html"> <head>
<title>百度
2.3、外部：使用CSS文件（推荐）
引用外部文件.css格式，例如style.css
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
然后再html里引入style.css文件
百度
百度
http://www.baidu.com/
或者是url路径
百度
百度
http://www.baidu.com/
备注：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。相比而言，前一种用的最多，稳定，加载快，兼容性强
3、样式实例和标签
标签
描述
background-color
背景颜色
font-family
字体
color
颜色
font-size
字体大小
text-align
文字对齐
一个段落。
参考：
1、HTML 教程 | 菜鸟教程
2、HTML标签大全 - 知乎
3、HTML中head标签是什么意思？一篇文章教你正确地使用head标签-html教程-PHP中文网
4、HTML引用CSS（4种方法）
效果：只是装饰内容布局的，
块级元素
是大盒子一行只能有一个，如果与CSS使用可以对应样式属性，同时是页面布局常用。
6、图片
, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。</p>
<p> (<header>标签仅仅用于定义文档页眉介绍，不一样）</p>
<h4> 4.1<title></h4>
<p> 定义浏览器工具栏的标题、收藏夹中的标题、搜索引擎中的标题</p>
<h4> 4.2<meta></h4>
<p> <head>标签第一行主要作用：</p>
<p> 1、文档编码chrset</p>
<pre><code class="language-html"><meta chrset="utf-8"></code></pre>
<p> 2、搜索关键字description</p>
<pre><code class="language-html"><meta name="keywords" content="baidu,百度"</code></pre>
<p> 3、网页作者author</p>
<pre><code class="language-html"><meta name="author" content="爱丽数码"></code></pre>
<p> 4、网页描述description</p>
<pre><code class="language-html"><meta name="description" content="umamusume赛马娘，爱丽数码"></code></pre>
<h4> 4.3<script></h4>
<p> 加载脚本</p>
<h4> 4.4其他</h4>
<p> <base>：页面链接默认链接地址</p>
<p> <link> ：文档与外部资源关系，例如显示其他图片</p>
<pre><code class="language-html"><link rel="shortcut icon" href="图片url"></code></pre>
<p> <style> ：定义html样式</p>
<h3> 5、表格<table></h3>
<p> 1、定义</p>
<p><tr>为行，<td>为列内单元格，<table border=“1”>为边框大小为1，无边框改为<table></p>
<pre><code class="language-html"><h4>两行三列:</h4>
<table border="1">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table></code></pre>
<p>浏览器样式如下<a href="http://img.e-com-net.com/image/info8/d331bf6385e64fdf9fae75a41d267ffa.jpg" target="_blank"><img alt="" height="73" src="http://img.e-com-net.com/image/info8/d331bf6385e64fdf9fae75a41d267ffa.jpg" width="141"></a></p>
<p> 2、表头<th></p>
<p>可以把上方第一行内的<td></td>改为<th></th></p>
<pre><code class="language-html"><h4>两行三列:</h4>
<table border="1">
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table></code></pre>
<p> 3、合并单元格</p>
<p>跨列<td colspan=“2”>跨行<td rowspan=“2”>，同时有则用空格隔开，归属以左上角优先</p>
<p>例：一个向右跨两列的单元格<td colspan=“2”></p>
<pre><code class="language-html"> <tr>
<th colspan="2">时间\日期</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
</tr></code></pre>
<p> 4、常用属性</p>
<p>4.1<table></p>
<pre><code class="language-html">border="1" 表格边框的宽度
bordercolor="#fff" 表格边框的颜色
cellspacing="5" 单元格之间的间距
width="500" 表格的总宽度
height="100" 表格的总高度
align="right" 表格整体对齐方式 (参数有 left、center、right)
bgcolor="#fff" 表格整体的背景色</code></pre>
<p>4.2<tr></p>
<pre><code class="language-html">bgcolor="#fff" 行的颜色
align="right" 行内文字的水平对齐方式 (参数有left、center、right)
valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)</code></pre>
<p>4.3<td><th></p>
<pre><code class="language-html">width="500" 单元格的宽度，设置后对当前一列的单元格都有影响
height="100" 单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff" 单元格的背景色
align="right" 单元格文字的水平对齐方式 (参数left、center、right)
rowspan="3" 合并垂直水平方向的单元格
colspan="3" 合并水平方向单元格
valign="top" 单元格文字的垂直对齐方式 (参数middle、bottom、top) </code></pre>
<h4> 5、列表<ul><ol><dl></h4>
<p>5.1无序列表<ul>，用粗体圆点标记</p>
<p>例：</p>
<pre><code class="language-html"><ul>
<li>Coffee</li>
<li>Milk</li>
</ul> </code></pre>
<p> 5.2有序列表<ol>，用数字标记</p>
<p>例：</p>
<pre><code class="language-html"><ol>
<li>Coffee</li>
<li>Milk</li>
</ol> </code></pre>
<p>5.3自定义列表<dl>，每个自定义列表以<dt>开始，列表的定义项以<dd>开始</p>
<pre><code class="language-html"><dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> </code></pre>
<p><br></p>
<h2> 三、CSS</h2>
<h4> 1、定义：渲染</h4>
<h4> 2、引用</h4>
<p>2.1、内联：使用元素"style"属性</p>
<pre><code class="language-html"><p style="color:blue;margin-left:20px;">这是一个段落。</p></code></pre>
<p>2.2、内部样式表：<head>的<style>元素来包含CSS</p>
<pre><code class="language-html"> <head>
<title>百度
内联元素小盒子可以多个
这是大盒子
这是小盒子 这是小盒子 这是小盒子 6、图片![]()
效果：定义图片
备注：src是必须属性，指定图片的路径和文件名
其他属性如下，格式为 key='value'格式
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 可替换文本，图片不能显示的文字 |
| title | 文本 | 提示文本，鼠标放图片上显示的文字 |
| width | 像素 | 宽 |
| height | 像素 | 高 |
| border | 像素 | 边框粗细 |
二、基础内容
1、路径
1.1绝对路径
通常指的是从盘符开始的路径，例“E:\server\test\logo.png”，"~\server\test\logo.png"
或者是完整的网络地址itcast.cn/images/logo.gif
1.2相对路径
| 分类 | 符号 | 说明 |
| 同级目录 | 同级，如 |
|
| 下级目录 | / | 下级，如 |
| 上级目录 | ../ | 上级，如 |
2、特殊字符
三个常用的大于小于空格，其他的直接百度
| 字符 | 描述 | 字符代码 |
| 空格符 | ||
| < | 小于号 | < |
| > | 大于号 | > |
3、文本格式化
例：加粗文字
加粗文本3.1文本格式化
| 标签 | 描述 |
| 加粗 | |
| 着重 | |
| 斜体 | |
| 小号字 | |
| 加重语气 | |
| 下标字 | |
| 上标字 | |
| 插入字 | |
| 删除字 |
3.2计算机输出
| 标签 | 描述 |
|
计算机代码 |
| 键盘码 | |
| 计算机代码样本 | |
| 小号字 | |
| 加重语气 |
3.3引用，引文和标签定义
| 标签 | 描述 |
| 缩写 | |
| 地址 | |
| 文字方向 | |
| 长引用 | |
| 短引用 | |
| 引用、引证 | |
| 定义项目 |
4、头部
元素可以插入脚本(scripts)，样式文件(CSS)，meta信息，包括
2.3、外部：使用CSS文件（推荐）
引用外部文件.css格式，例如style.css
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}然后再html里引入style.css文件
百度
百度
http://www.baidu.com/
或者是url路径
百度
百度
http://www.baidu.com/
备注：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。相比而言，前一种用的最多，稳定，加载快，兼容性强
3、样式实例和标签
| 标签 | 描述 |
| background-color | 背景颜色 |
| font-family | 字体 |
| color | 颜色 |
| font-size | 字体大小 |
| text-align | 文字对齐 |
一个段落。
参考：
1、HTML 教程 | 菜鸟教程
2、HTML标签大全 - 知乎
3、HTML中head标签是什么意思？一篇文章教你正确地使用head标签-html教程-PHP中文网
4、HTML引用CSS（4种方法）