前端基础速成day01--总体介绍

最新推荐文章于 2024-04-28 10:48:11 发布

小张很嚣张～

最新推荐文章于 2024-04-28 10:48:11 发布

阅读量318

点赞数

分类专栏：前端速成文章标签： css html html5 css3 javascript

本文链接：https://blog.csdn.net/weixin_47000305/article/details/110384908

版权

前端速成专栏收录该内容

25 篇文章 2 订阅

订阅专栏

前端发展史

前端开发：用技术实现用户界面（site or app）+ 数据交互

技术： HTML+ CSS+ JS +框架

拿数据 + 静态界面 ----》用户界面

web1.0 时代静态用户只能阅读者没有交互

web2.0 js 交互

web3.0 node.js 大前端时代

左侧第5个图标扩展搜索一下两个插件右下角 install 安装即可

chinese汉化

view in broswer 查看

关闭重新打开！！！

把自动保存打开

文件 —》自动保存打对勾

3 。改主题和文件图标

一：HTML

作用：负责结构（有什么）

HTML： Hyper Text Markup Language

Markup:

不是编程语言是标记语言 (死，规定好的)

HyperText

超文本： 1. 超越文本类型不仅仅可以展示文字，图片，超链接，音视频，动画…

                 2.     超文本传输协议      .html

1、HTML标记写法

双标签
<标记名字>标记内容</标记名字>
开始标记           结束标记
  
单标签
 <标记名字>
     图片:image
 <img >

2、属性：辅助信息

<名字  属性名="属性值"   属性名="属性值"  属性名="属性值" ....>内容</名字>  也可以叫元素

<img src="图片路径">

3、HTML文档结构

(1)模板

快捷键 !+enter 快速！！！

shift+1 ===!

(2)关系

嵌套关系—》父子关系

平行关系—》兄弟关系

(3)模板重点

<!DOCTYPE html>

作用：不是标签必须放在第一句 h5文档声明告诉浏览器以哪个规则解析文档避免怪异模式

<!-- lang语言  en 英文 zh-cn中文 -->
<html lang="en">

作用：告诉浏览器以英文解析文档内出现的字符因为浏览器看到的都是2进制符号

 meta 元信息标签  
    charset  字符编码集
    UTF-8 万国码  1-4字节 

    二进制 01 一位二进制 1bit 
    最基本单位 1Byte字节 = 8bit

    常见编码集：
    ASCII 美国标准信息交换码 1字节  最高位0  2^7 = 128 
    Unicode编码  2^8 = 256个字符 
    UTF-8 ,UTF-16

    本地:
    GB2312  繁体字不支持
    GBK    加入繁体字的支持
    GB18030   
 
    <meta charset="UTF-8">

作用：设置编译码字符集

   <!-- 网页标题 -->
    <title>淘宝-淘，我喜欢！！！</title>

作用：搜索引擎记住网页，收藏时的书签

(4)代码注释

作用：提高代码可读性

ctrl+/ 加/取消注释

HTML :

CSS: /**/

/*
 *Author:Mike
 *Time:
 *Fun:
*/

JS : 单行注释多行注释

var a ; //

/*求和*/
var a ;
var b;
var c = a+b ;

(5)浏览器

代码—》浏览器调—》一致—》用户看

常用五大浏览器:

常用：拥有自主研发内核的浏览器

浏览器	内核
Chrome	Webkit—>Blink
Safari	Webkit
Firefox	Gecko
IE	Trident
Opera 欧朋	Presto —> Blink

4、开发者工具

F12 or ctrl+shift+i or 鼠标右键检查

二、HTML标签学习

1、文本相关的标签

标题系列：属于语义化标签

    <h1>美国卫生部长抵台 洪秀柱开炮了！</h1>
    <h2>美国卫生部长抵台 洪秀柱开炮了！</h2>
    <h3>美国卫生部长抵台 洪秀柱开炮了！</h3>
    <h4>美国卫生部长抵台 洪秀柱开炮了！</h4>
    <h5>美国卫生部长抵台 洪秀柱开炮了！</h5>
    <h6>美国卫生部长抵台 洪秀柱开炮了！</h6>

一个界面有且只能有h1标签
不建议用h3以下的标签

段落标签 p paragraph段落

<p>一句or多句文字</p>  有没有换行  除非写换行标签

换行标签

<br>   break

水平线hr

<hr color="" align=""  width=""> 
color:颜色
align:水平对齐方式 left/center居中(默认)/right
width:宽度

粗体 b,strong

bold  <b>文字</b> 无语义的
      <strong>文字</strong> 有语义的

斜体标签 i,em

<i>文字斜体</i> 无语义的
<em>文字斜体</em> 语义化标签

下划线标签 u,ins

<u>文字加下划线</u>
<ins>文字加下划线</ins>语义化标签

中划线标签 s,del

<s>中划线标签</s>
<del>中划线标签</del>

上标标签

x<sup>3</sup>

下标标签

H<sub>2</sub>O

格式输出标签

<pre>
int a = 10;
int b = 20;

</pre>

字符实体

版权符号c  &copy;
人民币     &yen;
大于号   &gt; great than
小于号  &lt; less than

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tia7Hq9g-1606711828438)(media/常用字符编码.png)]

2、布局相关的标签

区域标签div(division)

角色：大盒子大容器大区域(块)

<div>
   图片/链接/文字/大小盒子
</div>

默认样式： 1：宽度会取父盒子的全部宽度作为自己宽度高度由内容决定

小容器标签span

角色;小盒子小区域小容器

<span>
    小图标or简短文字
</span>

列表系列

作用：装一些逻辑上相关的数据

无序列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0QZOg74p-1606711828446)(media/wxlb.png)]

  <ul>
        <li>数据项1</li>
        <li>数据项2</li>
        <li>数据项3</li>
        <li>数据项4</li>
  </ul>
type=""  前缀标识属性  值为:desc/square/circle 
    desc 实心圆(默认)
    circle 空心圆
    square 正方形

特性：大区域宽度100% 高度取决于内容

有序列表ol>li

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MSFMcF0D-1606711828448)(media/yx.png)]

 <ol type="a" start="4">
        <li>数据文本</li>
        <li>数据文本</li>
        <li>数据文本</li>
        <li>数据文本</li>
    </ol>
type=""  前缀标识属性  值为:a/A/i/I  type="a" 以小写字母a作为标记类型
start:设置前缀标识从哪个字符开始 只能写属性 start="3"从第3个小写字母开始

自定义列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hjNvJW99-1606711828452)(media/zdy.png)]

 <!-- defined list -->
    <dl>
        <!-- defined title -->
        <dt>标题</dt>
        <!-- defined data -->
        <dd>文本内容</dd>
        <dd>文本内容</dd>
        <dd>文本内容</dd>
        <dd>文本内容</dd>
    </dl>

3、功能性标签

图片标签img

<img  src="" alt="" title="">
src:source路径

相对路径：与你当前.html文件有关系
/ 根目录  ./同级目录下  ../上一级 （翻出一个文件夹） ../../ 

绝对路径：与你当前.html文件没有关系
        1.网络路径
        2.本地路径  根目录开始 
        C:/Users/Administrator/Desktop/web学习/第一阶段/my/day01/代码/image/1.jpg

alt:图片加载失败时的文本提示 

title:鼠标悬停在图片身上的文字提示

面试题：

你如何理解语义化？作用?

h1~h6 ,列表系列,em,strong,ins,del

有利于搜索引擎优化SEO (因为搜索引擎的爬虫根据语义化标签里的内容确定网站的权重)
当没有css样式时，语义化标签同样可以呈现清晰的结构
语义化标签代码可读性更高，后期结构好维护

小张很嚣张～

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端基础速成day01--总体介绍

前端发展史前端开发：用技术实现用户界面（site or app）+ 数据交互技术： HTML+ CSS+ JS +框架拿数据 + 静态界面 ----》用户界面web1.0 时代静态用户只能阅读者没有交互web2.0 js 交互web3.0 node.js 大前端时代左侧第5个图标扩展搜索一下两个插件右下角 install 安装即可chinese汉化view in broswer 查看关闭重新打开！！！把自动保
复制链接

扫一扫