前端基础（html css ）

基础

Created At : 2022-02-21 21:29

Views 👀 :

前端基础（html css）

1. html

1.1 初识html

超文本标记语言，这种语言由大量的标签组成。

每一个标签都有开始标签和结束标签。例如

但也有一些独目标签

<标签>:开始标签
</标签>:结束标签

严格意义上说，html只是一种规范，一种浏览器上的规范，由于没有数据类型，iff or等，不能算作是程序语言。

web开发：

前端：html css JavaScript

后端：c，c++，java，php，python

1.2 第一个html

<!--这是html的注释信息-->
<!--这是根-->
<html>
    <!--这是头-->
    <head>
        <!--标题栏-->
        <title>(๑╹◡╹)ﾉ”</title>
    </head>
    <!--网页体-->
    <body>
        <!--这里的内容显示到网页上-->
        这是我的第一个HTML页面！
        <input><!--这是一个文本框-->
    </body>
</html>

1.3 html的基本标签

<html>
    <head>
        <title>基本标签</title>
    </head>
    <body>
        <!--段落标记-->
        <p>自从经历了大女儿幼升小的折磨后，我才知道，原来给孩子选个好的幼儿园也是同等重要的事，所以在我刚刚怀上小女儿的时候，我就开始托亲戚找朋友，几乎把所有人脉都用上了，终于在京城一家比较好的幼儿园占到一个名额。</p><p>眼看小女儿该上幼儿园了，上个星期，我带着所有证件去幼儿园办入学，却被园长告之，那个名额没有了，是被一个比我小女儿大半岁的小男孩占用，而申请人正是我老公！</p>
        
        <!--标题字-->
        <h1>标题字</h1>
        <h2>标题字</h2>
        <h3>标题字</h3>
        <h4>标题字</h4>
        <h5>标题字</h5>
        <h6>标题字</h6>
        
        <!--换行标记，直接用回车换行是没有用的-->
        hello<br>word
        
        <!--水平线,独目标签-->
        <!--color是属性，等号左边是属性名，等号右边是属性值-->
        <hr color="red">
        <!--html字符串可以用单引号或者双引号-->
        <hr color='red'>
        <!--而且语法非常松散-->
        <hr color=red>
        <!--html不区分大小写-->
        <HR>
        
        <!--预留格式,在html源码上是什么格式，到网页上就是什么格式-->
        <pre>
        for item in listx:
            print(item)
        </pre>
        
        <!--粗体字-->
        <b>粗体字</b>
        <!--斜体字-->
        <i>斜体字</i>
        <!--插入字-->
        <ins>插入字</ins>
        <!--删除字-->
        <del>删除子</del>
        <!--右上角加字，下面是十的平方-->
        10<sup>2</sup>
        <!--右下角加字-->
        m<sub>我是右下标</sub>
        <!--font字体标签-->
        <font color="red" size="10">hello world!!!!!!!</font>
    </body>    
</html>

1.4 html的实体符号

凡是html是<!DOCTYPE html>表示该页面是一个html5页面

<!DOCTYPE html>
<html>
    <head>
        <!--告诉浏览器使用那种编码方式,一般要和文件的编码方式相同-->
        <!--windows操作系统，默认采用gbk的简体中文方式打开-->
        <meta charset="utf-8">
        <title>实体符号</title>
    </head>
    <body>
    dhk is a clown
    <!--空格,实体符号,直接用空格键的话只会加一个-->
    <br>
    a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;n
    <br>
    <!--小于号和大于-->
    a&lt;b&gt;c
    </body>
</html>

1.5 表格

1.5.1简单表格

table-表格

tr-行

td-单元格

<html>
    <head>
        <meta charset="utf-8">
        <title>表格</title>
    </head>
    <body>
    <!--三行三格-->
    <!--border用来设置边框的宽度,1px表示1像素-->
    <!--width是宽度,height是高度,50%表示浏览器的一半，会根据浏览器的大小进行变换-->
    <!--align可以设置居中-->
        <table border="1px" width="300px" height="200px" align="center">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
    </body>

1.5.2 单元格合并

<html>
    <head>
        <meta charset="utf-8">
        <title>单元格的合并</title>
    </head>
    <body>
        <table border="1px" width="300px" height="200px" align="center">
            <tr>
                <!--rowspan表示行合并-->
                <td rowspan='2'>king</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <!--colspan表示列合并,合并两个,操作就是删除后面那个，在前面那个鞋colspan-->
            <tr>
                <td colspan="2">2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
    </body>

1.5.3th标签

<html>
    <head>
        <meta charset="utf-8">
        <title>th</title>
    </head>
    <body>
        <table border="1px" width="300px" height="200px" align="center">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>薪资</td>
            </tr>
            <tr>
                <td>1</td>
                <td>king</td>
                <td>5k</td>
            </tr>
            <!--th可以代替td单元格，自动加粗自动居中-->
            <tr>
                <th>2</th>
                <th>leo</th>
                <th>4k</th>
            </tr>
        </table>
    </body>

1.5.4 thead tbody tfoot

表格可以使用thead tbody tfoot这三个标签分成三部分，方便日后的JavaScript。

这三个不是独目标签。

1.6 背景和图片

1.6.1背景颜色

在body标签中加入属性bgcolor=”red”就是红色的背景

1.6.2背景图片和网页元素

而background=”图片路径（相对）”设置背景图片

<img src=""/>标签就是一个网页中的图片元素(如果开始标签和结束标签之间没有内容的话，那么我们可以直接在末尾加斜杠。)

width属性设置宽度，高度会等比例缩放

img的title属性设置图片描述（就是鼠标悬停时的提示信息）

img的alt属性用来指定当前图片加载失败时候的提示信息。

1.7 超链接

<html>
    <head>
        <meta charset="utf-8">
        <title>超链接</title>
    </head>
    <body>
        <!--这是一个到百度的超链接-->
        <a href="https://www.baidu.com">百度</a>
        <!--当然除了远程连接，也可以是本地的连接-->
        <!--超链接的特点，自动添加下划线-->
        <a href="http://www.4399.com">
            <img src="./images/moca.png">
    </body>

在a标签中加入img标签也可以将他变成一个超链接。

1.7.1 targe属性

超链接的target属性，可以用来设置超链接打开的位置，默认是当前窗口。

_self 当前窗口
_blank 新窗口
_parent 当前窗口的父窗口
_top 当前窗口的顶级窗口

1.7.2 iframe标签

iframe标签，可以创建一个窗口中的内部窗口。用其中的src属性来设置连接。

就像这样一样。

1.8 w3c以及BS结构原理

1.8.1 w3c组织

W3C组织是对网络标准制定的一个非盈利组织，W3C是World Wide Web Consortium（万维网联盟）的缩写，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。

1.8.2 B/S架构的原理

这里粗略的描述一下，其实就是我之前那篇《web入门》博文中提到的请求/响应模式。

第一步：用户在浏览器地址栏上输入URL

第二步：通过浏览器发送了一个请求

第三步：服务器会给浏览器一个响应，最终响应一段HTML代码给浏览器，展示结果。

1.9 列表

1.9.1 无序列表

<html>
    <head>
        <meta charset="utf-8">
        <title>列表</title>
    </head>
    <body>
        <!--无序列表-->
        <ul>
        <!--列表项里面同样可以嵌套一个列表-->
            <li>中国
                <ul><!--可以用type属性改变前面的段落标记-->
                    <li>北京</li>
                    <li>上海</li>
                </ul>
            </li>
            <li>美国</li>
            <li>英国</li>
            <li>俄国</li>
    </body>
</html>

1.9.2 有序列表

<html>
    <head>
        <meta charset="utf-8">
        <title>有序列表</title>
    </head>
    <body>
        <ol>
        <!--列表项里面同样可以嵌套一个列表-->
            <li>水果
                <ol><!--可以用type属性改变前面的段落标记-->
                    <li>香蕉</li>
                    <li>樱桃</li>
                </ol>
            </li>
            <li>蔬菜</li>
            <li>粗粮</li>
        </ol>
    </body>
</html>

1.10 表单

1.什么是表单，有什么用？

表单是用来收集用户数据的。

像这样的就是表单。

第二个作用就是发送请求并且携带数据给服务器。

表单的英文是form

2.如何定义

    <form>
        
    </form>

3.他里面有一个action属性，需要添加url。

当然可以在表单中创建一个按钮

    <form>
        <input type="submit" value="发送" id=""/>
        </input>
    </form>

如果要提交表单其type必须是submit，button是不能提交表单的。

<html>
    <head>
        <meta charset="utf-8">
        <title>表单</title>
    </head>
    <body>
        <!--表单-->
        <form action="https://www.baidu.com">
            <input type="submit" value="发送" id=""/>
        </form>
    </body>
</html>

1.10.1 表单提数据格式（以及一些表单中常用的输入模式）

<html>
    <head>
        <meta charset="utf-8">
        <title>表单</title>
    </head>
    <body>
        <!--表单,其中有个文本框和一个密码框-->
        <form action="https://127.0.0.1">
            用户名：<input type="text" name="username"/>
            <br>
            密码:<input type="password" name="password">
            <br>
            <input type="submit" value="登录">
        </form>
    </body>
</html>

表单最终提交的时候，有name属性的才会提交，没有name就不会提交。

radio类型的input标签是单选框，同一组的单选框的name属性需要一致，一般value是0与1.

checkbox类型的input标签则是复选框，一般value则是对应的选项。

reset类型的input标签则是重置按钮。必须放在表单内部

select标签则是下拉列表，其中用option标签来添加里面的选项，如果加上multiple属性，则表示下拉列表支持多选。size则是设置下拉列表一次最多选择条目数量。

textarea标签则是一个文本域，相当于一个大的文本框，用row和cols来指定行和列。

input标签中的maxlength属性则是最大输入字符的意思。

注意，submit类型的name属性是不能有数值的。

表单提交的时候，会默认以get形式传输出去。

1.10.2 file hidden控件

file类型的input标签，则可以选择文件。主要用于上传文件。

hidden类型的input标签，则可以创建一个隐藏域（浏览器上面看不到）。

1.10.3 readonly和disabled

如果给一个输入框加上disabled和readonly，那么都是只读模式，但是这两个中只有readonly会提交给服务器，而disabled不会提交给服务器。

1.11 html元素的id属性

在html中任何一个节点上都有id属性，id属性在同一个网页中是不能重复的。

id是这个节点的身份证号

这个id属性是方便JavaScript的一个属性，因为后期要对节点进行增删改，而增删改的时候需要获取到该节点。id就是方便我们获取到该节点。

1.12 div和span

div和span都是图层，他们的布局更加灵活。

每一个div和span左上角的顶尖，都有x和y轴的坐标，通过这个我们定位每一个图片盒子。

后面的css会讲述如何定位。

div和span有什么区别？
dib默认情况独自占用一行。
span不会独占行。

div和span同样也可以进行嵌套。

2. CSS

2.1 初识css

1.cascading style sheet 层叠样式表语言

css其实是专门用来修饰html的，让html更好看。

2.css是为html服务的，主体依然是html，所以进行css的开发，我们依然需要创建一个 html/htm 文件

3.如何在html中嵌入css样式呢？三种方式

第一种：内联定义

第二种：定义内部样式块对象

第三种：链入外部样式表文件。

2.1.1css手册

CSS 参考手册 (w3school.com.cn)

2.2 内联定义方式

<html>
    <head>
        <meta charset='utf-8'>
        <title>html中嵌入css之内联定义</title>
    </head>
    
    <body style=''>
    <!--内联定义方式
    <标签 style='样式名 : 样式值；样式名 : 样式值;'>
    </标签>
    -->
        <div id='div1' style='background-color:#00ff00;
         height:100px;
         width:100px;'/>
    </body>
</html>

在标签中的style属性中进行定义，具体可以查阅css参考手册

2.3 定义内部样式块对象

<html>
    <head>
        <meta charset='utf-8'>
        <title>html中嵌入css之定义内部样式块对象</title>
        
        <style type ="text/css">
        /*
            这是css中的注释
            定义的方法就是
                选择器 {
                    样式名:样式值;
                    样式名:样式值;
                    样式名:样式值;
                    样式名:样式值;
                }
                
        css中最常见的选择器，id选择器，标签选择器，class选择器
        */
        /*
        标签选择器，标签名{
        
        }
        */
        div{
        background-color:#00ff00;
        border-style:solid;
        border-color:#ff0000 #0000ff;
        }
        
        </style>
    </head>
    
    <body style=''>
        <div></div>
    </body>
</html>

这样的话所有的div都会被修饰，如果想单独对某一个标签进行修饰，我们可以使用id选择器id{ }

class属性，任何一个标签都有而且可以重复所以我们可用类选择器来指定某些元素进行修饰。

2.4 链入外部样式表文件

1.css文件

#div1 {
    background-color: #FF0000;
    width: 100px;
    height:100px;
}

实例.html文件

<html>
    <head>
        <meta charset='utf-8'>
        <title>链入外部样式表文件</title>
        
        <link rel ='stylesheet' type='text/css' href='1.css'/>
    </head>
    
    <body>
        <div id='div1'/>
    </body>
</html>

在头部的时候用link标签来引用我们的外部修饰。值得注意的是，前面的rel属性和type属性都是固定写法，后面的href用来指定文件的路径。

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。后续可能会有评论区，不过也可以在github联系我。