网页开发设计HTML5+CSS（标签、框架、标记选择器等）（一）

积极向上的小徐

于 2021-09-30 00:41:10 发布

阅读量739

点赞数 2

文章标签： css html5 html web

本文链接：https://blog.csdn.net/Green_Hand_is_me/article/details/120554102

版权

本文介绍了网站与网页的基本概念，深入讲解了HTML5的入门知识，包括HTML的结构和常见标签如

、
、

等。此外，还探讨了CSS的基础，如选择器和样式规则，并举例说明了行内、内嵌和外部样式表的使用。内容适合初学者入门，帮助理解网页开发的基础原理。

摘要由CSDN通过智能技术生成

最近学了不少东西，感觉得及时整理，强化学习。

言归正传，下面就整理一下最近学的网页开发一类内容（包括HTML5和CSS，以后会整理一下JavaScript等）

一、网站和网页

首先，简单滴了解一下网站和网页。

网站（Website），可以将其当作为计算机中的文件夹，文件夹中存放网页文件，网页之间彼此通过超链接的方式串联而成，而这些网页存在某一台电脑上，用户只需要在浏览器中输入网址就可以浏览或者访问主机中的数据。

网页（Webpage），实际上就是一个文件夹，存放在网页服务器中，可以通过网址（URL）来访问网页。一般是用HTML语法编写，必须通过浏览器（Browser）解析（解析成我们日常看到的访问到的页面）。

二、HTML5

2.1、HTML入门

HTML（HyperText Markup Language)是超文本标记语言，只是一种标记（tags）。（感觉HTML是比较容易学习滴）

学习HTML只需要准备好浏览器和纯文本编辑软件（例如记事本），可以使用Visual Studio Code，需要啥就可以直接在软件的应用中心安装插件即可。（下面写滴代码都是在Visual Studio Code上编写拿过来滴，浏览器用滴是Microsoft Edge）

2.2、HTML标记类型

HTML所有的的标记都是用"<"和">"括起来，有容器标记和单一标记两种HTML标记。

2.3HTML的组成

一个HTML至少需要由<html></html>开始，分为头<head></head>和主体<body></body>两部分组成。

<!DOCTYPE html>
<html>
    <head>
        <title>标题</title>
    </head>
    <body>
     网页内容
    </body>
</html>

哎呀，说了这么多(其实也不太多，如果比较感兴趣有一些东西可以去百度收集，这里偶就是来个铺垫，了解一下相关内容），下面就让我们直面HTML标签使用吧!

2.5、HTML标签使用（这里只列出一些基本的标签，还有很多标签没有列出，感兴趣滴可以自己去各个网站学习哦）

1）<p>标记，这个标签可以分段落，换行可以使用<br>

        <p>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
        <br>

2)<pre>，此标签<pre></pre>之间的文字按照原始代码的排列方式进行显示

<pre>
      HTML的全称为超文本标记语言，是一种标记语言。
 它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
     HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
 </pre>

3)<hr>,分割线。

<p>hello</p>
<hr>

4）<h1><h2>......，段落标题。（仔细看看，这个随着h后面的数字增大，字体逐渐变小）

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>

5）<b>文字设为粗体,<u>文字设为斜体,<i>文字添加下划线

<b>hello</b>
<u>hello</u>
<i>hello</i>

6）<sup>上标、<sub>下标

so<sub>4</sub><sup>2+</sup>

7）<ul>有序列表、<ol>无序列表

        <ul>
            <li>html</li>
            <li>css</li>
        </ul>
        <ol>
            <li>html</li>
            <li>html</li>
        </ol>

注：有序列表可以在<ol>中设置属性type=1、A、a、I、i；start=1，2，等整数值；reversed=reversd

8）<a href="">超链接

<a href="www.baidu.com">baidu</a>

9）表格

步骤：设置表格，设置行的数目，设置列的数目

        <table>
            <tr>
                <td>第一列，第1栏</td>
                <td>第一列，第2栏</td>
            </tr>
            <tr>
                <td>第二列，第1栏</td>
                <td>第二列，第2栏</td>
            </tr>
        </table>

这里没有显示表格边框，浏览器默认就是无边框。

9.1）合并表格colspan列合，rowspan行合

        <table border="1">
            <tr>
                <td colspan="2">合并列</td>
            </tr>
            <tr>
                <td>左列</td>
                <td>右列</td>
            </tr>
        </table>

        <table border="1">
            <tr>
                <td rowspan="2">合并行</td>
                <td>第一行</td>
            </tr>
            <tr>
                <td>第二行</td>
            </tr>
        </table>

10）表单<form>标签，<input>属性type可以选择。

（这里为了在浏览器显示好看，使用了<table>表格标签等内容）

        <form method="POST" action="">
            <table>
                <tr>
                    <td>账号</td>
                    <td><input type="text" name="user_name"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="password"></td>
                </tr>
                <tr>
                    <td><input type="submit" value="提交"></td>
                    <td><input type="reset" value="取消"></td>
                </tr>

            </table>
        </form>

11）<iframe>框架

src=“new_page.html":想要显示在窗格中的文件路径以及文件名

name=”f1":框架窗格名称

width=”300“/height="400"：窗格的宽度和高度，以像素为单位

seamless：隐藏边框以及滚动条，让网页看不出来嵌入iframe框架

三、CSS

首先认识一下CCS，CSS是层叠样式表，简称CSS样式表，最先版本是CSS3，主要是为了弥补HTML在样式排版上的不足。

3.1 CSS的基本格式

由选择器与样式规则组成。

selector{rule1；rule2；rule3；......;}

CSS样式表声明方式：行内声明（inline），内嵌声明，链接外部样式文件。

1、行内声明直接在标签内设置

<h1>Hello, welcome to CSS</h1>
<h1 style="color: white;background:#999; border: 1px black solid ;">Hello, welcome to CSS</h1>

2、内嵌式声明在<head></head>标签内添加<style></style>标记进行声明

<style type="text/css">
     h1{
          color: white;
          background:#999; 
          border: 1px black solid ;
        }
</style>

<h1>内嵌式声明</h1>

3、链接外部样式需要从外部导入文件，语法如下：

或者

@import “样式文件的路径/文件名";

</style>

3.2CSS选择器

CSS选择器大致分为5种：标记名称·、全局选择器、Class（类）选择器、ID选择器、属性选择器

1）标记选择器

直接用HTML标签作为选择器

2）全局选择器

使用" * "字符选择所有标记

3）Class选择器

使用" . "class属性名，注意这里的class属性名是自己设置滴

4）ID选择器

使用" # "id名称，注意这里的id名称也是自己设置滴

5）属性选择器

a[target] {rule}

例子在后续整理，目前先整理到这吧。

（内容都是自己根据自己所学，又结合网上资料自己写滴）

积极向上的小徐

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网页开发设计HTML5+CSS（标签、框架、标记选择器等）（一）

最近学了不少东西，感觉得及时整理，强化学习。言归正传，下面就整理一下最近学的网页开发一类内容（包括HTML5和CSS，以后会整理一下JavaScript等）一、网站和网页首先，简单滴了解一下网站和网页。网站（Website），可以将其当作为计算机中的文件夹，文件夹中存放网页文件，网页之间彼此通过超链接的方式串联而成，而这些网页存在某一台电脑上，用户只需要在浏览器中输入网址就可以浏览或者访问主机中的数据。网页（Webpage），实际上就是一个文件夹，存放在网页服务器中，可以通过网址（URL
复制链接

扫一扫