Web前端

xioalu123

已于 2022-10-19 17:59:05 修改

阅读量1.6k

点赞数

文章标签： html 前端 javascript

于 2022-10-19 17:19:59 首次发布

本文链接：https://blog.csdn.net/xioalu123/article/details/127411059

版权

熟悉HTML

一，什么是HTML和CSS？

1. HTML：超文本标记语言（结构）

 CSS:层叠式样表（样式）

（与JavaScript并称”前端三巨头“）
JavaScript：用来做交互的一种脚本语言。

2.五大浏览器：

IE/Edge,Safari,Chrome, Firefox,Opera

3.前端所需技术：

UI设计师：设计稿
web前端开发工程师：
		设计稿→代码
		数据库里的数据→显示到页面
		HTML+CSS
		  HTML:结构
		  Css:样式
web后端：

二，HTML基本结构与属性

1.所需工具：

ctrl+s:        保存
ctrl+a:        全选
ctrl+x/c/v:   剪切.复制.粘贴
ctrl+z/y:      撤销/前进
shift+end:   从头选中一行
shift+home:从尾部选中一行
shift+alt+↓：快速复制一行
alt+↓或↑：    快速移动一行
tap:               向后缩进
tap+shift:       向前缩进

2.超文本：文本内容+非文本内容（图片，视频，音频等）

标记：<单词>

语言：编程语言

3.标签：

标记也叫标签<header> <footer>
写法分为两种：
单标签：<header>
双标签：<header></header>
创建标签的快捷键：tap
标签可以上下排列也可以组合嵌套
标签的属性：来修饰标签的，设置当前标签的一些功能。
   <标签 属性=“值”属性2=“值2”>

4.体验JS魅力：

<style>
div{color:red;font-style:italic;}


</style>



<div>HTML+CSS</div>

<script>

    let div =document.querySelector('div');
let time=null;
let flag=true;
div.onmouseover=function(){
timer=setInterval(()=>{
    if(flag){
        div.style.color='blue';
    div.stylefontstyle='normal';

    }
    else{
    div.style.color='red';
    div.style.fontstyle='italic';
    }
    flag=!flag;
},500);

};
div.onmouseout=function(){
    clearInterval(timer);
};

</script>

三，HTML细化

1.HTML初始代码：

每个.html都有的代码，要复合html文件的规范写法。
创建.html初始代码快捷键：!+tap键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

初始代码释意：

文档声明：告诉浏览器这是一个html文件 html最外层标签：包裹着所以html标签代码 lang="en"表示一个英文网站 lang=" zh-CN"表示一个中文网站元信息：是编写网页中的一些赋值信息国际编码让网页不出现乱码的情况 Document 设置网页标题显示网页区域

2.HTML中注释：

写法：<！-- 注释的内容–>在浏览器中看不见，只能在代码中看到注释的内容。

意义：
1.把暂时不用的代码注释起来，方便以后使用。
2.对开发人员进行提示。

快捷添加注释与删除注释：
1.ctrl+/
2.shift+alt+a

 <!-- hello world -->

3.HTML语义化：

根据网页中内容的结构，选择合适的标签进行编写。

4.标题与段落：

标题：双标签

....

在一个网页中h1标题最重要，并且一个.html文件中只能出现一次h1标签。

一个段落就是一个p标签，h2为二级标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>林丹</h1>
    <h2>人物简介</h2>
    <p>林丹，汉族，1983年10月14日出生于福建省龙岩市上杭县临江镇，中国羽毛球男单运动员，2008年北京奥运会、2012年伦敦奥运会羽毛球男单冠军，羽毛球史上第一位集奥运会、世锦赛、世界杯、苏迪曼杯、汤姆斯杯、亚运会、亚锦赛、全英赛、全运会及多座世界羽联超级系列赛冠军于一身的双圈全满贯选手，被誉为中国羽毛球一哥，21世纪初期世界羽毛球四大天王之一</p>
    <h3>个人经历</h3>
    <p>1988年，5岁开始接触羽毛球。 [1]  2000年进入国家队。 [1]  2002年8月，首次登上羽毛球世界排名第一的位置。 [2]  2005年12月，获羽毛球世界杯男单冠军，并于2006年卫冕。 [3] </p>
    <p>2012年伦敦奥运会成功卫冕，成为首位在奥运会羽毛球男单项目中实现卫冕的运动员。 [5]  2013年8月，第五次获得羽毛球世锦赛男单冠军（2006、2007、2009、2011、2013），连续三年在世界大赛决赛中战胜李宗伟 [6]  。2014年仁川亚运会男单冠军，成功卫冕并实现了双圈全满贯。 [7]  2016年3月，第六次获全英赛男单冠军。 [8]  8月第四次征战奥运会。</p>
   
</body>
</html>

5.文本修饰标签：

强调->双标签：
表示强调，对文本进行斜体
_{下标文本
^上标文本}~~删除文本~~
插入文本

区别：1.写法和展示效果是有区别的，一个加粗，一个斜体。
          2.前者 强调性更强

 <strong>这是一段需要强调的文本</strong>
        <em>这是一段需要强调的文本</em>

6.图片标签与图片属性：

图片标签：单标签img
                        src:引入图片的地址。
                         alt:当图片出现问题，会显示一段友好的提示文字。
                        title:提示信息
                        width:,height:控制图片大小

7.引入文件的地址路径：

引入路径：  ./引入同一级别
            ../引入外面级别

8.跳转链接：

双标签
href属性：链接地址
target属性:可以改变链接打开方式，默认情况下：在当前页面打开_self 新窗口打开_blank

标签：改变链接默认行为（放在里面）

9.跳转锚点：

实现一：
#号
id属性
实现二：
#号
name属性

10.特殊符号：

空格符： &nbsp
版权：&copy
注册商标：&reg
小于号：&lt
大于号：&gt
和号：&amp
人民币:&yen
摄氏度：&deg
（可以搜索”w3schools")

11.列表：

     无序列表：
        <ul> <li>:列表的最外层容器、列表项
        组合使用，他们之间不能有其他标签

           type属性：改变前面标记的样式（一般用css控制 ）

	有序列表： 
       <ol><li>:列表的最外层容器、列表项
        组合使用，他们之间不能有其他标签

	定义列表：（列表项需要添加标题


     <dl>:定义列表
   <dt>:定义专业术语或名词
  <dd>:对名词进行解释或描述

终于写完啦