html和css入门

最新推荐文章于 2024-07-21 20:52:32 发布

Zz Apollo

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量1.3w

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/ch_improve/article/details/90043829

版权

html 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1.前端开发概述

从软件分类开始说，学习编程语言，主要为了开发软件的，软件按照使用目的不同分为系统软件和应用软件；
还可以按照软件程序和数据存储位置不同，可以分为单机软件、C/S架构软件（QQ）、B/S架构软件：
·单机软件：软件程序和数据存储在客户端界面：Tk、PyQt、wxPython库
·C/S(Client/Server)架构软件：软件程序和数据一部分存在客户端，一部分存在服务器端界面：Tk、PyQt、wxPython库
· B/S(Broswer/Server)架构软件：软件程序和数据全部存在服务器端界面：网页(web)

前端开发的定义：前端开发也叫web前端开发，是为B\S架构的软件提供界面解决方案的。

2.HTML概述及HTML文档基本结构

html概述

HTML是Hyper Text Mark-up Language的首字母简写，意思是超文本标记语言（超文本标签语言），文件扩展名为html或htm
html基本结构

<!DOCTYPE html> <!--“!+tab”快速生成模板-->
<html lang="en"> <!--设置语言-->
<head>
    <meta charset="UTF-8">

    <!--设置网页端观看不缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!--设置网页在IE观看时，按照IE的最高版本观看-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3.html常用入门标签（20多个）

按照现实效果可以分为：
块元素标签(行元素)：默认占有一行
内联元素标签(行内元素)：默认可以排列在一行

3.1.块元素标签

1. <h1></h1>~<h6></h6>: 标题标签，含有默认样式```
2. <p></p>： 段落标签，含有默认样式
3. <div></div>：通用块容器标签,包含任意一块不定的内容，没有固定语义，可以做嵌套

3.2.内链元素标签

1.超链接标签

<a href="超链接目标地址">超链接文字</a>
举例：<a href="http://www.baidu.com">去百度</a>
<a href="#">  </a>  如果网址还不确定，先用#代替

2.图片

<img src="images/无标题.png" alt="哈哈哈哈" title="显示文字">

3.超链接图片

<a href="http://www.baidu.com"><img src="images/无标题.png" alt="哈哈哈哈"></a>
href设置链接地址，alt图片说明，src图片地址,title鼠标指到图片后显示文字

4.通用内联元素标签

<span> </span>

3.3.字符实体

&nbsp; 空格
&lt;  小于号<
&gt; 大于号>

3.4.功能标签

<br>: 换行标签
<!--注释-->  注释标签

标签语义化
在布局中需要尽量使用带语义的标签，目的首先是为了让搜索引擎更好的理解网页结构，提高网站在搜索中的排名（也叫SEO），其次方便代码的阅读和维护。

4.css介绍

4.1.css概述

为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此而诞生，CSS是Cascading Style Sheets的首字母缩写，意思是层叠样式表。

4.2.css基本语法

css的定义方法是：
选择器{属性：值；属性：值；属性：值；}

4.3.css页面引入的三种方式

1.内联式,行间样式(不推荐)

<div style="width:200px;height:200px;background:red"> .........</div>

2.嵌入式

<style>
选择器{width:200px;height:200px;background:gold;}
</style>

3.外链式:通过link标签，链接外部样式文件到页面中

先创建一个外链的css样式文件，比如main.css
div{width:200px;height:200px;bakcground:gold;}
再引用css文件
<link rel="stylesheet" href="main.css">

4.4.选择器

1.标签选择器:选择页面上所有对应的标签

div{width:200px; height:200px; color:red; background:blue;font-size:30px;}

2.类选择器：使用最多的一种选择器

定义： .red{属性：值；属性：值；}
使用： <div class="red">.........</div>
多个类选择器： <div class="red big">.....</div>

3.层级选择器：和页面上的层级进行匹配

定义： .red span{属性：值；属性：值；}
使用：  <div class="red">......<span>字段</span></div>

4.5.css常用样式属性

<style>
        /* 样式里的注释，
        单行多行都可以 */
        .box{
            /* 01.设置宽度 */
            width:300px;

            /* 02.设置高度 */
            height:300px;

            /* 03.设置背景色 */
            background:gold;

            /* 04.设置四周边框, 10像素粗细，solid实线，black黑色 */
            border: 10px dotted black;
            /* 05.线的样式：solid（实线边框）、
						dashed（虚线边框）、
						dotted（点线边框）、
						double（双线边框）、
						inset（3D嵌入式边框，效果取决于边框的颜色值）、
						outset（3D突出式边框，效果取决于边框的颜色值）、
						groove（3D沟槽边框，效果取决于边框的颜色值）、
						ridge（3D脊边框，效果取决于边框的颜色值）  */

            /* 06.边框拆分设置 */
            border-top: 10px dotted blue;

            /* 07.底部边框：border-bottom
                	顶部：border-top
                	左边：border-left
                	右边：border-right */
            border-bottom: 10px ridge red;
            border-left:10px solid orange;
            border-right:10px solid orchid;

            /* 08.设置四个边的内边距 */
            padding:20px;
            /* 09.设置上下左右的边距
                	顶边距padding-top
               	 	底边距padding-bottom
                	左边距padding-left
                	右边距padding-right */

            /* 10.设置四个边的外边距 */
            margin:100px;
            /* 11.外边距拆分设置
                	顶外边距margin-top
                	底外边距margin-bottom
                	左外边距margin-left
                	右外边距margin-right */

            /* 12.设置元素浮动:让块元素排列在一行 left左浮动 right右浮动 */
            float:right;

            /* 13.设置字体大小 */
            font-size:30px;

            /* 14.设置字体 */
            font-family:'Microsoft YaHei';

            /* 15.设置文字是否加粗  bold加粗  normal不加粗 */
            font-weight:bold;

            /* 16.设置文字行高度 */
            line-height:24px;

            /* 17.设置文字下划线  none无装饰 
                            	blink : 　闪烁
                            	underline : 　下划线
                            	line-through : 　贯穿线
                            	overline : 　上划线*/
            text-decoration:underline;

            /* 18.设置文字水平对齐方式: center居中 left左对齐 right右对齐 justify撑满行  */
            text-align:center;

            /* 19.设置文字首行缩进 */
            text-indent:24px;
        }
    </style>

Zz Apollo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html和css入门

1.前端开发概述从软件分类开始说，学习编程语言，主要为了开发软件的，软件按照使用目的不同分为系统软件和应用软件；还可以按照软件程序和数据存储位置不同，可以分为单机软件、C/S架构软件（QQ）、B/S架构软件：·单机软件：软件程序和数据存储在客户端界面：Tk、PyQt、wxPython库·C/S(Client/Server)架构软件：软件程序和数据一部分存在客户端，一部分存在服务器端界...
复制链接

扫一扫

专栏目录