网页前端学习第一天

最新推荐文章于 2023-05-10 14:34:34 发布

zmy_0615

最新推荐文章于 2023-05-10 14:34:34 发布

阅读量417

点赞数 2

文章标签： html5 html

本文链接：https://blog.csdn.net/zmy9forever/article/details/108731988

版权

网页学习第一天

一、HTML简介

1、什么是HTML?

HTML是超文本标记语言，它是用来描述网页的一种语言。不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。

超文本有2层1含义：

a:可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。

b:可以从一个文件跳转到另一个文件，与世界各地主机的文件相连。

2、网页的形成

网页是由网页元素组成的，这些元素利用HTML标签描述出来，然后通过浏览器解析来显示给用户的。

3、web标准

web标准是由W3C组织和其他标准化组织制定的一系列标准的集合，W3C（万维网联盟）是最著名的国际标准化组织。

3.1为什么需要Web标准？

浏览器不同，它们显示页面或排版就有些差异。

3.2 web标准的构成

主要有结构（structure）、表现（presentation）、和行为（behavior）三个方面构成。

结构：用于对网页元素进行整理和分类，现阶段学的主要是HTML

表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS

行为：指网页模型的定义及交互的编写，现阶段学的主要是JavaScript

其中结构最重要。

二、HTML语法规范

1、基本语法概述

a: HTML标签是由尖括号包围的关键词，例如<html>

b: HTML标签是成对出现的，例如<html></html>,称为双标签，标签和总的第一个标签是开始标签，第二个标签是结束标签。

c: 有些特殊的标签必须是单个标签（极少情况），例如<br />,成为单标签。

2、标签关系

双标签关系可以分为两类：包含关系和并列关系。

包含关系：并列关系：

3、HTML的基本结构标签

<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        内容。。。
    </body>
</html>

<html>是根标签 <head>是头部标签 <tittle>是题目标签

<！DOCUTYPE html>是文档类型声明标签，使用的是html5标签

<html lang="en"> 其中lang是language的缩写，表示的是语言，en定义的语言是英语，zh-CN定义语言为中文

三、各类标签

1、标题标签

字体的粗细和大小依次减小。

2、段落标签和换行标签

<p>是一个段落标签</p>

<br /> 换行标签（强制换行）

3、文本格式化标签

标签语义：突出重要性，比普通文字更重要。

加粗：<strong></strong>或<b></b>

倾斜：<em></em>或<i></i>

删除线：<del></del>或<s></s>

下划线：<ins></ins>或<u></u>

4、<div>和<span>标签

div是division的缩写，表示分割、分区。span意为跨度、跨距。

<div>独占一行，是块元素

<span>是行内元素，多个span的内容可以在一行显示。

5、图像标签和路径

5.1、<img />是图像标签

其中src：用于指定图像文件的路径和文件名；

alt：替换文字，当图片不显示时，alt中的文字会显示。

title：提示文本，鼠标放到图像上时显示的文字。

border：设置边框粗细。

width：图像宽度。

height ：图像高度。

a ：这些属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格隔开。

b ：属性采取键值对的格式，即key = "value"的格式，属性 = “属性值”。

c：图像标签可以拥有多个属性。

5.2、路径

相对路径：1、同一级路径：图像和html同一级，如<img src="tuxiangming.jpg">

2、下一级路径：如创建了一个文件夹images <img src="images/tuxiangming.jpg">

3、上一级路径；如 <img src="../tuxiangming.jpg">

绝对路径：c:\ 或完整的网络地址。

6、超链接标签 <a></a>

6.1、语法：<a href = " " target = " >文本或图象</a>

期中，href：用于指定链接目标的url地址，target：用于指定连接页面的打开方式。如果不写默认为当前页面打开，-blank为在新创口打开。-self为默认值，和不写target的方式一样。

6.2、链接分类

a：外部链接，<a href = "https://www.baidu.com">百度</a>

b：内部连接，<a href = "。。。.html">。。。</a>

c：空链接，<a href = "#"></a>

d：下载链接，（文件.exe 或文件.zip）<a href = " 。。。.zip">。。。</a>

e：锚点链接：当点击链接可以快速定位到页面中的某个位置，分两步。

第一步：在链接文本的href属性中，设置属性值为 #名字的形式。

第二步：找到目标位置标签，里面添加一个id id = “名字”。

例如：<a href = "#live">个人生活</a>

7、注释和特殊字符

7.1、注释的快捷键为 ctrl + /

8、表格标签

8.1、表格标签主要用于显示、展示数据

8.2、表格的基本语法：

<table>
    <tr>
        <thead>    /* 表格的头部区域   <thead>标签中必须含有<tr>标签*/
            <th></th>   /*表头单元格标签     加粗居中显示 */
        </thead>
    </tr>

    <tr>
        <tbody> /* 表格的主题区域 */
            <td><td> /* 表格的单元格区域   */
        </tbody>
    </tr>
</table>

3、表格属性

这个表格属性在表格中不常用，在CSS布局中常用。

属性名	属性值	解释
align	left、right、center	规定表格周围元素的对齐方式
border	1或·。。。	规定表格是否有边框，默认为无
cellpadding	像素值	规定单元格边沿与内容之间的空白，默认为1像素
cellspacing	像素值	规定单元格之间的空白，默认为2像素
width	像素值或百分比	规定表格的宽度

4、合并单元格

合并单元格方式：1、跨行合并：rowspan = "合并单元格的个数" 上面的单元格为目标单元格

2、跨列合并：colspan = "合并单元格的个数" 左侧为目标单元格

9、列表标签

列表是用来布局的。列表的最大特点是整齐、整洁、有序。

列表分为有序列表、无序列表、自定义列表。

9.1、有序列表

<ol>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
</ol>

里面有5个li标签，显示结果是有顺序的 12345

9.2、无需列表

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

里面有5个li标签，是没有排序的，每个li标签前面会出来一个黑点。

9.3、自定义列表

<dl>
    <dt></dt>
    <dd></dd>   
</dl>

zmy_0615

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
网页前端学习第一天

网页1、什么是HTML?HTML是超文本标记语言，它是用来描述网页的一种语言。不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。超文本有2层1含义：a:可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。b:可以从一个文件跳转到另一个文件，与世界各地主机的文件相连。2、网页的形成网页是由网页元素组成的，这些元素利用HTML标签描述出来，然后通过浏览器解析来显示给用户的。3、web标准web标准是由W3C组织和其他标准化组织制定的一系列标准的集合，W3C（.
复制链接

扫一扫