梦开始的地方------------HTML+CSS基础

最新推荐文章于 2024-08-13 16:28:32 发布

F1CT0R

最新推荐文章于 2024-08-13 16:28:32 发布

阅读量76

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_56464236/article/details/131520592

版权

一、开始

本次学习使用的软件为Visual Studio Code，那么让我们开始写属于自己的第一个页面吧。首先新建一个普通文件并在软件中File->Open File->在页面中选中自己新建的文件夹并打开->New File->命名为我的第一个页面.xml。在该页面中输入！并回车即可获得以下内容。

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

右键并选择Open In Broser即可在浏览器中打开，若无该选项则需要在插件中搜索Open In Broser并安装该插件。

二、“HELLOW WORD”

在打开该页面后我们只会得到一个空白的页面，那么我们该如何在该页面中添加我们自己的内容呢。

在body标签中插入以下内容即可写入自己的内容，<p>标签为“段落”，<h>标签为“标题”，尖括号内的数字则为标题的大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
    <h1>hellow word</h1>
    <h2>hellow word</h2>
    <h3>hellow word</h2>
    <h4>hellow word</h2>
    <h5>hellow word</h2>
    <h6>hellow word</h2>
    </p>
</body>
</html>

三、列表

一个页面光有标题可不行，在需要显示同级别的内容或者编写一个字内容很多的页面需要目录快速表达内容时，列表的存在就相当重要了。

列表分为多种形式

无序列表

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

2.有序列表

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

-->自定义列表

<dl>
        <dt>列表</dt>
        <dd>-->自定义列表</dd>
</dl>

四、表格

网页不光需要写入自己想说的话，有的时候网页还需要承担起数据的表现，表格则是展现数据的有力工具之一。

首先新建一个表格。其中border参数为表格的样式，为1时边框线存在。cellspacing表示单元格之间的间距。cellpadding参数表示表格内内容与其边线的距离

<table border="1" cellspacing="0" cellpadding="10"> 
        <thead> <!-- 新建表头 -->
            <tr>  <!-- 新建行 -->
                <th>这是一个表格</th> <!--  新建条目 -->
            </tr>
        </thead>
</table>

跟着thead标签下即是tbody，表格的主体，里面一般存放表格内的数据。

 <tbody> 
            <tr> 
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
            </tr>
  </tbody>

tfoot标签一般用来表示表格的表名等信息。

       <tfoot>
            <tr>
                <td>这是个表格</td>
            </tr>
       </tfoot>

五、芜湖——起飞！

超链接<a>作为跳转标签，经常被用于页面间的转换和页面内部跳转，可以更方便的对用户展示多个页面以及更灵活的展示。

<a href="http://要跳转的网络地址">前往另一个页面</a>

或者在元素中加入id属性标识位置。

<h1 id="1">我在这！</h1>
 <!-- 页面内的其他元素-->


<a href="#1">我来了！</a>

还有使用target标签进行页面内的顶部或底部跳转。

<a target="_top">芜湖！上天！！</a>

六、我的名字是.....

在平时注册账号的时候我们都会接触到各种各样的表单项，名字，密码，生日，喜好，简介....很多时候这些输入框都属于同一种东西———form表单

首先从最简单的名字输入框入手，没什么难度，只需要定义输入框内要输入的文本类型和提示语。

<form action="数据要去的地方" method="数据去其他地方的方式">
        姓名：<input type="text" placeholder="输入姓名"><br>
</form>

再进阶一些，来个密码框。也不是很难，只需要将type值改成password就可以实现看似很难的密码形式输入框。

<input type="password" name="请输入密码"/><br>

剩下的只需要再调整一下type中的内容即可获得复选框checkbox，日期date，提交按钮sbmit....其它的参数由于篇幅原因，请各位再多去亲自尝试。

爱好:   <input type="radio" value="male" checked name="sex">男  <!-- 单选框-->
        <input type="radio" value="female" name="sex">女 <br>
性别:   <input type="checkbox" value="basketball" name="like">武装直升机  
        <input type="checkbox" value="soccer" name="like">虎式坦克 <br>
日期：<input type="date" name="日期"> <br>

而填写地址时使用的下拉菜单则不属于input标签，而是select标签。

<select name="" id="">
            <option value="wuhan">武汉</option>
            <option value="wuhu">芜湖</option>
</select>

以及更加自由的输入文本框textarea，适用于自我介绍等页面元素。

 <textarea name="我是个**" id="" cols="30" rows="10"></textarea>

七、予以你多彩的世界

css作为美化页面元素的常用工具，将页面美化的工作带到了高效化的层面，其多样的元素选择方式更是可以灵活的对页面元素的色彩，大小，位置等多种样式进行更改。

食用方式：

1、直接在标签内部使用

<p style="background-color: red;">

2、另设一个style标签

<style>
        h1{
            color: red;
        }
</style>

3、引用外部css文件

<link rel="stylesheet" href="style.css">

为了更快速的对页面元素进行渲染，css提供了多种选择器对页面元素进行大批量并且精准的渲染。

h1{    /*标签选择器,对拥有此标签的元素进行渲染*/

      color: red;

 }
.className{    /*类选择器,对类名为className的元素进行渲染*/

	color:red;
}
#idName{        /*id选择器,对id为idName的元素进行渲染*/
	color:red;
}

p>a{            /* 子代选择器，渲染p元素中第一个a元素 */
	color:red;
}
p a{             /*后代选择器，p元素中的所有a元素*/
 color:red;
}
p:hover{ /* 伪类选择器，当鼠标悬停（hover）到p元素时渲染*/
	color:red
}

F1CT0R

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
梦开始的地方------------HTML+CSS基础

css作为美化页面元素的常用工具，将页面美化的工作带到了高效化的层面，其多样的元素选择方式更是可以灵活的对页面元素的色彩，大小，位置等多种样式进行更改。在body标签中插入以下内容即可写入自己的内容，<p>标签为“段落”，<h>标签为“标题”，尖括号内的数字则为标题的大小。超链接<a>作为跳转标签，经常被用于页面间的转换和页面内部跳转，可以更方便的对用户展示多个页面以及更灵活的展示。再进阶一些，来个密码框。在打开该页面后我们只会得到一个空白的页面，那么我们该如何在该页面中添加我们自己的内容呢。
复制链接

扫一扫