web前端第一天

最新推荐文章于 2024-07-19 12:58:53 发布

PiKanZiGui

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量95

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/PiKanZiGui/article/details/131600482

版权

一、html骨架

在vscode中的html文件中英文输入法状态下输入!后敲空格会自动出现html框架

注释：ctrl+/

<!DOCTYPE html>
<!-- 声明文档 html5 -->
<html lang="en">
  <!-- 语言为英文，若要改为中文则属性值改为ch-zn -->
<head>
  <meta charset="UTF-8">
  <!-- 编码为UTF-8 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 此处title中的内容为页面的名字 -->
</head>
<body>
  <!--  -->
</body>
</html>

二、一些常用标签

1.标题标签<h></h>

标题标签 h1-h6逐渐变小独占一行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>我是标题</h1>
  <h2>我是标题</h2>
  <h3>我是标题</h3>
  <h4>我是标题</h4>
  <h5>我是标题</h5>
  <h6>我是标题</h6>
  <!-- 标题标签 h1-h6逐渐变小 独占一行-->
</body>
</html>

2.段落标签<p></p>

段落标签之间的内容自称一段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
  <!-- 段落标签   p行与行之间空 -->
  <p>akdjflkajdslfkjaldksjflkadjsf</p>
  <p>ladjfklajdlfkjalkdsjfkljasdklfj</p>
  <p>ajdklfj;ladks;lgjak;kcmvkzljl;akdjf</p>
  
</body>
</html>

3.换行标签<br/> 水平线标签<hr/>

<br/>是换行标签，用来换行

<ht/>是水平线标签，用来添加水平线

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- br 换行标签 -->
  <!-- hr 水平线标签 -->
  aajsldkjczxlkaklsdjs</br>dkfjlkajsd
  <hr/>
</body>
</html>

4.文本格式化标签

加粗：strong或者b

倾斜：em或者i

删除线：del或者s

下划线：ins或者u

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 加粗:strong或者b  倾斜:em或者i  删除线:del或者s 下划线:ins或者u  -->
</body>
</html>

5.无语义标签<div></div> <span></span>

div和span的区别：div独占一行，多用于布局；span一行可以存在多个

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- div容器，独占一行   多用于布局-->
  <!-- span一行可存在多个 -->
  
</body>
</html>

6.图片标签<img src="">

相对地址：../返回上一级 ./同一级 /下一级

图片标签的一些属性：

1.alt：图片地址发生错误时，用来提示的字

2.title：鼠标经过时，现实的文字

3.border：边框

4.width：宽度

5.height：高度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- src指向图片位置 alt:图片地址发生错误时，用来提示的字
  title：鼠标经过时，显示的文字
  border：边框
  width：宽度
  height：高度
  -->
  <img src=".">
  <!-- img src="图片地址" 加载失败alt="" 鼠标经过的提示title="鼠标经过的提示" 宽width="" 高height="" 边框border=""-->
</body>
</html>

7.视频标签<video src=""></video>

视频标签的一些属性：

1.controls：控件谷歌浏览器不支持直接播放音视频，加上控件后即可播放

2.autoplay：自动播放打开网页自动播放视频

3.muted：静音播放因为谷歌浏览器不支持有声自动播放，所以一般与autoplay一起使用

4.poster：等待加载时的显示图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <video src="视频地址"></video>
  <!-- 
  controls：控件
  autoplay：自动播放
  muted：静音播放
  poster：等待加载时的显示图片
   -->
</body>
</html>

8.音频标签<audio src=""></audio>

音频标签的一些属性：

1.controls：控件谷歌浏览器不支持直接播放音视频，加上控件后即可播放

2.autoplay：自动播放打开网页自动播放视频

3.muted：静音播放因为谷歌浏览器不支持有声自动播放，所以一般与autoplay一起使用

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

9.链接标签<a href=""></a>

<a href="链接的网页地址">被超链接的文字也可以是图片标签</a>

链接标签的一些属性：

1.target：打开方式默认情况下是" _self " 即当前窗口打开,"_blank"是在新的空白页打开

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 默认当前窗口打开 
  href：跳转的位置
  target：打开方式    默认：_self   新窗口打开：_blank-->
  <a href="链接的网页地址">链接的字也可以是图片标签</a>
</body>
</html>

10.锚链接

锚链接的作用

1.对页面的作用正常来讲，页面中增加的链接锚链接都和页面本身有一定的关系，因此，锚文本可以做为锚链接所在的页面的内容的评估。例如：本篇文章中含有“SEO”的链接，那么，说明本篇文章和SEO有一定关系。
2.对指向页面的作用锚链接能精确的描述所指向页面的内容，因此，锚链接能做为对所指向页面的评估。
3.对关键词排名影响锚链接对于关键字排名的意义在于它可以让内容页随机链接在一起，让蜘蛛可以很好的抓取更多页面，权重也能均匀的传递，同时增强页面的相关性，最终提升网站的关键词排名。

使用方法如以下代码所示，在连接的href所指向地址中填上想进行锚链接的地方的id属性值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <a href="对应的id">个人经历</a>
    <!-- id属性——————身份证号 -->
    <div id="自定义一个id">个人经历</div>
</body>
</html>

11.有序列表<ol><li></li></ol>

<li>中间加列表的元素</li>

有序列表的属性：

type：后面属性值可以加a，A，1等，然后会根据type的属性值来显示有序列表前面的前缀

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 有序列表 ol   li-->
  喜欢的食物
  <ol type="A">
      <li>榴莲</li>
      <li>臭豆腐</li>
      <li>鲱鱼罐头</li>
      <li>奶茶泡饭</li>
  </ol>
</body>
</html>

12.无序列表<ul><li></li></ul>

<li>中间加列表的元素</li>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  你喜欢的明星是？
  <!-- type=
  "circle”空心圆
   -->
  <ul type="">
    <li>丁真</li>
    <li>法外狂徒张三</li>
    <li>化成雨</li>
    <li>罗翔</li>
  </ul>
</body>
</html>

13.自定义列表<dl><dt></dt><dd></dd></dl>

<dd>中间加列表的元素</dd>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <dl>
    <dt>
      你们喜欢的明星是谁
    </dt>
    <dd>
      张三
    </dd>
  </dl>
</body>
</html>

14.iframe框架<iframe></iframe>

嵌套网页

使用方法如下图代码所示：

一：<iframe src="想进行嵌套网页的地址"></iframe>

二：在连接标签a的target属性中填上想进行嵌套网页的iframe的id属性值

iframe框架的一些属性：

1.width：设置窗口宽度

2.height：设置窗口高度

3.iframeboeber：设置边框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  这是我的主页面
  <iframe src="https://www.taobao.com"></iframe>

  <a href="https://www.taobao.com" target="nn">去淘宝</a>
  <iframe name="nn" frameboeder="0" width="800px" height="200px"></iframe>
</body>
</html>