web前端零基础

web前端零基础

html(2)

文档类型<!DOCTYPE>

<!DOCTYPE html>

这句话就是告诉我们使用哪个html版本? 我们使用的是 html 5 的版本。 html有很多版本,那我们应该告诉用户和浏览器我们使用的版本号。标签位于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范,必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能按指定的文档类型进行解析。

注意: 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的,但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则),所以大家放心的使用HTML5的文档类型就好了。

字符集

<meta charset="UTF-8">

utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文 包括6763个汉字

BIG5 繁体中文 港澳台等用

GBK包含全部中文字符 是GB2312的扩展,加入对繁体字的支持,兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

记住一点,以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

HTML标签的语义化

语义化:就是指标签的含义。
好处:

  • 方便代码的阅读和维护
  • 同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容
  • 使用语义化标签会具有更好地搜索引擎优化
标题、段落、水平线
  • 注意:h1标签因为重要,尽量少用,一般h1是给logo用的。
  • 段落标签:paragraph 段落
    <p>文本内容</p>
  • 水平线标签:horizontal 横线
    <hr /> 是单标签
  • 换行标签:break 换行
    <br /> 单标签
  • div 、span标签
    div是块元素,span是内联元素
文本格式化标签
文本格式化标签
图像标签

img 图像 单标签
属性:

  • 属性:src,属性值:URL,描述:图像路径
  • 属性:alt,属性值:文本,描述:图像不能显示时的替换文本
  • 属性:title,属性值:文本,描述:鼠标悬停时显示的内容
  • 属性:width,属性值:像素,描述:设置图像的宽度
  • 属性:height,属性值:像素,描述:设置图像的高度
  • 属性:border,属性值:数字,描述:设置图像边框的宽度
<img src="#" width="300"   />
<标签名 属性1=“属性值1” 属性2=“属性值2” >内容</标签名>
链接标签

anchor 锚点
注意:
1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >

3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href=”#”),表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target:用于指定链接页面的打开方式,其取值有self和blank两种,其中self为默认值,blank为在新窗口中打开方式。
锚点定位

通过创建锚点链接,用户能够快速定位到目标内容。
1.使用<a href="#id">链接文本</a>
2.使用相对应的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>锚点测试</title>
</head>
<body>
    <!-- 因为a标签是内联元素,所以给div包裹起来,给div设置高度5000px -->
    <div style="height: 5000px;"><a href="#mao" >点击一下</a></div>
    <p id="mao">这是点击之后会出现在这里。</p>
</body>
</html>

小知识:base标签,只能写在<head></head>

<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>

<body>
<img src="eg_smile.gif" /><br />
<p>请注意,我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>

<br /><br />
<p><a href="http://www.w3school.com.cn">W3School</a></p>
<p>请注意,链接会在新窗口中打开,即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>

</body>
</html>

特殊字符标签
在这里插入图片描述
注释标签
<!-- 注释语句-->
//单行注释
/*
多行注释
*/
路径
  • 绝对路径:“D:…”
  • 相对路径:
  1. 图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如<img src=“logo.gif” />。
  2. 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img src=“img/img01/logo.gif” />。
  3. 图像文件位于HTML文件的上一级文件夹:在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推,如<img src=”…/logo.gif” />。
列表标签

列表标签中只能嵌套li

  • 无序列表ul 没有顺序级别之分,是并列的。
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
........
</ul>
  1. 有序列表ol有顺序级别之分
<ul>
<ol>列表項1</ol>
<ol>列表項2</ol>
<ol>列表項3</ol>
........
</ul>

自定义列表dl

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>
<!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>自定义列表使用</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        dt {
            font-size: 18px;
            font-weight: bolder;
        }

        dl {
            float: left;
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
            /* text-align: center;   */
        }
       
    </style>
</head>

<body>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>
    <dl>
        <dt>服务支持</dt>
        <dd>售后政策</dd>
        <dd>自助服务</dd>
        <dd>相关下载</dd>
    </dl>
</body>

</html>

表格table

表格
创建表格
<table>
<tr>
<td>单元格内的文字
</td>

1.table 用来定义一个表格
2.tr 用来定义表格的一行
3.td 表示用来定义表格的单元格,必须嵌套在tr标签中
注意:tr标签中只能嵌套td,td标签就像一个容器,可以容纳所有元素

表格属性

属性名:border,含义:设置表格的边框(默认border=“0” 无边框),属性值:像素值
属性名:cellspacing,含义:设置单元格与单元格边框之间的空白间距,属性值:像素值,默认2
属性名:cellpadding,含义:设置单元格内容与单元格边框之间的空白间距,属性值:像素值 默认1
属性名:width,含义:设置表格的宽度,属性值:像素值
属性名:height,含义:设置表格的高度,属性值:像素值
属性名:align,含义:设置表格在网页中的水平对齐方式,属性值:left、center、right

画外音(vscode 扩展工具)
工具扩展
擴展工具
在这里插入图片描述

1.护眼背景
在这里插入图片描述
2.复制文件
在这里插入图片描述
3.前后标签一起改变
在这里插入图片描述

发表评论