乐趣区

一个后端开发者的前端语言基础HTML5-CSS

jiezi

前端语言基础：HTML5 & CSS

(一) HTML5：超文本标记语言

(1) 基本概念

  • 是由一系列 成对 出现的 元素标签（标记）嵌套组合而成 (XML 也是标签构成的)
  • 这些标签以 < 标签名称 > 的形式出现，用于标记文本内容的含义
  • 浏览器通过元素标签解析文本内容并将结果显示在网页上，而 元素标签本身并不会被浏览器显示出来

(2) 基本结构

HTML5 元素的内容一般以起始标签 < 元素名 > 开始，以结束标签 </ 元素名 > 终止

<!Doctype html>
<html>
    <head>
        <title> 网页标题 </title>
            ......
    </head>
    <body>
        主体内容
    </body>
</html>

DOCTYPE是 Document Type 的简写，含义为 文档类型。

HTML5 文档基础结构中第一行 <!DOCTYPE html> 就是HTML5 的 DOCTYPE 声明

<html> </html> Html 文件开始标签和结束的标签——文档的根标签

<head> </head> 指定 html 文档的一些属性 ，例如 页面标题 ， 字符集 和关键字 等 -

  • <title> </title> 网页标题标签，即被收藏以及搜索引擎中搜索出的名称

  • <meta.../> 元数据标签，不显示，但是机器可读，常用于搜索引擎索引(SEO 优化)

    • 字符集声明（网页编码声明）<meta charset="utf-8">
    • 关键词声明 <meta name="keywords" content="Xx,Xx,Xx" />
    • 页面描述声明 <meta name="description" content="This is a page about html5" />

  • <style> </style>

    • 可用于定义文档中指定区域的字体风格、背景颜色、对 齐方式等各类样式信息
    • Eg：<style> p{color:read} </style>

  • <link.../> 链接标签

    • 标签用于连接外部资源和当前 HTML5 文档，它只出现在首部标签 <head> </head>中，通常用于 连接外部样式表
    • Eg：<head> <link rel="stylesheet" hred="test.css"/> </head>

  • <script> </script>

    • 此标签为可选，取决于当前页面是否需要使用脚本内容，比如 JavaScript。该标签可以直接 引用外部脚本文件 ，也可以直接将脚本命令写在<script> </script> 标签中
    • <head> <script src="test.js"></script> </head>

<body> </body> 显示在页面上的内容都写在 body 里面

(3) 基本规范

  1. HTML5 使用 <!--...--> 标签为文档进行注释（多行或者单行）
  2. 早期的 HTML 规范中，标签的大小写是不敏感的，可能存在大写标签的情况

    万维网联盟（W3C）明确规定了在新版本HTML5 中必须使用小写格式，包括元素标签本身和其中可能出现的属性均需要遵守此规范

  3. 一些标签，没有结束标签，在标签内结束

    • 比如 换行 <br/>（一般来说加上 / 更加标准）
    • XML 规范中，所有的标签都必须有结束标签
  4. 在 HTML5 文档中存在一些特殊字符无法直接使用。例如小于符号（<）和大于符号（>）是无法直接输出的，因为它们会被误认为是元素标签的组成部分；而连续空格也无法正确显示，会被浏览器缩减为单个空格。存在此类情况的一系列特殊字符在 HTML5 中称为 字符实体（Character Entities）

html 的操作思想（理解即可）

网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化

一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容 器的属性值，就可以实现容器内数据样式的变化

(4) 常用标签

1. 文字标签：修改文字样式
<font> </font>
属性：size:  文字的大小 取值范围 1-7, 超出了 7，默认还是 7
    face: <font  face="字体名称:"> 文字 </font>
    color: 文字颜色（两种表示方式）英文单词：red  green  blue  black  white  yellow
    使用十六进制数表示 #ffffff :  RGB

2. 标题标签、段落标签、换行标签、水平线标签和特殊字符

A：标题标签

<!-- h1 到 h6 大小依次变小，同时自动换行 -->
<h1></h1>  <h2></h2>  <h3></h3> .......<h6></h6>

B：段落标签

p 元素有多种属性，比较常用的是对齐方式 align 属性

<P align="center"> 一段居中的文字 </P>
<P align="right"> 一段居右的文字 </P>

C：换行标签

<br>

换行标签 <br> 用于在当前位置产生一个换行，相当于一次回车键所    产生的效果。该标签单独使用，无结束标签
建议使用该标签代替回车键，因为回车键所产生的多个连续换行会被浏览器自动省略
<br> 标签每次只能换一行，如需多次换行，必须写多个 <br> 标签

D：水平线标签

<hr/>

代码
    <hr size="5" color="blue"/>
属性
    <hr align="对齐方式" width="宽度" size="高度" color="颜色" noshade>
    align 属性值：left（左对齐）、center（居中）、right（右对齐）width：表示宽度，可以使用百分数，也可以用像素表示
    size：表示高度，其值是数字 取值范围 1-7
    color：代表颜色，默认黑色
    noshade：代表不显示阴影，默认情况是显示阴影

D：特殊字符 **

<    &lt;
>    &gt;
空格    &nbsp;
&    &amp;
3. 文本格式标签
A. 字体标签      <font> 
B. 斜体字标签    <i>
C. 粗体字标签    <b> 和 <strong>
D. 上标标签、下标标签    <sup> 和 <sub>
E. 修订标签        <del> 和 <ins>
F. 预格式化标签    <pre>
4. 列表标签
<!-- 无序列表 --> 
<ul>
    <li> 无序列表项 1 </li>
    <li> 无序列表项 2 </li>
</ul>
<!-- 有序列表 --> 
<ol>
    <li> 有序列表项 1 </li>
    <li> 有序列表项 2 </li>
</ol>
TYPE 取值 设置的符号样式
1 以数字进行排列，系统默认
a 以小写字母排列
A 以大写字母排列
i 以小写的罗马数字排列
I 以大写的罗马数字排列
disc 圆点符号，系统默认
circle 空心原点
square 空心方块 
<!-- 定义列表 --> 
<dl>
<dt> 第一个词条
<dd> 第一个词条的定义
    ......
</dt>
</dl>
5. 图像标签
<img src="图片的路径"/>
语法结构为：<img src="url" alt="替代文本" name="名字" width="宽度"     height="高度" border=" 边框”>
src: 图片的路径
width：图片的宽度
height：图片的高度
alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
有些浏览器下不显示（没有效果）
6. 绝路径和相对路径
相对位置 输入方法 举例
同一目录 直接输入链接的文件 a.html
链接上一目录 先输出“../”再输入文件名 ../b.html
链接下一目录 输入目录和文件名，之间以“/” 分隔 test/c.html
7. 超链接标签

A: 链接资源

<a href="链接到资源的路径"> 显示在页面上的内容  </a>
href: 链接的资源的地址
target：设置打开的方式，默认是在当前页打开
可以取四个值
属性值 表示的含义
_parent 在上一级窗口打开（常在框架页面中使用）
_blank 新建一个窗口打开
_self 在同一窗口打开，是默认取值
_top 忽略所有的框架结构，在浏览器的整个窗口打开

B: 定位资源

<!-- 如果想要定位资源：定义一个位置 -->
<a name="top"> 顶部 </a>

<!-- 回到这个位置 -->
<a href="#top"> 回到顶部 </a>
8. 移动文字标签
<marquee> 移动文字内容 </marquee>
属性 功能说明 属性取值 各属性值的功能
behavior 设置文字的移动方式 Scroll、Slide、alternate 循环移动、移动一次停止、来回交替移动
direction 设置文字的移动方向 left、right、up、down 从右向左移动、从左向右移动、从下向上移动、从上向下移动
bgcolor 设置文字的背景颜色 英文颜色名称 表示所用颜色
width 设置文字背景的宽 数字 (或者百分比) 设置背景的绝对宽度
heigth 设置文字背景的高 数字 (或者百分比) 设置背景的绝对高度
hspace 和 vspace 设置文字背景和周围其他元素的空白间距 数字 设置文字背景和周围其他元素的空白间距的绝对值
loop 设置移动文字的循环次数 infinite、正整数 文字移动无限次、文字移动 n 次
sscrollmount 设置移动文字每次移动的距离 数字（默认单位 px） 文字每次移动的距离
scrolldelay 设置移动文字每次移动后的间歇时间 数字（默认单位 px） 文字每次移动后的间歇时间
9. 表格标签

可以对数据进行格式化，使数据显示更加清晰，可用于静态页面和动态页面的排版

<table></table>: 表示表格的范围
    width：宽度
    border：边框
    cellpadding：定义内容和单元格的距离
    cellspacing：定义单元格之间的距离。如果指定为 0，则单元格的线会合为一条、bgcolor：背景色
    align：对齐方式
        tr：定义行
            bgcolor：背景色
            align：对齐方式
        td：定义单元格
            colspan：合并列
            rowspan：合并行
    
    <caption></caption>: 表格的标题
10. 表单标签

概念：用于采集用户输入的数据，用于和服务器交互，例如登录或者注册界面

<form></form>: 定义一个表单的范围
属性
action 指定提交数据的 URL，默认提交到当前页面
method 指定表单提交方式，常用的有两种，get(默认)和 post

简单说一说：get 和 post 区别？

​ 1、get 请求地址栏会携带提交的数据，post 不会携带

​ 2、get 请求安全级别较低，post 较高

​ 3、get 请求数据大小的限制，post 没有限制

输入项：可以输入内容或者选择内容的部分

大部分的输入项 使用  <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=""/>
11. 容器标签
A. <div> 标签

标签 <div> 可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素（block     level element），浏览器会自动在 <div> 和 </div> 所标记的    区域前后自动放置一个换行符。每个标签可有一个独立的 id 号。同样属于块级元素的还有段落标签 <p>、表格标签 <table>、标题标签 <h1>-<h6> 等。B. <span> 标签

标签 <span> 通常作为文本的容器，它没有特定的含义和样式，只有与 CSS 同时使用才可以为指定文本设置样式属性。该标签是一个内联元素（inline element），与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。

(二) 层叠样式表

多个样式可以作用在同一个 html 元素上，使得页面效果更加好，CSS 将网页内容和显示样式进行分离，降低耦合度，提高了开发效率

(1) CSS 和 html 结合的方式

  1. 内联样式

    在每个 html 标签上面都有一个属性 style，把 css 和 html 结合在一起

<div style="background-color:red; color:green;">
  1. 内部样式

    使用 html 的一个标签实现 <style> 标签，写在 head 里面

<style type = "texy/css">
 div{
     background-color:blue;
     color:red;
 }
</style>
  1. 补充样式

    style 标签里面 使用语句（在某些浏览器下不起作用）

<style type="text/css">
    @import uel(div.css);
</style>
  1. 外部样式

    使用头标签 link，引入外部 css 文件，第一步，创建一个 css 文件

<link rel="stylesheet" type="text/css" href="css 文件的路径"/>

一般使用第四种方式

优先级（一般情况）

由上到下，由外到内。优先级由低到高。

后加载的优先级高

(2) CSS 的基本选择器

含义：要对哪个标签里面的数据进行操作

(1) 标签选择器

​ 使用标签名作为选择器的名称

div {
    background-color:gray;
    clolr:white;
}

(2) class 选择器（div.ideal）

​ 每个 html 标签都有一个属性 class

<div class="ideal">test</div>
 .ideal {background-color:orange;}

(3) id 选择器 (div#ideal)

​ 每个 html 标签上面有一个属性 id

<div id="ideal">test</div>
#ideal {background-color:#333300;}

优先级：style > id 选择器 > class 选择器 > 标签选择器

(3) CSS 的扩展选择器

(1) 关联选择器（调用加空格）

<div><p>test</p></div>

设置 div 标签里面 p 标签的样式，嵌套标签里面的样式

div p {background-color:orange;}

(2) 组合选择器

<div>aaa</div>
<p>bbb</p>

把 div 和 p 标签设置成相同的样式，把不同的标签设置成相同的样式    

div,p {background-color:orange;}

(4) CSS 的盒子模型

在进行布局前需要把数据封装到一块一块的区域内（div）

(1) 边框

border: 2px solid blue;
border：统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right

(2) 内边距

padding:20px;
使用 padding 统一设置
也可以分别设置
上下左右四个内边距

(3) 外边距

margin: 20px;
可以使用 margin 统一设置
也可以分别设置
上下左右四个外边距

(4) float：浮动

left：文本流向对象的右边 
right：文本流向对象的左边

(5) 布局定位

position：属性值
    absolute：将对象从文档流中拖出
        可以是 top、bottom 等属性进行定位
     relative：不会把对象从文档流中拖出
        可以使用 top、bottom 等属性进行定位

结尾：

如果内容中有什么不足，或者错误的地方，欢迎大家给我留言提出意见, 蟹蟹大家！^_^

如果能帮到你的话，那就来关注我吧！（系列文章均会在公众号第一时间更新）

在这里的我们素不相识，却都在为了自己的梦而努力 ❤

一个坚持推送原创 Java 技术的公众号：理想二旬不止

退出移动版