web前端基础

目录

web前端基础

标题常见标签&样式

CSS引入方式

颜色表示方式

CSS选择器

正文常见标签&样式

布局--盒子模型

---

web前端基础

标题常见标签&样式

标题标签 h 系列：

<h1> 11111111111111 </h1>

<h2> 11111111111111 </h2>

<h3> 11111111111111 </h3>

<h4> 11111111111111 </h4>

<h5> 11111111111111 </h5>

<h6> 11111111111111 </h6>

效果：h1为一级标题，字体也是最大的 ； h6为六级标题，字体是最小的。

注意：HTML标签是预定义好的，不能随意定义，也就以为着，标题标签就只有这六个，没有 <h7>

超链接 a 标签：

标签：<a href="....." target=".....">央视网</a>

属性：

• href: 指定资源访问的url

• target: 指定在何处打开资源链接

  • _self: 默认值，在当前页面打开

  • _blank: 在空白页面打开

CSS引入方式

那在HTML的文件中，我们如何来编写CSS样式呢，此时就涉及到CSS的三种引入方式。

具体有3种引入方式，语法如下表格所示：

名称	语法描述	示例
行内样式	在标签内使用style属性，属性值是css属性键值对。	<h1 style="xxx:xxx;">中国新闻网</h1>
内部样式	定义<style>标签，在标签内部定义css样式。	<style> h1 {...} </style>
外部样式	定义<link>标签，通过href属性引入外部css文件	<link rel="stylesheet" href="css/news.css">

对于上述3种引入方式，企业开发的使用情况如下：

• 行内样式：会出现大量的代码冗余，不方便后期的维护，所以不常用（常配合JS使用）。

• 内部样式：通过定义css选择器，让样式作用于当前页面的指定的标签上。（可以写在页面任何位置，但通常约定写在head标签中）

• 外部样式：html和css实现了完全的分离，企业开发常用方式。

颜色表示方式

在前端程序开发中，颜色的表示方式常见的有如下三种：

表示方式	属性值	说明	取值
关键字	颜色英文单词	red、green、blue	red、green、blue...
rgb表示法	rgb(r, g, b)	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
rgba表示法	rgba(r, g, b, a)	红绿蓝三原色，a表示透明度，取值：0-1	rgb(0,0,0,0.3)、rgb(255,255,255,0.5)
十六进制表示法	#rrggbb	#开头，将数字转换成十六进制表示	#000000、#ff0000、#cccccc，简写：#000、#ccc

CSS选择器

顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种。

选择器通用语法如下：

选择器名 { css样式名：css样式值; css样式名：css样式值; }

常见样式：

选择器	写法	示例	示例说明
元素选择器	元素名称 {...}	h1 {...}	选择页面上所有的<h1>标签
类选择器	.class属性值 {...}	.cls {...}	选择页面上所有class属性为cls的标签
id选择器	#id属性值 {...}	#hid {...}	选择页面上id属性为hid的标签
分组选择器	选择器1,选择器2{...}	h1,h2 {...}	选择页面上所有的<h1>和<h2>标签
属性选择器	元素名称[属性] {...}	input[type] {...}	选择页面上有type属性的<input>标签
	元素名称[属性名="值"] {...}	input[type="text"] {...}	选择页面上type属性为text的<input>标签
后代选择器	元素1元素2{...}	form input {...}	选择<form>标签内的所有<input>标签

优先级：id选择器>类选择器>元素选择器

正文常见标签&样式

标签	作用	属性/说明
<video>	视频标签	src：指定视频的url（绝对路径/相对路径）
		controls：是否显示播放控件
		width：宽度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
		height：高度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
<img>	图片标签	src, width，height
<p>	段落标签
<br>	换行标签
<b> / <strong>	加粗	<strong> 具有强调语义
<u> / <ins>	下划线	<ins> 具有强调语义
<i> / <em>	倾斜	<em> 具有强调语义
<s> / <del>	删除线	<del> 具有强调语义

在HTML页面中，我们在代码中录入空格、<、> 这些符号的时候，是没有对应的效果的，因为浏览器并不能准确的识别，此时，我们就需要通过字符实体来表示空格，<, > 。常见符号的字符实体如下：

字符实体	属性/说明
 	空格
&lt;	<
&gt;	>

路径表示

在引入图片、视频、音频、css等内容时，我们需要指定文件的路径，而在前端开发中，路径的书写形式分为两类：

• 绝对路径:

  • 绝对磁盘路径: <img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">

  • 绝对网络路径: <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">

• 相对路径:

./ : 当前目录 , ./ 可以省略的

../: 上一级目录

CSS属性

line-height：设置行高

text-indent：首行缩进

布局--盒子模型

介绍

• 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。

• 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。

    <style>
        div {
            width: 200px;  /* 宽度 */
            height: 200px;  /* 高度 */
            box-sizing: border-box; /* 指定width height为盒子的高宽 */
            background-color: aquamarine; /* 背景色 */
            
            padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ 
            border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
            margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
        }
    </style>

布局标签

• 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

• 标签：<div> <span>

• 特点：

• <div>标签：

  • 一行只显示一个（独占一行）

  • 宽度默认是父元素的宽度，高度默认由内容撑开

  • 可以设置宽高（width、height）

• <span>标签：

  • 一行可以显示多个

  • 宽度和高度默认由内容撑开

  • 不可以设置宽高（width、height）

备注：

• 上述的padding、margin属性值，可以是4个值、也可以是两个值、也可以是一个值，具体的含义如下：

• padding: 20px 20px 20px 20px; -------> 表示上、右、下、左都是20px；

• padding: 20px 10px; ----------------------> 表示上下是20px，左右是10px；

• padding: 20px; -----------------------------> 表示上、右、下、左都是20px；