HTML&CSS入门基础知识干货

最新推荐文章于 2024-10-07 21:54:14 发布

监听员_1379

最新推荐文章于 2024-10-07 21:54:14 发布

阅读量643

点赞数 2

分类专栏： HTML基础文章标签： HTML CSS 基础知识入门

本文链接：https://blog.csdn.net/knight_a/article/details/81569751

版权

HTML基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. HTML的简介

概述: Hyper Text Markup Language, 超文本标记语言.
    超文本:    比普通文本的功能更加强大, 里边可以放一些图片, 音频, 视频等.

    标记语言: 由标签(由尖括号括起来的关键字)组成, 可以被浏览器识别.
    //记忆: HTML语言不是编程语言, 而是一种标记语言.

作用:
    用来设计(静态)页面的, 可以被浏览器识别.


特点:
    1. html语言是不区分大小写的, 为了阅读方便, 建议全部小写.
    2. html文件的后缀名可以是.html,也可以是.htm, .htm是老的命名规范, .hmtl是新的命名规范.
    3. html是由标签组成(尖括号括起来的关键字), 例如:
        <font>这个是字体标签</font>
    4. 上述类型的标签, 第一个标签叫: 开始标签(开放标签), 第二个标签叫: 结束标签(闭合标签).
    5. 如果一个标签没有闭合标签, 这类标签叫: 自闭合标签. 例如:
        <br />, <hr />, <img />
    6. 标签可以有属性, 属性值要用引号括起来. 单双引号均可.
        属性名="属性值",  属性名='属性值'
    7. HTML语言的基本结构是: 由<html>标签包括, 里边有: <head>(头标签)和<body>(体标签)标签.
    8. HTML语言中注释的写法: 
        <!--注释的文字-->
    9. 写HTML标签的时候, 最好包裹嵌套, 不建议交叉嵌套.

2. HTML的编写方式(开发工具)

操作系统自带的记事本工具,
高级记事本开发工具(Editplus,Notepad++),
Dreamweaver,
HBuilder.

3. HTML的结构

<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>页面的标题</title>
    </head>

    <body>
        <!--这里写的是给用户展示信息的地方-->
    </body>
</html>

4. HTML标签之字体标签: `<font>`

属性:
    size:   设置字体大小的, size的值的范围是:1-7, 字体最小的是1.
            //实际开发中, 我们都是通过样式去设置字体大小的, 上述的设置方式一般不用.
    color:  设置字体颜色.
            //可以通过 英文字母 进行设置.
            //也可以通过 RGB 三原色进行设置.  Red:红色, Green:绿色, Blue:蓝色
    face:   设置字体格式的.

演示：
<html>
    <head>
        <meta charset="UTF-8">
        <title>字体标签</title>
    </head>
    <body>
        <font color="blue" size="7" face="楷体">故人西辞富士康</font>    <br />
        <font color="red" size="7" face="楷体">为学技术到蓝翔</font>     <br />
        <font color="yellow" size="7" face="楷体">蓝翔毕业包分配</font>  <br />
        <font color="green" size="7" face="楷体">尼玛还是富士康</font>   <br />
    </body>
</html>

演示效果

5. HTML标签之排版标签:

<h数字>:  标题标签, 数字的范围是:1-6
<p>:        段落标签
<b>:        加粗
<i>:        斜体
<u>:        下划线
<br />      换行符
<hr />      分割线(自带换行功能)

6. HTML标签之列表标签: `<ul>,<ol>`

无序列表: <ul>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ul>

    type属性:
        disc:   实心圆点
        circle: 空心圆点
        square: 实心正方形

有序列表: <ol>
    <ol>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ol>

    属性:
        type:
            数字
            大小写字母
            大小写罗马数字

        strat: 设置从哪个数字开始, 只针对数字类型有效.

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>秦皇岛</li>
            <li>安阳</li>
            <li>北京</li>
            <li>石家庄</li>
        </ul>
        <ul type="circle">
            <li>秦皇岛</li>
            <li>安阳</li>
            <li>北京</li>
            <li>石家庄</li>
        </ul>
        <ul type="square">
            <li>秦皇岛</li>
            <li>安阳</li>
            <li>北京</li>
            <li>石家庄</li>
        </ul>
    </body>
</html>

这里写图片描述

7. HTML标签之图片标签: `<img>`

属性:
    src:    设置图片的路径.
        注意: 图片路径的问题.
            如果图片在该html文件的上级:    ../表示上一级.
            如果图片和该html文件在同一级: 直接文件名即可.
            如果图片是该html文件的子集:   也是直接写路径即可.
    border: 设置图片的边框.
    height: 设置图片的高度.
    width:  设置图片的宽度.
    alt:    图片不存在的时候显示的内容.

8. HTML标签之超链接标签: `<a>`

属性:
    href: 超链接的路径.
        相对路径:   跳转项目内部的页面.
        绝对路径:   跳转到外部页面. 需要写: http://

    target: 页面的打开方式
        _self:  在自身页面中打开.
        _blank: 新建页面打开.
        _parent:在指定的界面中打开.
            注意: parent是标签名字, 写哪个名字就在哪个标签中打开.

9. HTML标签之表格标签: `<table>`

属性:
    border:
    height:
    width:
    align: 设置表格居中(center),左对齐(left), 右对齐(right).
    bgcolor: 设置表格的背景色

    <tr>:   表示行
    <td>:   表示列
        colspan: 跨列.
        rowspan: 跨行.
    <th>:   表示列, 在<td>的基础上,多了居中和加粗的功能.

10. HTML标签之块标签:

<div>   默认具有换行功能.
<span>  默认没有换行功能.

11. HTML标签之框架标签: `<frameset>`

<frameset>
属性:
    cols: 纵向切割.
    rows: 横向切割.

    <frame>: 切割后的每一个模块.


页面布局:
    &nbsp;
    &gt;
    &lt;

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset rows="25%,*">
        <frame src="top.html" />
        <frameset cols="25%,*">
            <frame src="left.html"/>
            <frame src="right.html" name="right"/>
        </frameset>
    </frameset>
</html>

这里写图片描述

12. HTML标签之表单标签: `<form>`

概述: 就是将现实生活中的表单变为"页面形式"的表单.

记忆:
    A: 表单标签是<form>标签, 写在<form>标签中的标签是: 表单项.
    B: 表单项必须放在<form>标签中才能提交.

表单项分类:
    输入项:    //输入项都是<input>标签, 根据输入项的类型不同, 输入项也不同.
        //格式: <input type="输入项的类型"/>
        text: 文本框
        password: 密码框
        radio: 单选框      //根据name属性区分是否是同一组数据.
        checkbox: 复选框   //根据name属性区分是否是同一组数据.
        file: 文件框(就是让你选择文件的路径的)

        submit: 提交按钮
        reset: 重置按钮
        image: 图片按钮
        button: 普通按钮, 没有任何自带的功能, 功能需要用户自定义.
        hidden: 隐藏域, 例如: 某些信息是指向给后台(程序员)看, 不想提示给用户, 就可以用该输入项.

    下拉列表: <select>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
        </select>


    文本输入域: <textarea>
        属性: rows:设置行数  cols:设置列数

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="02_测试提交.html" method="post">
            用户名:
            <input type="text" name="username" readonly="readonly" value="汪"/><br />
            密码:
            <input type="password"  name="password"/><br />
            性别：
            <input type="radio" name="gender"  value="男" checked="checked"/>男
            <input type="radio" name="gender"  value="女" />女<br />
            爱好：
            <input type="checkbox" name="hobby" value="羽毛球"/>羽毛球
            <input type="checkbox" name="hobby" value="小说"/>小说
            <input type="checkbox" name="hobby" value="LOL"/>LOL
            <input type="checkbox" name="hobby" value="敲代码"/>敲代码<br />
            请选择省份：
            <select name="">
                <option value="" selected="selected">--请选择--</option>
                <option value="">河北</option>
                <option value="">河南</option>
                <option value="">山西</option>
                <option value="">山东</option>
            </select>
            <br />
            个人说明：
            <textarea rows="4" cols="20"></textarea>
            <br />
            <input type="submit" name="submit"/>
        </form>

    </body>
</html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>测试提交</title>
    </head>
    <body>
        有缘人，看到这里，说明你走投无路了呀！
    </body>
</html>

这里写图片描述

13. 表单项的属性:

name: 表单项的名称(用于接收数据)
value: 表单项的值.
readonly:只读
默认被选中:
    单选框和复选框: checked
    下拉列表: selected

14. 表单标签的属性:

action: 要提交数据到哪个页面, 默认是提交到当前页面.
    路径的划分:
        绝对路径: 网站外部的页面, 必须写http://
        相对路径: 网站内部的页面.

method: 提交方式
    get:    提交方式不安全, 数据会显示在地址栏中.
            提交的数据有大小限制.
    post:   提交方式相对安全, 数据封装在"请求体".
            提交的数据没有大小限制.

15. CSS的简介

概述: Cascading Style Sheets, 层叠样式表.

作用:
    用来美化页面的.
    //html相当于人的骨骼, css是给人化妆, js是让人(局部)动起来.

分类:
    行内样式:   //直接写在元素(html的标签)中的样式.

    内部样式:   //写在<head>标签的,<style>标签中.

    外部样式:   //写在后缀名为.css的文件中.

16. CSS的引入方式之: 行内样式.

格式:
    <div style="属性名:属性值; 属性名:属性值"></div>

    作用: 只针对于当前元素有效.

17. CSS的引入方式之: 内部样式.

格式: //写在<head>标签的,<style>标签中.
    选择器{
        属性名:属性值;
        属性名:属性值;
    }
作用: 针对于当前页面内的部分元素有效.

18. CSS的引入方式之: 外部样式.

格式: //后缀名为.css的文件中
    选择器{
        属性名:属性值;
        属性名:属性值;
    }
作用: 可以用来统一整个网站的风格.

19. CSS中的选择器:

//记忆: 后边我们学习JQuery的时候, 选择器和现在讲的这三种是一样的, 早晚都得记忆, 要求现在记.
//后边学JQuery的时候会轻松一点.
元素选择器:
    格式:
        元素名{
            属性名: 属性值;
            属性名: 属性值;
        }
    作用: 针对于该类元素有效.

id选择器:
    格式:
        #选择器名{
            属性名: 属性值;
            属性名: 属性值;
        }

    作用: 给指定id(id名和选择器名一样的元素)设置样式的.  
    //记忆: 每个标签都有id属性, id属性尽量保证唯一.

类选择器:
    格式:
        .选择器名{
            属性名: 属性值;
            属性名: 属性值;
        }
    作用: 用来设置某类元素(class属性的值为 选择器名的元素)的样式的.

后代选择器:      //理解
    (元素,id,类)选择器 元素名{
        //样式
    }
    作用: 设置指定的元素内的 指定的"子标签"的样式的.

伪类选择器:  //理解
    a:link{}        //未选中连接
    a:active{}      //选定的链接
    a:visited{}     //已访问的链接
    a:hover{}       //鼠标移动到链接上

    作用: 主要用来操作超链接的.

20. CSS的样式

背景: 
    background-color: 设置背景色 
字体:
    font-size: 设置字体大小
文本:
    text-decoration:将其值设置为:none,可以取消超链接字体的下划线.
    color: 设置字体的颜色
边框:
    border: 1px solid blue;     //1像素, 蓝色实线
        //solid: 单实线, double:双实线  dotted:(点)虚线 dashed:(-)虚线
    width: 设置标签的宽度
    height: 设置标签的高度

21. CSS的浮动

概述: 通常情况下页面的布局: 从上往下逐行分布. 有些时候我们需要页面中的布局方式是从左往右, 或者从右往左之类的自定义页面布局, 就需要用到: 窗体浮动.
    float: //设置浮动.
        属性值: left, right
    clear: //清除浮动.
        属性值: both

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                border: 1px solid;
                height: 100px;
                width: 100px;
            }
        </style>
    </head>
    <body>
        <div style="color: red; float: left;">111</div>
        <div style="color: blue ; float: left;">222</div>
        <!--c从这里开始不浮动-->
        <div style="clear: both;"></div>
        <div style="color: yellow; ">333</div>
    </body>
</html>

这里写图片描述

22. CSS的盒子模型

概述: 也是用于布局的. 正常的一个页面可能有多个div, 每个div的里边可能有其他元素(元素和div之间的间距叫内边距), div与div之间有可能也是有间隙的(外边距).
外边距: margin
内边距: padding

margin: 值1 值2 值3 值4;        //离上,右,下,左的间距分别是: 值1 值2 值3 值4;
margin: 值1(上下) 值2(左右);  //离上,右,下,左的间距分别是: 值1 值2 值1 值2;
margin: 值1;                 //离上,右,下,左的间距分别是: 值1 值1 值1 值1;
如果说不足以满足四个边距的值, 参考: 上左.