前端基础01-CFANZ编程社区

1、标题标签分几级？最大的是谁？

h1-h6 h1

2、段落标签为？

3、html的代码注释如何实现？快捷键是什么？（习惯了快捷键都忘记了注释怎么输入的了）

ctrl + /

4、能实现加粗效果的标签有哪些?谁代表强调？（忘记了）

前端基础01_加载

b和strong都可以代表加粗，后者代表特别强调的语义；

<!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>
    <!-- 注释 -->
    <img src="https://s2.51cto.com/blog/activity/bride/DetailsBride.gif?x-oss-process=image/ignore-error,1" alt="我是一个图片" title="鼠标" width="200px" height="300px">

    
    <b>我是粗大的</b>
    <strong>我也是粗大的</strong>
</body>
</html>

5、能实现倾斜的标签有哪些？谁代表强调？（忘记了）

i和em都可以实现倾斜，后者代表一般强调语义；

前端基础01_加载_02

倾斜效果

<!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>
    <!-- 注释 -->
    <img src="https://s2.51cto.com/blog/activity/bride/DetailsBride.gif?x-oss-process=image/ignore-error,1" alt="我是一个图片" title="鼠标" width="200px" height="300px">

    
    <b>我是粗大的</b>
    <strong>我也是粗大的</strong>


    <i>倾斜</i>
    <em>倾斜</em>
</body>
</html>

6、能实现删除线的标签有哪些？那个是今后的主流？（不会了）

del

s和del都可以实现删除线效果，后者即将替代前者

<!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>
    <!-- 注释 -->
    <img src="https://s2.51cto.com/blog/activity/bride/DetailsBride.gif?x-oss-process=image/ignore-error,1" alt="我是一个图片" title="鼠标" width="200px" height="300px">

    
    <b>我是粗大的</b>
    <strong>我也是粗大的</strong>


    <i>倾斜</i>
    <em>倾斜</em>

    <s>删除删除删除</s>
    <del>删除</del>
</body>
</html>

前端基础01_加载_03

7、请设置img标签的资源：t2.jpg 鼠标悬停文字为：鼠标设置宽度为200、设置高度为300 设置图片未加载时候的提示文字为：我是一个图片

<!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>
    <!-- 注释 -->
    <img src="https://s2.51cto.com/blog/activity/bride/DetailsBride.gif?x-oss-process=image/ignore-error,1" alt="我是一个图片" title="鼠标" width="200px" height="300px">
</body>
</html>

1、先把图片准备好，复制到当前html文件同一级文件夹中

2、src代表资源，它后面的值应该写想要加载的那张图片的名字

3、width代表宽度（横向距离）、height代表高度（纵向距离）；注意：宽或高只设置其中一个属性，另外一个会按照原图的比例去进行缩放显示；如果宽和高都不设置，图片会按照原本的大小去显示

4、title="鼠标悬停时候的提示文字"

5、alt （1）当图片未正常加载的时候，文字才会被别人看到（2）网页阅读器读取此内容给视障用户听，提升用户体验

8、写出web前端三大核心技术及作用

HTML 骨架

css 样式美化

JavaScript 逻辑判断

1、HTML（超文本标记语言），是用来描述网页的一种语言；

2、CSS（层叠样式表），可以用于控制页面中元素的样式；

3、JavaScript，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。

HTML：负责网页的架构

CSS：负责网页的样式、美化

JS：负责网页的行为

9、写一个超链接，新窗口打开百度

<!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>
    <!-- 注释 -->
    <img src="https://s2.51cto.com/blog/activity/bride/DetailsBride.gif?x-oss-process=image/ignore-error,1" alt="我是一个图片" title="鼠标" width="200px" height="300px">

    
    <b>我是粗大的</b>
    <strong>我也是粗大的</strong>


    <i>倾斜</i>
    <em>倾斜</em>

    <s>删除删除删除</s>
    <del>删除</del>



    <a href="https://www.baidu.com/">跳转过去</a>
</body>
</html>