HTML5 & CSS初学者教程（详细、通俗易懂）
<h1 id="前端语言基础html5--css">前端语言基础：HTML5 & CSS</h1><h3 id="一-html5超文本标记语言">(一) HTML5：超文本标记语言</h3>
<h4 id="1-基本概念">(1) 基本概念</h4>
<ul>
<li>是由一系列<strong>成对</strong>出现的<strong>元素标签</strong>（标记）嵌套组合而成 ( XML也是标签构成的 )</li>
<li>这些标签以<标签名称>的形式出现，用于标记文本内容的含义</li>
<li>浏览器通过元素标签解析文本内容并将结果显示在网页上，而<strong>元素标签本身并不会被浏览器显示出来</strong></li>
</ul>
<h4 id="2-基本结构">(2) 基本结构</h4>
<p>HTML5元素的内容一般以起始标签<strong><元素名></strong>开始，以结束标签<strong></元素名></strong>终止</p>
<pre><code class="language-html"><!Doctype html>
<html>
<head>
<title>网页标题</title>
......
</head>
<body>
主体内容
</body>
</html>
</code></pre>
<p><strong>DOCTYPE</strong>是<strong>Document Type</strong>的简写，含义为<strong>文档类型</strong>。</p>
<p>HTML5文档基础结构中第一行<strong></strong>就是<strong>HTML5的DOCTYPE声明</strong></p>
<p><code><html> </html></code>Html文件开始标签和结束的标签——<strong>文档的根标签</strong></p>
<p><code><head> </head></code> <strong>指定html文档的一些属性</strong>，例如<strong>页面标题</strong>，<strong>字符集</strong>和<strong>关键字</strong>等-</p>
<ul>
<li><code><title> </title></code>网页标题标签，即被收藏以及搜索引擎中搜索出的名称</li>
<li><code><meta.../></code> 元数据标签，不显示，但是机器可读，常用于搜索引擎索引(SEO优化)
<ul>
<li><strong>字符集声明</strong>（网页编码声明） <code><meta charset="utf-8"></code></li>
<li><strong>关键词声明</strong> <code><meta name="keywords" content="Xx,Xx,Xx" /></code></li>
<li><strong>页面描述声明</strong> <code><meta name="description" content="This is a page about html5" /></code></li>
</ul>
</li>
<li><code><style> </style></code>
<ul>
<li>可用于定义文档中指定区域的字体风格、背景颜色、对 齐方式等各类样式信息</li>
<li>Eg：<code><style> p{color:read} </style></code></li>
</ul>
</li>
<li><code><link.../></code>链接标签
<ul>
<li>标签用于连接外部资源和当前HTML5文档，它只出现在首部标签 <code><head> </head></code>中，通常用于<strong>连接外部样式表</strong></li>
<li>Eg：<code><head> <link rel="stylesheet" hred="test.css"/> </head></code></li>
</ul>
</li>
<li><code><script> </script></code>
<ul>
<li>此标签为可选，取决于当前页面是否需要使用脚本内容，比如JavaScript。该标签可以直接<strong>引用外部脚本文件</strong>，也可以直接将脚本命令写在<code><script> </script></code>标签中</li>
<li><code><head> <script src="test.js"></script> </head></code></li>
</ul>
</li>
</ul>
<p><code><body> </body> </code>显示在页面上的内容都写在body里面</p>
<h4 id="3-基本规范">(3) 基本规范</h4>
<ol>
<li>
<p>HTML5使用<code><!--...--></code>标签为文档进行注释 （多行或者单行）</p>
</li>
<li>
<p>早期的HTML规范中，标签的大小写是不敏感的，可能存在大写标签的情况</p>
<p>万维网联盟（W3C）明确规定了在新版本<strong>HTML5中必须使用小写格式</strong>，包括元素标签本身和其中可能出现的属性均需要遵守此规范</p>
</li>
<li>
<p>一些标签，没有结束标签 ，在标签内结束</p>
<ul>
<li>比如 换行<code><br/></code>（一般来说加上/更加标准）</li>
<li>XML规范中，所有的标签都必须有结束标签</li>
</ul>
</li>
<li>
<p>在HTML5文档中存在一些特殊字符无法直接使用。例如小于符号（<）和大于符号（>）是无法直接输出的，因为它们会被误认为是元素标签的组成部分；而连续空格也无法正确显示，会被浏览器缩减为单个空格。存在此类情况的一系列特殊字符在HTML5中称为<strong>字符实体</strong>（Character Entities）</p>
</li>
</ol>
<p><img src="https://user-gold-cdn.xitu.io/2019/8/11/16c8023995c310e8?w=714&h=541&f=png&s=27046" alt="" loading="lazy"></p>
<p><strong>html的操作思想 （理解即可）</strong></p>
<p>网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化</p>
<p>一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容 器的属性值，就可以实现容器内数据样式的变化</p>
<h4 id="4-常用标签">(4) 常用标签</h4>
<h5 id="1-文字标签修改文字样式">1. 文字标签：修改文字样式</h5>
<pre><code class="language-html"><font> </font>
属性：
size:文字的大小 取值范围 1-7,超出了7，默认还是7
face: <fontface="字体名称:">文字</font>
color: 文字颜色 （两种表示方式）
英文单词：redgreenblueblackwhiteyellow
使用十六进制数表示 #ffffff :RGB
</code></pre>
<p><strong>2. 标题标签、段落标签、换行标签、水平线标签和特殊字符</strong></p>
<p><strong>A：标题标签</strong></p>
<pre><code class="language-html"><!-- h1 到 h6 大小依次变小，同时自动换行-->
<h1></h1><h2></h2><h3></h3> .......<h6></h6>
</code></pre>
<p><strong>B：段落标签</strong></p>
<p>p元素有多种属性，比较常用的是对齐方式align属性</p>
<pre><code class="language-html"><P align="center">一段居中的文字</P>
<P align="right">一段居右的文字</P>
</code></pre>
<p><strong>C：换行标签</strong></p>
<pre><code class="language-html"><br>
换行标签<br>用于在当前位置产生一个换行，相当于一次回车键所 产生的效果。该标签单独使用，无结束标签
建议使用该标签代替回车键，因为回车键所产生的多个连续换行会被浏览器自动省略
<br>标签每次只能换一行，如需多次换行，必须写多个<br>标签
</code></pre>
<p><strong>D：水平线标签</strong></p>
<pre><code class="language-html"><hr/>
代码
<hr size="5" color="blue"/>
</code></pre>
<pre><code class="language-html">属性
<hr align="对齐方式" width="宽度" size="高度" color="颜色" noshade>
align属性值：left（左对齐）、center（居中）、right（右对齐）
width：表示宽度，可以使用百分数，也可以用像素表示
size：表示高度，其值是数字 取值范围 1-7
color：代表颜色，默认黑色
noshade：代表不显示阴影，默认情况是显示阴影
</code></pre>
<p>D：特殊字符**</p>
<pre><code class="language-html">< &lt;
> &gt;
空格 &nbsp;
& &amp;
</code></pre>
<h5 id="3-文本格式标签">3. 文本格式标签</h5>
<pre><code class="language-html">A. 字体标签 <font>
B. 斜体字标签 <i>
C. 粗体字标签 <b> 和 <strong>
D. 上标标签、下标标签 <sup> 和 <sub>
E. 修订标签 <del> 和 <ins>
F. 预格式化标签 <pre>
</code></pre>
<h5 id="4-列表标签">4. 列表标签</h5>
<pre><code class="language-html"><!-- 无序列表 -->
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>
</code></pre>
<pre><code class="language-html"><!-- 有序列表 -->
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>
</code></pre>
<table>
<thead>
<tr>
<th>TYPE取值</th>
<th>设置的符号样式</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>以数字进行排列 ，系统默认</td>
</tr>
<tr>
<td>a</td>
<td>以小写字母排列</td>
</tr>
<tr>
<td>A</td>
<td>以大写字母排列</td>
</tr>
<tr>
<td>i</td>
<td>以小写的罗马数字排列</td>
</tr>
<tr>
<td>I</td>
<td>以大写的罗马数字排列</td>
</tr>
<tr>
<td>disc</td>
<td>圆点符号，系统默认</td>
</tr>
<tr>
<td>circle</td>
<td>空心原点</td>
</tr>
<tr>
<td>square</td>
<td>空心方块</td>
</tr>
</tbody>
</table>
<pre><code class="language-html"><!-- 定义列表 -->
<dl>
<dt>第一个词条
<dd>第一个词条的定义
......
</dt>
</dl>
</code></pre>
<h5 id="5-图像标签">5. 图像标签</h5>
<pre><code class="language-html"><img src="图片的路径"/>
语法结构为：
<img src="url" alt="替代文本" name="名字" width="宽度" height="高度" border="边框” >
</code></pre>
<pre><code class="language-html">src:图片的路径
width： 图片的宽度
height：图片的高度
alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
有些浏览器下不显示（没有效果）
</code></pre>
<h5 id="6-绝路径和相对路径">6. 绝路径和相对路径</h5>
<table>
<thead>
<tr>
<th>相对位置</th>
<th>输入方法</th>
<th>举例</th>
</tr>
</thead>
<tbody>
<tr>
<td>同一目录</td>
<td>直接输入链接的文件</td>
<td>a.html</td>
</tr>
<tr>
<td>链接上一目录</td>
<td>先输出 “../” 再输入文件名</td>
<td>../b.html</td>
</tr>
<tr>
<td>链接下一目录</td>
<td>输入目录和文件名，之间以 “/" 分隔</td>
<td>test/c.html</td>
</tr>
</tbody>
</table>
<h5 id="7-超链接标签">7. 超链接标签</h5>
<p><strong>A: 链接资源</strong></p>
<pre><code class="language-html"><a href="链接到资源的路径"> 显示在页面上的内容</a>
</code></pre>
<pre><code>href: 链接的资源的地址
target：设置打开的方式 ，默认是在当前页打开
可以取四个值
</code></pre>
<table>
<thead>
<tr>
<th>属性值</th>
<th>表示的含义</th>
</tr>
</thead>
<tbody>
<tr>
<td>_parent</td>
<td>在上一级窗口打开（常在框架页面中使用）</td>
</tr>
<tr>
<td>_blank</td>
<td>新建一个窗口打开</td>
</tr>
<tr>
<td>_self</td>
<td>在同一窗口打开，是默认取值</td>
</tr>
<tr>
<td>_top</td>
<td>忽略所有的框架结构，在浏览器的整个窗口打开</td>
</tr>
</tbody>
</table>
<p><strong>B: 定位资源</strong></p>
<pre><code class="language-html"><!-- 如果想要定位资源：定义一个位置 -->
<a name="top">顶部</a>
<!-- 回到这个位置 -->
<a href="#top">回到顶部</a>
</code></pre>
<h5 id="8-移动文字标签">8. 移动文字标签</h5>
<pre><code class="language-html"><marquee>移动文字内容</marquee>
</code></pre>
<table>
<thead>
<tr>
<th>属性</th>
<th>功能说明</th>
<th>属性取值</th>
<th>各属性值的功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>behavior</td>
<td>设置文字的移动方式</td>
<td>Scroll、Slide、alternate</td>
<td>循环移动、移动一次停止、来回交替移动</td>
</tr>
<tr>
<td>direction</td>
<td>设置文字的移动方向</td>
<td>left、right、up、down</td>
<td>从右向左移动、从左向右移动、从下向上移动、从上向下移动</td>
</tr>
<tr>
<td>bgcolor</td>
<td>设置文字的背景颜色</td>
<td>英文颜色名称</td>
<td>表示所用颜色</td>
</tr>
<tr>
<td>width</td>
<td>设置文字背景的宽</td>
<td>数字 (或者百分比)</td>
<td>设置背景的绝对宽度</td>
</tr>
<tr>
<td>heigth</td>
<td>设置文字背景的高</td>
<td>数字 (或者百分比)</td>
<td>设置背景的绝对高度</td>
</tr>
<tr>
<td>hspace和vspace</td>
<td>设置文字背景和周围其他元素的空白间距</td>
<td>数字</td>
<td>设置文字背景和周围其他元素的空白间距的绝对值</td>
</tr>
<tr>
<td>loop</td>
<td>设置移动文字的循环次数</td>
<td>infinite、正整数</td>
<td>文字移动无限次、文字移动n次</td>
</tr>
<tr>
<td>sscrollmount</td>
<td>设置移动文字每次移动的距离</td>
<td>数字（默认单位px）</td>
<td>文字每次移动的距离</td>
</tr>
<tr>
<td>scrolldelay</td>
<td>设置移动文字每次移动后的间歇时间</td>
<td>数字（默认单位px）</td>
<td>文字每次移动后的间歇时间</td>
</tr>
</tbody>
</table>
<h5 id="9-表格标签">9. 表格标签</h5>
<p>可以对数据进行格式化，使数据显示更加清晰，可用于静态页面和动态页面的排版</p>
<pre><code class="language-html"><table></table>: 表示表格的范围
width：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
bgcolor：背景色
align：对齐方式
tr：定义行
bgcolor：背景色
align：对齐方式
td：定义单元格
colspan：合并列
rowspan：合并行
<caption></caption>:表格的标题
</code></pre>
<h5 id="10-表单标签">10. 表单标签</h5>
<p><strong>概念</strong>：用于采集用户输入的数据，用于和服务器交互，例如登录或者注册界面</p>
<pre><code><form></form>: 定义一个表单的范围
</code></pre>
<pre><code class="language-html">属性
action 指定提交数据的URL，默认提交到当前页面
method 指定表单提交方式，常用的有两种，get(默认)和post
</code></pre>
<p>简单说一说： get和post区别？</p>
<p> 1、get请求地址栏会携带提交的数据，post不会携带</p>
<p> 2、get请求安全级别较低，post较高</p>
<p> 3、get请求数据大小的限制，post没有限制</p>
<p><strong>输入项：可以输入内容或者选择内容的部分</strong></p>
<pre><code class="language-html">大部分的输入项 使用<input type="输入项的类型"/>
在输入项里面需要有一个name属性
普通输入项：<input type="text"/>
密码输入项：<input type="password"/>
单选输入项：<input type="radio"/>
复选输入项：<input type="checkbox"/>
<!--
在里面需要属性 name
name的属性值必须要相同
必须有一个value值
实现默认选中的属性
checked="checked"
-->
文件输入项 <input type="file"/> （后面上传时候用到）
下拉输入项 （不是在input标签里面的）
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
- 默认选择
selected="selected"
文本：<textarea cols="10" rows="10"></textarea>
隐藏项（不会显示在页面上，但是存在于html代码里面）：<input type="hidden" />
提交按钮：<input type="submit"/>
<input type="submit" value="注册"/>
使用图片提交：<input type="image" src="图片路径"/>
重置按钮： 回到输入项的初始状态：<input type="reset"/>
普通按钮：<input type="button" value=""/>
</code></pre>
<h5 id="11-容器标签">11. 容器标签</h5>
<pre><code class="language-html">A. <div>标签
标签<div>可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。
该标签是一个块级元素（block level element），浏览器会自动在<div>和</div>所标记的 区域前后自动放置一个换行符。每个标签可有一个独立的id号。
同样属于块级元素的还有段落标签<p>、表格标签<table>、标题标签<h1>-<h6>等。
B. <span>标签
标签<span>通常作为文本的容器，它没有特定的含义和样式，只有与CSS同时使用才可以为指定文本设置样式属性。
该标签是一个内联元素（inline element），与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。
</code></pre>
<p><img src="https://user-gold-cdn.xitu.io/2019/8/11/16c802399552845c?w=623&h=47&f=png&s=5687" alt="" loading="lazy"></p>
<h3 id="二-层叠样式表">(二) 层叠样式表</h3>
<p>多个样式可以作用在同一个html元素上，使得页面效果更加好，CSS将网页内容和显示样式进行分离，降低耦合度，提高了开发效率</p>
<h4 id="1-css和html结合的方式">(1) CSS和html结合的方式</h4>
<ol>
<li>
<p><strong>内联样式</strong></p>
<p>在每个html标签上面都有一个属性 style，把css和html结合在一起</p>
</li>
</ol>
<pre><code class="language-html"><div style="background-color:red; color:green;">
</code></pre>
<ol start="2">
<li>
<p><strong>内部样式</strong></p>
<p>使用html的一个标签实现<code><style></code>标签，写在head里面</p>
</li>
</ol>
<pre><code class="language-html"><style type = "texy/css">
div{
background-color:blue;
color:red;
}
</style>
</code></pre>
<ol start="3">
<li>
<p><strong>补充样式</strong></p>
<p>style标签里面 使用语句（在某些浏览器下不起作用）</p>
</li>
</ol>
<pre><code class="language-html"><style type="text/css">
@import uel(div.css);
</style>
</code></pre>
<ol start="4">
<li>
<p><strong>外部样式</strong></p>
<p>使用头标签 link，引入外部css文件，第一步 ，创建一个css文件</p>
</li>
</ol>
<pre><code class="language-html"><link rel="stylesheet" type="text/css" href="css文件的路径"/>
</code></pre>
<p><strong>一般使用第四种方式</strong></p>
<p>优先级（一般情况）</p>
<p>由上到下，由外到内。优先级由低到高。</p>
<p>后加载的优先级高</p>
<h4 id="2-css的基本选择器">(2) CSS的基本选择器</h4>
<p>含义：要对哪个标签里面的数据进行操作</p>
<p><strong>(1) 标签选择器</strong></p>
<p> 使用标签名作为选择器的名称</p>
<pre><code class="language-html">div {
background-color:gray;
clolr:white;
}
</code></pre>
<p><strong>(2) class选择器（div.ideal）</strong></p>
<p> 每个html标签都有一个属性 class</p>
<pre><code class="language-html"><div class="ideal">test</div>
.ideal {
background-color:orange;
}
</code></pre>
<p><strong>(3) id选择器 (div#ideal)</strong></p>
<p> 每个html标签上面有一个属性 id</p>
<pre><code class="language-html"><div id="ideal">test</div>
#ideal {
background-color:#333300;
}
</code></pre>
<p><strong>优先级：</strong>style > id选择器 > class选择器 > 标签选择器</p>
<h4 id="3-css的扩展选择器">(3) CSS的扩展选择器</h4>
<p><strong>(1) 关联选择器（调用加空格）</strong></p>
<pre><code class="language-html"><div><p>test</p></div>
设置div标签里面p标签的样式，嵌套标签里面的样式
div p {
background-color:orange;
}
</code></pre>
<p><strong>(2) 组合选择器</strong></p>
<pre><code class="language-html"><div>aaa</div>
<p>bbb</p>
把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
div,p {
background-color:orange;
}
</code></pre>
<h4 id="4-css的盒子模型">(4) CSS的盒子模型</h4>
<p>在进行布局前需要把数据封装到一块一块的区域内（div）</p>
<p><strong>(1) 边框</strong></p>
<pre><code class="language-html">border: 2px solid blue;
border：统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
</code></pre>
<p><strong>(2) 内边距</strong></p>
<pre><code>padding:20px;
使用padding统一设置
也可以分别设置
上下左右四个内边距
</code></pre>
<p><strong>(3) 外边距</strong></p>
<pre><code>margin: 20px;
可以使用margin统一设置
也可以分别设置
上下左右四个外边距
</code></pre>
<p><strong>(4) float：浮动</strong></p>
<pre><code>left：文本流向对象的右边
right：文本流向对象的左边
</code></pre>
<p><strong>(5) 布局定位</strong></p>
<pre><code>position：
属性值
absolute ：
将对象从文档流中拖出
可以是top、bottom等属性进行定位
relative ：
不会把对象从文档流中拖出
可以使用top、bottom等属性进行定位
</code></pre>
<h3 id="结尾">结尾：</h3>
<p>如果内容中有什么不足，或者错误的地方，欢迎大家给我留言提出意见, 蟹蟹大家 ！<sup>_</sup></p>
<p>如果能帮到你的话，那就来关注我吧！（系列文章均会在公众号第一时间更新）</p>
<blockquote>
<p>在这里的我们素不相识，却都在为了自己的梦而努力 ❤</p>
<p>一个坚持推送原创Java技术的公众号：理想二旬不止</p>
</blockquote>
<p><img src="https://user-gold-cdn.xitu.io/2019/7/6/16bc64e5e727d294?w=258&h=258&f=jpeg&s=27413" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/ideal-20/p/11335849.html
頁:
[1]