关于Web前端

最新推荐文章于 2024-04-24 09:27:42 发布

qq_45551813

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量188

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_45551813/article/details/107033451

版权

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>

qq_45551813

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
关于Web前端

Web标准的构成：主要包括结构( Structure).表现 ( Presentation )和行为( Behavior )三个方面。1）结构用于对网页元素进行整理和分类，现阶段主要学的是HTML.（类似于小鸟身体）2）表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS.（类似于小鸟外观装饰）3）行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript.（类似于小鸟行为动作）1.HTML语法规范：1.1基本语法概述1） HTML标签是由尖括号包围的关键词,例如&
复制链接

扫一扫