关于Web前端

Web标准的构成:
主要包括结构( Structure).表现 ( Presentation )和行为( Behavior )三个方面。
1)结构用于对网页元素进行整理和分类,现阶段主要学的是HTML.(类似于小鸟身体)
2)表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS.(类似于小鸟外观装饰)
3)行为是指网页模型的定义及交互的编写,现阶段主要学的是Javascript.(类似于小鸟行为动作)
1.HTML语法规范:
1.1基本语法概述
1) HTML标签是由尖括号包围的关键词,例如<html>.
2) HTML 标签通常是成对出现的,例始<html></html>, 我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。
3)有些特殊的标签必须是单个标签(极少情况)。 例如<br/>.我们称为单标签。
1.2标签关系
双标签关系可以分为两类:包含关系和并列关系。
包含关系//例如小头爸爸和大头儿子

<head>
       <title></title>   
</head>

并列关系//例如熊大熊二

<head> </head>
<body>< /body>

2.VSCode插件安装
Chinese (Simplified)LanguagePack for VS Code 中文(简体)语言包
open in Browser 右击选择浏览器打开html文件
Auto Rename Tag 自动重命名配对的HTML/ XML标签
CSS Peek 追踪至样式
3.网页开发工具
1)以上三个代码vscode自动生成基本不需要我们重写.
2)<!DOCTYPE html>文档类型声明标签 ,告诉浏览器这个页面采取htm15版本来显示页面.
3)<html lang= "en” >告诉浏览器或者搜索引学这是一个英文网站本页面采取英文来显示, <html lang="zh-CN" > 告诉浏览器或者搜索引学这是一个英文网站本页面采取中文来显示.
4)<meta charset="UTF-8" />必须写.采取UTE-8来保存文字.如果不写就会乱码.具体原理后面分析.(字符集)(万国码)

4.第一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小猪佩奇</title>
</head>
<body>
    小灰灰
</body>
</html>

运行结果:
在这里插入图片描述
5.VSCode的使用
1)双击打开软件.
2)新建文件(Ctrl+N ).
3)保存(Ctrl+S ),注意移动要保存为.html文件.
4)Ctrl+加号键, Ctrl +减号键可以放大缩小视图
5)生成页面骨架结构输入!按下Tab键.
6)利用插件在浏览器中预览页面:单击鼠标右键, 在弹出出口中点击"Open In Default Browser".
6.HTML常用标签
1)标题标签<h1>-<h6>(重要)

<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减,</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后,</h5>
<h6>具体效果剧新见。</h6>

2)段落和换行标签(重要) 双标签
在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在HTML标签中,<p>标签用于定义段落,它可以将整个网页分为若千个段落.
<p>我是一个段落标签</p>
单词paragraph[’ paeragrae]的缩写,意为段落.
标签语义:可以把HTML文档分割为若干段落.
特点:文本在一个段落中会根据浏览器窗口的大小自动换行.
3)段落和换行标签(重要) 单标签
在HTML中,一个段落中的文字会从左到右依次排列,直到刘览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br/>.
<br />单词break的缩写,意为打断、换行.
标签语义:强制换行.
特点:
(1)<br/>是个单标签.
(2) <br/>标签只是简单地开始新的一行,跟段落不一样,段落之间会插入-些垂直的问距.
4)文本格式化标签
在网页中,有时需要为文字设粗体、斜体或下划线等效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。
标签语义:突出重要性,比普通文字更重要.
加粗<strong></strong>或者<b></b>更推荐使用<strong>标签加粗语义更强烈
倾斜<em></em>或者<i></i>更推荐使用<em>标签加租语义更强烈
删除线<del></del>或者<s></s>更推荐使用<del>标签加粗语义更强烈
下划线<ins></ins>或者<u></u>更推荐使用<ins>标签加粗语义更强烈
5><div><span>标签
<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的.
<div>这是头部</div><span>今日价格</span>iv是division的缩写,表示分割、分区,span意为跨度、跨距.
特点:
(1)<div>用来布局,但是现在一行只能放一个<div>大盒子.
2. <span>标签用来布局,一行上可以放多个<span>小盒子.
7.标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1>水花61分伊戈达拉制胜抢断西决勇士再胜开拓者总分2-0</h1>
<h4>数据统计:水花兄弟合砍61分</h4>
<p>库里22投11中,三分14投4中.罚球11罚全中得到37分8篮板8助攻.职业生涯季后赛得分30+次数来到35次。超过哈登排名现役第3位,仅次于詹姆斯和杜兰特。</p>
<p>汤普森22投8中,三分8投4中得到24分3篮板2助攻,德拉蒙德格林得到16分10篮板7助攻5盖帽,凯文-鲁尼得到14分7篮板2助攻,今天勇士有7名替补出场。</p>
<h4>兄弟对决升级:小库里给哥哥造成压力</h4>
<p>库里兄弟是NBA历史上第一对在分区决寒相遇的兄弟。 在西决第1场中小库 里没有给哥哥造成压力 ,他出场19分钟 ,7投1中只得到3分3篮板2助攻,在场期间输掉10分。</p>
<p>但在西决第2场中,小库里攻防两端都打出杰出的表现。全场送出4次抢斯。包括直接抢断自己的哥哥库里。在防守遗给I库里造成了极大的困扰。</p>
<p>2019-8-8</p>
</body>
</html>

运行结果:
在这里插入图片描述8.div和span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>我是一个div标签,我一个人单独占一行</div>
    <div>我是一个div标签,我一个人单独占一行</div>
    <span>小猪佩奇</span>
    <span>蜡笔小新</span>
    <span>大头儿子</span>
</body>
</html>

运行结果:
在这里插入图片描述
9.图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>图像标签的使用:</h4> 
    <img src="1.jpg"/> 
    <h4> alt 替换文本 图像显示不出来的时候用文本替换:</h4> 
    <img src="2.jpg" alt= "我是小猪佩奇"/> 
    <h4>title 提示文本 鼠标放在图片上提示文字:</h4> 
    <img src="1.jpg"alt= "我是小猪佩奇" title= "我是小猪佩奇"/> 
    <h4> width 给图像设定宽度:</h4> 
    <img src="1.jpg"alt= "我是小猪佩奇" title= "我是小猪佩奇"width="500"/> 
    <h4> height 给图像设定高度:</h4> 
    <img src="1.jpg"alt= "我是小猪佩奇" title= "我是小猪佩奇"width="500"height="500"/> 
    <h4> border 给图像设定边框:</h4> 
    <img src="1.jpg"alt= "我是小猪佩奇" title= "我是小猪佩奇"width="500"border="15"/> 
</body>
</html>
展开阅读全文
©️2020 CSDN 皮肤主题: 游动-白 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值