HTML、CSS

最新推荐文章于 2022-04-19 21:39:01 发布

KATER_SG

最新推荐文章于 2022-04-19 21:39:01 发布

阅读量127

点赞数 1

本文链接：https://blog.csdn.net/weixin_42741731/article/details/82015772

版权

HTML

一、HTML概述

1、什么是HTML
（1）HTML：超文本标记语言
（2）用于开发网页的一门语言
（3）是标记语言，不是编程语言
（4）HTML本质上是一个文档

2、HTML的结构
声明HTML的版本,当前html5.0

<html>
    <head>
        <title></title>
        <meta charset="utf-8"/>
    </head>
    <body>
        真正的网页内容
    </body>
</html>

解决网页乱码：保证meta标签中的charset属性指定的编码和html文件保存时使用的编码一致。

3、HTML的语法
标签（标记/节点/元素）：分为开始和结束，可以将开始和结束合并成一个自闭标签。
属性的值可以用单引号或者双引号引起来。

写一个空格：&nbsp；&emsp；
做一个换行：< br/>

注释：< ! – 注释内容 – >

二、HTML标签

1、标题标签

    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>

2、列表标签

    <ul>
        <li></li>
        <li></li>
    </ul>

    <ol>
        <li></li>
        <li></li>
    </ol>

3、图像标签

<img src="指定所引入图片的路径">

4、超链接（a）

<a href="http://www.baidu.com" target="指定以何种方式打开超链接">百度一下,你就不知道</a>

target：_self/_blank/frameName

5、表格标签

    <table>
        <tr>
            <td colspan="2">11</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
        </tr>
    </table>

colspan：设置单元格横跨的列数
rowspan：设置单元格竖跨的行数

设置table/tr/td的样式推荐使用CSS属性来设置

6、form表单
（1）标单标签
表单的作用：用于向服务器发送数据
也可以通过超链接后面拼接参数的形式向服务器发送数据

    <form action="指定表单的提交地址" method="GET/POST">

    </form>

（2）表单项标签
input

文本输入框：< input type="text">
密码输入框：< input type="password">
单选框：< input type="radio">
复选框：< input type="checkbox">
设置单选框和复选框默认被选中checked="checked"
普通按钮：< input type="button">
提交按钮：< input type="submit">
重置按钮：< input type="reset">
文件上传项：< input type="file">
隐藏域：< input type="hidden">

select/option

    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>

textarea

<textarea>请输入个人简介</textarea>

如果表单项（中的数据）需要被提交，表单项必须制定name属性（参数名称），否则将不会被提交！

7、div/span/p
div/p：块级元素（blcok）
（1）默认情况下独占一行
（2）可以设置宽高
（3）外边距/内边距/border都可以设置
span：行内元素（inline）
（1）多个行内元素可以处在同一行
（2）不可以设置宽高
（3）左右外边距/内边距/border都可以设置,上下外边距设置无效

CSS

一、CSS概述
1、什么是CSS？
css：层叠样式表，用于美化网页的一门技术，可以实现将设置样式的CSS代码和展示数据的HTML代码进行分离，增强了网页的展示能力

二、CSS引入
1、通过style属性来引入css

<div style="color:red;font-size: 20px;"></div>

2、通过style标签来引入css

    <head>
        <style type="text/css">
            div{
                font-size: 20px;
            }
        </style>
    </head>

3、通过link标签引入外部的css文件

    <head>
        <link rel="stylesheet" href="demo.css"/>
    </head>

三、CSS选择器
1、基本选择器
（1）标签名选择器
div{…}
span{…}

（2）class类选择器
.c1{…}

（3）id选择器
#id值{…}

2、扩展选择器
后代选择器：div span{…}
子元素选择器：div>span{…}
分组选择器：div，span，.c1，#d1{…}
属性选择器：input[type=’submit’]{…}
相邻兄弟选择器：#d1+span{…}
伪元素选择器：
div:first-child{//匹配所有的第一个div子元素}
div:last-child{//匹配所有的最后一个div子元素}
div:hover{//当鼠标悬停在div上时的状态}
四、盒子模型
将所有的html元素都看成一个一个盒子或者是框
margin(外边距)
margin:9px 7px;
margin:10px 20px 30px 40px;
margin:10px(上) 20px(左右) 30px(下);

border(边框):1px solid red;

padding(内边距)
padding:10px 20px 30px 40px;
padding:10px 20px 30px;
padding:10px 20px;
padding:10px;

五、常用的CSS属性
1、display属性 - - 设置元素是否以及如何显示
block：块级元素
inlink：行内元素
inlink-block：行内块元素（既可以设置宽高，又可以同行显示）
none：隐藏元素

2、文本属性
text-align：left/right/center(水平排列方式)
text-indent：首行缩进(20px)
text-shadow：字体阴影
letter-spacing：字符间隔
text-decoration：设置字体下划线样式

3、字体属性
font-size：字体大小
font-weight：字体粗细
color：字体颜色
line-height：行高
font-family：设置字体

4、背景属性
background-color：背景颜色
background-image：背景图片
background-repeat：背景是否以及如何重复排列
background-position：背景图片的位置
background-size：背景图片的大小

KATER_SG

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML、CSS

HTML一、HTML概述1、什么是HTML （1）HTML：超文本标记语言（2）用于开发网页的一门语言（3）是标记语言，不是编程语言（4）HTML本质上是一个文档2、HTML的结构声明HTML的版本,当前html5.0&lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; ...
复制链接

扫一扫