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.前后标签一起改变
在这里插入图片描述

这篇文章有一个评论

  1. Kaş Pudralama

    Do you mind if I quote a couple of your articles as long as
    I provide credit and sources back to your webpage? My website is in the exact same niche as yours aand my users would definitely benefit from some of the information you provie here.

    Please let me know if this ok with you. Thanks!

    Here is my webpage: Kaş Pudralama

发表评论