HTML&CSS入门学习

2021-04-23 21:05:48 阅读：98 来源： 互联网

文章目录

HTML

何为HTML

Hyper Text Markup Language （超文本标记语言）简写：HTML，它通过标签来标记要显示的网页中的各个部分。

如何创建HTML文件

最简单方式：右键点击桌面新建文本文档，然后写好HTML代码保存然后修改文件后缀名为html打开即可，HTML不需要编译器编译，直接通过浏览器解析。
通过IDEA：
①先创建项目：file–>new–>project–>JavaScript–>JavaScript
在这里插入图片描述

②创建HTML文件
在这里插入图片描述

HTML书写规范

<!DOCTYPE html>
<html lang='ed'>
	<head>       head标签内写头部元素，如标题。
		<meta charset='UTF-8'>
		<title>我是标题</title>
	</head>
	<body>
		这里写页面的主体内容。
	</body>
</html>

<!DOCTYPE html>为html5标准网页声明，所有html代码都要写在<html></html>标签内，页面的主体内容卸载body标签内，标题以及所用的字符编码等写在head标签内。

特殊字符

需求：把 标签显示在页面上。
直接写 肯定不会显示出来，所以这里引入特殊字符。
特殊字符表：在这里插入图片描述

<html>
<head>
	<title>wo</title>
</head>
<body>
	<p>&ltbr&gt</p>
</body>
</html>

效果展示
在这里插入图片描述

HTML标签

标签书写格式

1、（1）单标签：也称自结束标签，如 也可写为 ，该标签作用是换行。
（2）双标签：分为开始标签和结束标签，开始标签如其结束标签为，在两个标签之间写内容。
2、标签名称不区分大小写，但需要注意，一般都用小写。
3、每个标签都有自己的属性：其中分为基本属性和事件属性。
（1）基本属性：如color=‘red’ 设置颜色
。
（2）事件属性："οnclick=alert(你好！)’；"设置事件响应后的代码
在这里插入图片描述
HTML中的注释：

标签的语法

①标签可以嵌套，但是不能交叉嵌套。
②双标签必须正确关闭，不能缺少开始或者结束标签。
③标签内属性必须有值，属性的值必须用引号括起来，单引号双引号都可。
④注释不能嵌套，否则注释会提前结束。

常用标签

font字体标签

<font color="red" face="宋体" size="7">我是字体标签!</font>

font标签的属性：
color属性：设置文字颜色，可以用red，blue等英文字母，也可以用#FFFFFF来选择颜色，每个F为一个十六进制数字，还可以用rgb的方式，但是推荐#FFFFFF。
face属性：设置文字的字体。
size属性：设置文本字体大小。

h1-h6标题标签

h1-h6为标题标签，h1为最大的标题，h6为最小的标题。
align属性：设置对其方式，left左对齐，center居中，right右对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wo</title>
</head>
<body>
  <h1 align="left">我是一级标题</h1>
  <h2 align="left">我是二级标题</h2>
  <h3 align="right">我是三级标题</h3>
  <h4 align="right">我是四级标题</h4>
  <h5 align="center">我是五级标题</h5>
  <h6 align="center">我是六级标题</h6>
</body>
</html>

演示效果：
在这里插入图片描述

a超链接标签(重点)

a标签为双标签。
开始标签和结束标签之间写超链接的名字。
href属性：设置超链接的去向。
target属性：设置跳转超链接的对象，_blank为空白，即在空白页打开超链接地址，所以会打开额外的一个网页，_self为自己，即在当前页打开超链接地址，当前页变为超链接的网页。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>wo</title>
</head>
<body>
  <a href="tile.png" target="_blank">点击查看图片</a>
</body>
</html>

在这里插入图片描述

ul和ol列表标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>wo</title>
</head>
<body>
<ul>
  <li>我是一号</li>
  <li>我是二号</li>
  <li>我是三号</li>
  <li>我是四号</li>
  <li>我是五号</li>
</ul>
</body>
</html>

在这里插入图片描述
ul为无序列表，改为ol有序列表则效果变为:

img标签

img标签为图片标签，可以在html页面上显示图片。
**src属性：**设置图片的路径，路径分为相对路径和绝对路径。
①相对路径：
.表示当前位置
…表示上一级位置
直接写文件名字表示./访问当前路径下的一个文件
相对路径起始位置为文件所在项目的位置，如图tile.png图片和我们html文件在同一位置，所以可以直接通过<img src="./tile.png">显示该图片，当然./可以省略.
在这里插入图片描述
②绝对路径：http://ip:port/工程名/资源路径
width和height属性：
width设置图片的宽度
height设置图片的高度
boder属性：
设置图片边框的大小
alt属性
用于设置图片加载失败时显示的文本内容

table表格标签

table标签中有3个重要标签，tr行标签，th表头标签，td单元格标签。
table标签属性：
align属性设置表格对齐方式
border属性设置表格边框
width和height属性设置宽高
cellspacing属性设置单元格间距
tr行标签，中间嵌套th和td标签，每嵌套一个最大列增加1.
tr标签属性

th表头标签，默认黑体字，代表一个表头。
td单元格标签，中间填写每个单元格的数据，th标签与其类似但是其字体为黑体且自带居中对齐。

跨行跨列表格

td与th标签的两个属性
colspan属性用于合并列，colspan="2"即为合并两列。
rowspan属性用于合并行，rowspan="2"即为合并两行。
综合应用：做一个课表

<table border="1" cellspacing="1" width="700" height="300" align="center">
      <tr>
        <td colspan="2"></td>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
      </tr>
      <tr>
        <th rowspan="2">上午</th>
        <th>一</th>
        <td>毛概</td>
        <td>linux</td>
        <td></td>
        <td>马原</td>
        <td>文献检索</td>
      </tr>
      <tr>
        <th>二</th>
        <td></td>
        <td>python</td>
        <td>python</td>
        <td></td>
        <td>线代</td>
      </tr>
      <tr>
        <th rowspan="2">下午</th>
        <th>三</th>
        <td>大学英语</td>
        <td></td>
        <td></td>
        <td></td>
        <td>体育</td>
      </tr>
      <tr>
        <th>四</th>
        <td>高级英语阅读</td>
        <td>影视文学鉴赏</td>
        <td></td>
        <td></td>
        <td>离散</td>
      </tr>
      <tr>
        <th colspan="2">晚上</th>
        <td></td><td></td><td></td>
        <td></td><td></td>
      </tr>
    </table>

效果展示：在这里插入图片描述

CSS

何为CSS

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS语法规则

在这里插入图片描述
选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。
属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)
例如:

p{
color:red;
font-size:30px;
}

注：一般每行只描述一个属性
CSS注释通过/** 我是注释内容 **/

span和div标签区别

span：行内元素，不能通过css设置具体的宽高等样式的标签元素称为行内元素。
行内元素的特点是标签内的内容是多大它就是多大，而且不会占一整行。
div：块级元素，可以通过css设置宽高等一些大小的样式，这样的元素标签称为块级元素。
块级元素的特点是自己占一整行。如果再写其它标签，那么其它标签会显示在它的下面。

CSS和HTML的结合方式

1、在标签的 style 属性上设置"key:value value;"修改标签样式

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>
<body>
	<div style="border: 1px solid red;">div 标签 1</div>
	<div style="border: 1px solid red;">div 标签 2</div>
	<span style="border: 1px solid red;">span 标签 1</span>
	<span style="border: 1px solid red;">span 标签 2</span>
</body>
</html>

在这里插入图片描述
问题：这种方式的缺点？
1.如果标签多了，样式多了，代码量非常庞大。
2.可读性非常差。
3.CSS 代码没什么复用性可言。

2、在 head 标签中使用 style 标签来定义各种自己需要的 css 样式

格式如下：
xxx {
Key : value value;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
    <style type="text/css">
      div{
        color: crimson;
        font-size: 20px ;
        border: 1px solid red;
      }
      span {
        color: aqua;
        font-size: 20px;
        border: 1px solid red;
      }
    </style>
</head>
<body>
	<div>我是div1</div>
	<div>我是div2</div>
	<span>我是span1</span>
	<span>我是span2</span>
</body>
</html>

在这里插入图片描述
问题：这种方式的缺点。
1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

3、把 css 样式写成一个单独的 css 文件再通过 link 标签引入

使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css" />
标签 导入 css 样式文件。

CSS文件内容

div{
  color: aquamarine;
  font-size: 20px;
}
span{
  color: #b3d4fc;
  font-size: 20px ;
  border: 1px solid saddlebrown;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
    <link rel="stylesheet" type="text/css" href="./css/ztx.css">
</head>
<body>
	<div>我是div1</div>
	<div>我是div2</div>
	<span>我是span1</span>
	<span>我是span2</span>
</body>
</html>

在这里插入图片描述

CSS选择器

标签名选择器

在head标签内的style标签内写标签名选择器，语法示例：

div{
      color: red;
      font-size: 30px;
      border: 3px solid blueviolet;
   }

用法示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
    <style type="text/css">
      div{
        color: red;
        font-size: 30px;
        border: 3px solid blueviolet;
      }
      span{
        color: green;
        font-size: 50px;
        border: 5px;
      }
    </style>
</head>
<body>
	<div>我是div1</div>
	<div>我是div2</div>
	<span>我是span1</span>
	<span>我是span2</span>
</body>
</html>

效果展示
在这里插入图片描述

id 选择器

id 选择器的格式是：

#id属性值{
属性：值;
}

id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。
定义完id选择器后只需要在标签内加上id属性选择相应的id属性值即可。
示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
    <style type="text/css">
      #id01{
        color: aqua;
        font-size: 66px;
        border:  3px solid yellowgreen;
      }
      #id02{
        color: darkcyan;
        font-size: 33px;
        border:  2px solid darkslategray;
      }
    </style>
</head>
<body>
  <div id="id01">我是div1</div>
  <div id="id02">我是div2</div>
  <span id="id01">我是span1</span>
  <span id="id02">我是span2</span>
</body>
</html>

在这里插入图片描述

class 选择器（类选择器）

class 类型选择器的格式是：

.class 属性值{
属性：值;
}

class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。
使用方法和id选择器相同。
示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
    <style type="text/css">
      .class01{
        color: aqua;
        font-size: 66px;
        border:  3px solid yellowgreen;
      }
      .class02{
        color: darkcyan;
        font-size: 33px;
        border:  2px solid darkslategray;
      }
    </style>
</head>
<body>
  <div class="class01">我是div1</div>
  <div class="class02">我是div2</div>
  <span class="class01">我是span1</span>
  <span class="class02">我是span2</span>
</body>
</html>

在这里插入图片描述

id选择器和class选择器的区别

**1、**一个html标签只能绑定一个id名称。
**2、**一个html标签可以绑定多个class名称。
id选择器以#开头，class选择器以.开头。
一般使用class选择器。

组合选择器

组合选择器的格式是：

选择器 1，选择器 2，选择器 n{
属性：值;
}

组合选择器可以让多个选择器共用同一个 css 样式代码。

常用样式

1、字体颜色
color：red；
颜色可以写颜色名如：black, blue, red, green 等
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必
须加#
2、宽度
width:19px;
宽度可以写像素值：19px；
也可以写百分比值：20%；
3、高度
height:20px;
高度可以写像素值：19px；
也可以写百分比值：20%；
4、背景颜色
background-color:#0F2D4C
4、字体样式：
color：#FF0000；字体颜色红色
font-size：20px; 字体大小
5、红色 1 像素实线边框
border：1px solid red;
7、DIV 居中
margin-left: auto;
margin-right: auto;
8、文本居中：
text-align: center;
9、超连接去下划线
text-decoration: none;
10、表格细线
table {
border: 1px solid black; /设置边框/
border-collapse: collapse; /将边框合并/
}
td,th {
border: 1px solid black; /设置边框/
}
11、列表去除修饰
ul {
list-style: none;
}

标签：入门,color,标签,HTML,font,选择器,CSS,属性
来源： https://blog.csdn.net/qq_45918426/article/details/115676850

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML&CSS入门学习

文章目录

HTML

何为HTML

如何创建HTML文件

HTML书写规范

特殊字符

HTML标签

标签书写格式

标签的语法

常用标签

font字体标签

h1-h6标题标签

a超链接标签(重点)

ul和ol列表标签

img标签

table表格标签

跨行跨列表格

CSS

何为CSS

CSS语法规则

span和div标签区别

CSS和HTML的结合方式

1、在标签的 style 属性上设置"key:value value;"修改标签样式

2、在 head 标签中使用 style 标签来定义各种自己需要的 css 样式

3、把 css 样式写成一个单独的 css 文件再通过 link 标签引入

CSS选择器

标签名选择器

id 选择器

class 选择器（类选择器）

id选择器和class选择器的区别

组合选择器

常用样式