前端页面设计-第一节-基础知识1

artly1

已于 2023-06-19 22:04:00 修改

阅读量206

点赞数 1

分类专栏：前端页面实训文章标签：前端 javascript 开发语言 html5 css

于 2023-06-19 15:13:03 首次发布

本文链接：https://blog.csdn.net/artly1/article/details/131286567

版权

前端页面实训专栏收录该内容

9 篇文章 0 订阅

订阅专栏

环境配置

使用vscode下载一下扩展

基础知识

注释快捷键 ctrl+/

Html：HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

Js：JavaScript是网页中的一种脚本语言，其前身叫做LiveScript，由Netscape(网景)公司开发。后来在Sun公司推出著名的Java语言之后，Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并把它改名为JavaScript。

CSS：CSS(英文Cascading Style Sheets的缩写)中文译为“层叠样式表”。CSS主要用于设置HTML页面中的文本内容(如:字体、大小、对齐方式等)、图片外形(如:宽度、高度、边框样式、边距等)、版面布局等外观显示样式。

静态界面：用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。

动态页面：显示的内容则会随着用户操作和时间的不同而变化。动态网页可以和服务器数据库进行实时的数据交换。

Html5基本结构：

<!DOCTYPE >标记： 位于文档最前面，用于想浏览器说明当前文档使用哪种html或者xhtml标准规范。

<html>标记： 用于告知浏览器其是一个HTML文档，<head>标记和</head>标记着HTML文档的开始和结束，在他们之间的是文档的头部和主体内容。

<Head>标记： 用于定义html文档的头部信息，也成为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记。

<body>标签： 用于定义HTML文档所要显示的内容，浏览器中显示的所有文本，图像，音频和视频等信息都必须位于<body>标记内。

基本框架

在vscode里的html文件输入html：5回车自动生成基本框架

<!DOCTYPE html>
<html lang="en">
<!-- 始标签 -->
<head>
<!-- //设置网页的编码格式 -->
    <meta charset="UTF-8">
!-- 确保页面在各种浏览器中以最佳方式显示和运行 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <网页的视口宽度应该等于设备的宽度，并且初始缩放比例为1.0。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页的标题，更改之后，相应的网页标签标题也会更改 -->
    <title>Document</title>
<!-- 尾标签 -->
</head>
<body>
    
</body>
</html>

div标签使用(div的内容写在head里边)

<!-- “区隔标记，divide” -->
div 
div{
<!-- 设置宽和高 -->
width: 300px;
height: 100px;
<!-- 边框border -->
border: 1px solid red;
<!-- 背景填充 两种background-color：和background: -->
background :aqua;
<!-- 文字上下居中 line-height -->
line-height: 100px;
<!-- 文字左右居中 -->
text-align: center;
<!-- 颜色字体 -->
color: red;

一个例子：

<!DOCTYPE html>

<head>

<meta charset=”UTF-8”>  

<title>Document</title>

<style>

div{

wight: 300px;

height: 100px;

border：1px solid red;

background :aqua;

line-height: 100px;

text-align:center;

coler:red;

}

</style>       

</head>

<body>

<h1>我是标题1</h1>    

<p>我是一个段落</p>    

<div>我是一个盒子</div>   

<div>我也是一个盒子</div>  

</body>

</html>

展示图

div选择器

head里的div{}与body里的<div >1</div>进行匹配，

①在head里的div改成.first（class选择）或者#id （id，选择id自己要写你给他的id）

Id选择优先级高于class选择

例：

<head>

.first{

}

#demo{
wight: 300px;
height: 100px;
...
}

</head>

②在你要选择的div加上class或者id

例：

<div class=”.first” id=”demo”>我是一个盒子</div>

artly1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端页面设计-第一节-基础知识1

主要记录学习前端页面设计的学习过程
复制链接

扫一扫

专栏目录