前端相关

HTML+CSS快速入门回顾

HTML+CSS快速入门回顾 一、HTML超文本标记语言 1.1 介绍 HTML(HyperText Markup Language)：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容 标记语言：由标签构成的语言 1.2 结构及注意事项 HT

HTML+CSS快速入门回顾

一、HTML超文本标记语言

1.1 介绍

HTML(HyperText Markup Language)：超文本标记语言

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
  • 标记语言：由标签构成的语言

1.2 结构及注意事项

  1. HTML页面结构
<html>
	<head>
    	<title> </title>
    </head>
    <body>
        
    </body>
</html>
标签描述
HTML定义 HTML 文档
head定义关于文档的信息
title定义文档的标题
body定义文档的主体
  1. 注意事项
  • HTML 标签不区分大小写
  • HTML 标签属性值 单双引皆可
  • HTML 语法松散

1.3 基础标签

标签描述
<h1>  ~ <h6>定义标题，h1最大，h6最小
<font>定义文本的字体、字体尺寸、字体颜色
<b> 或<strong>定义粗体文本
<del > 或<s>删除线
<i> 或<em>定义斜体文本
<u> 或<ins>定义文本下划线
<center>定义文本居中
<p>定义段落
<br>定义折行
<hr>定义水平线

1.4 布局标签

<div> </div> 是大盒子，一行只能放一个大盒子
<span> </span> 是小盒子，一行可以放多个

二者区别:

  • div标签是块级元素，拥有块级元素的特点。每对div标签（
    ）里的内容都可以占据一行，不会其他标签在一行显示；div标签总是从新行开始显示；
    且div标签可以通过css样式来设置自身的宽度（也可省略，当没有使用css自定义宽度时，div标签的宽度为其的容器的100%）、高度，且还可以设置标签之间的距离（外边距和内边距）；
  • span标签是行内元素，拥有行内元素的特点。span标签元素会和其他标签元素会在一行显示（块级元素除外），不会另起一行显示（如上例）。
    span标签的宽度、高度都无法通过css样式设置，它的宽高受其本身内容（文字、图片）控制，随着内容的宽高改变而改变；span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置。且，span标签里只能容纳文本或者是其他的行内元素，不能容纳块级元素。

1.5 图像标签

<img src="xxxxxx" 属性2="xxxxxx">

属性属性值说明
ssrc图片路径必须属性
alt文本替换文本。图像不能显示的文字
title文本提示文本。鼠标放到图像上，显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细

1.6 超文本标签

< a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性作用
href用于指定链接目标的ur地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能；href=“#”表示这是一个空链接；如果href里面地址是—个文件或者压缩包,会下载这个文件
target用于指定链接页面的打开方式，其中_self为默认值(在本窗口中打开)，_ blank为在新窗口中打开方式

1.7 锚点链接

<a href="#要跳转的元素的id"></a>

1.8 注释和特殊字符

注释以“<!-”开头，以“->”结束。

特殊字符：

特殊字符描述字符的代码
空格符&nbsp;
<小于号&lt;
>大于号&gt;
&和&amp;
￥人名币&yen;
©版权&copy;
®注册商标&reg;
℃摄氏度&deg;
±正负号&plusmn;
×乘号&times;
÷除号&divide;
²平方上标2&sup2;
³立方上标3&sup3;

1.9 表格标签

<table></tabe>是用于定义表格的标签。
<tr></tr>标签用于定义表格中的行,必须嵌套在< table></ table>标签中
<td></td>用于定义表格中的单元格，必须嵌套在< tr></ tr>标签中
<th></th>表示表格的表头部分，表示表格的第一行或第一列，其中的文本内容加粗居中显示
<thead></thead>用于定义表格的头部。< thead>内部必须拥有< tr>标签，一般是位于第一行
<tbody></tbody>用于定义表格的主体，主要用于放数据本体。

一些常用的属性：

属性名属性值描述
alignleft、center、right规定表格相对周围元素的对齐方式
border1 或 “”规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding像素值规定单元边沿与其内容之间的空白,默认1像素
cellspacing像素值规定单元格之间的空白，默认2像素
width像素值或百分比规定表格的宽度
height像素值或百分比规定表格的高度
rowspan要合并的单元格个数合并行单元格，记得要删除多余的单元格
colspan要合并的单元格个数合并列单元格，记得要删除多余的单元格
举例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1" cellspacing="0" width="500">
    <tr>
        <th>序号</th>
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>

    <tr align="center">
        <td>009</td>
        <td><img src="../img/优衣库.png" width="60" height="50"></td>
        <td>优衣库</td>
        <td>优衣库</td>
    </tr>

    <tr align="center">
        <td>008</td>
        <td><img src="../img/小米.png" width="60" height="50"></td>
        <td>小米</td>
        <td>小米科技有限公司</td>
    </tr>
</table>
</body>
</html>

image-ypei.png

1.10 列表标签

HTML 中列表分为

  • 有序列表
    如下图，页面效果中是有标号对每一项进行标记的。
    image-dhzd.png
  • 无序列表
    如下图，页面效果中没有标号对每一项进行标记，而是使用 点 进行标记。
    image-roxv.png
    标签说明：
    image-eavr.png

有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）
无序列表中的 type 属性用来指定标记的形状

1.11 表单标签

表单：在网页中主要负责数据采集功能，使用

标签定义表单
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等
image-aiia.png

1.11.1 form标签属性

  • action：规定当提交表单时向何处发送表单数据，该属性值就是URL
    以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。
  • method ：规定用于发送表单数据的方式
    method取值有如下两种：
    • get：默认值。如果不设置method属性则默认就是该值
      • 请求参数会拼接在URL后边
      • url的长度有限制 4KB
    • post：
      • 浏览器会将数据放到http请求消息体中
      • 请求参数无限制的

1.11.2 表单项标签

表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：

  • <input>：表单项，通过type属性控制输入形式
    input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样
    image-qrzx.png
  • <select>：定义下拉列表，<option> 定义列表项
  • <textarea>：文本域

==注意：==

  • 以上标签项的内容要想提交，必须得定义 name 属性。
  • 每一个标签都有id属性，id属性值是唯一的标识。
  • 单选框、复选框、下拉列表需要使用 value 属性指定提交的值。

二、CSS层叠样式表

Cascading Style Sheet（层叠样式表）:CSS 是一门语言，用于控制网页表现

2.1 css 导入方式

2.1.1 内联样式

  • 内联样式：在标签内部使用style属性，属性值是css属性键值对
    <div style="color: red">Hello CSS~</div>

给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。

2.1.1 内部样式

  • 内部样式：定义 
<style type="text/css">
	div{
		color: red;
    }
</style>

这种方式可以做到在该页面中复用。

2.1.1 外部样式

  • 部样式：定义link标签，引入外部的css文件
    编写一个css文件。名为：demo.css，内容如下:
div{
	color: red;
}

在html中引入 css 文件。
<link rel="stylesheet" href="demo.css">

这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件。

2.2 css 选择器

css 选择器就是选取需设置样式的元素（标签），比如如下css代码：

div {
	color:red;
}

如上代码中的 div 就是 css 中的选择器。我们只讲下面三种选择器：

2.2.1 元素选择器

格式：
元素名称{color: red;}
例子：
div {color:red} /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/

2.2.2 id选择器

格式：
#id属性值{color: red;}
例子：
html代码如下：
<div id="name">hello css2</div>
css代码如下：
#name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/

2.2.3 类选择器

格式：
.class属性值{color: red;}

  • 格式： 
    .class属性值{color: red;}
    例子：
    html代码如下： 
    <div class="cls">hello css3</div>
    css代码如下： 
    .cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

2.3 CSS属性

CSS 参考手册点此跳转
1722075959999.png

HTML+CSS
LICENSED UNDER CC BY-NC-SA 4.0
Comment