HTML+CSS基础

最新推荐文章于 2023-02-01 20:01:28 发布
最新推荐文章于 2023-02-01 20:01:28 发布
阅读量112 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tunaep/article/details/86557908
版权

html

html是一种超文本标记语言 hyper text markup language

俗称网页

文件名字后缀必须是 *.html 或者 *.htm

html的形式如下:

<html>
    <head> 
        子标签
    </head>
    <body> 
        子标签
    </body>
</html>

1. head 中的常见标签

<title>网页标题</title> <!--该标签表示是网页的标题-->
<meta charset="字符编码"> <!--该标签告诉浏览器请用这个字符串编码显示网页内容-->

<script></script>    <!--用来包含网页的脚本-->
<link>       <!--用来包含外部的样式表-->

<title>网页标题</title> <!--该标签表示是网页的标题-->
<meta charset="字符编码"> <!--该标签告诉浏览器请用这个字符串编码显示网页内容-->

<script></script>    <!--用来包含网页的脚本-->
<link>       <!--用来包含外部的样式表-->

 

2. body 中的标签

1) 标题标签

        <h1>1号标题</h1>
        <h2>2号标题</h2>
        <h3>3号标题</h3>
        <h4>4号标题</h4>
        <h5>5号标题</h5>
        <h6>6号标题</h6>

1号标题最大往后越来越小

2) 正文标签

段落标签: <p>

换行标签: <br>

分割线标签: <hr>

注意: html中特殊文字需要转义 如:

<

&lt;

>

&gt;
空格&nbsp

具体转义可以在网上搜

3) 超链接标签

<a href="链接地址">链接文字</a>

<img src="图片地址" width="宽度" height="高度"> 宽度和高度的单位都是像素

<a href="链接地址"> <img src="图片地址"> </a> 让图片具有超链接的功能

页面内的链接（锚）

首先在目的地标签添加 id="唯一编号", 然后在超链接的 href="#唯一编号"

4) 列表标签

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

5) 表格标签(重点)

<table>
    <thead></thead> <!-- 头 -->
    <tbody> <!-- 体 -->
        <!-- tr 代表行 -->
        <tr> 
            <!-- td 代表列 -->
            <td></td>
            <td></td>
        </tr>  
    </tbody>
    <tfoot></tfoot> <!-- 脚 -->
</table>

6) 表单标签(重点)

接收用户的输入

<!-- 把填写的信息收集起来发送给服务器
        有name属性的表单，会把信息发送给服务器
-->
<form action="http://www.baidu.com">
    文本框 <input type="text" name="username">
    <br>
    密码框 <input type="password" name="password">
    <br>
    按钮 <input type="button" value="点我">
    <br>
    单选框 <!-- name 用来给单选框分组 checked 表示默认勾选-->
    男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" checked value="女">
    <br>
    多选框
    唱歌 <input type="checkbox" name="hobby" checked value="1">
    跳舞 <input type="checkbox" name="hobby" value="2">
    游戏 <input type="checkbox" name="hobby" value="3">
    睡觉 <input type="checkbox" name="hobby" value="4">
    <br>
    <input type="file">
    <br>
    <input type="date" value="2018-12-30">

    <br>
    <input type="submit" value="提交">
    <input type="reset" vlaue="重置">
</form>

7) iframe

内嵌另一个页面

<iframe src="http://www.baidu.com" width="100%" height="500"></iframe>

 

css

层叠(级联)式样式表

cascade style sheet

用来美化html网页的

颜色相关的样式:

前景色

color: 单词
       rgb(红色, 绿色, 蓝色)  范围从 0~255
       16进制值  格式 `#红绿蓝` 范围从 0~FF       
       rgba(红色, 绿色, 蓝色, 0.0~1.0)
       特殊取值
       白色 rgb(255,255,255)
       黑色 rgb(0,0,0)

背景色:

background-color:颜色

背景图:

background-image:url(图片地址)
background-repeat: no-repeat(不重复) repeat-x repeat-y 在哪个轴上重复

盒子模型

margin 外间距
    margin-left
    ...
border 边框
    border-left    边框宽度 边框线类型 边框颜色
    ...
padding 内间距
    padding-left 左
    padding-right 右
    padding-top 上
    padding-bottom 下

定位方式

div 
position: absolute;  /*绝对定位*/
坐标的原点在左上角
left:  x 轴的坐标 
top:   y 轴的坐标
z-index z 轴坐标 取值越大，越靠上

width: 宽度
height: 高度

字体相关

font-size : 字体大小
font-family: 字体种类 （电脑上事先需要有这个字体）
font-style:italic; 倾斜
font-weight: bold; 加粗
text-decoration: line-through 贯穿线
text-decoration: underline  下划线

显示隐藏

## 显示隐藏
display: none;  隐藏
display: block; 显示

样式表

样式表,定义一个有名称的样式,标签内可以根据名称引用

名字的叫法: 选择器(selector)

 

类选择器 :

.名字 之后使用标签的 class="名字引用"

.c1{ color: black;background-color: chartreuse}

id选择器 :

根据标签的id属性来进行匹配

#id值 之后使用标签的 id="id值"

#p1{color: red;background-color: brown}

元素选择器 :

根据标签的名字进行匹配

span{color: blue;background-color: aliceblue}

优先级: 如果不同的选择器匹配到了同一个元素，

* style属性定义的样式最高，id选择器优先级次之，类选择器次之，元素选择器最低,

* 同级选择器，后定义的优先

* 可以用 !important 改变优先级，可以把优先级提升到最高

父子选择器 :

找到一个p标签，并且它的父标签必须是div

div>p {color:red;}

格式:

父标签>子标签

祖先后代选择器:

格式:

祖先标签 后代标签

伪类选择器

按钮 鼠标移入改变样式，鼠标移除还原
:hover 移入
:first 匹配选中的第一个
:last 匹配选中的最后一个
:focus 获取焦点时

 

Tunaep
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS基础面试题总结
yueu11的博客
05-16 2133
1. display:none; 和visibility:hidden;的区别 display:none; 彻底消失，释放空间。可能引发页面的reflow回流（重排）。 visibility:hidden; 就是隐藏，但是位置没释放，好比opacity:0; 不引发页面回流。 2.CSS 选择器权重如何计算 就近原则：直接选中的，一定比继承的权重大。 一样近，比权重： id是100，class是10，标签是1， 总数权重一样谁写在下面听谁的。 行内 > 内嵌 = 外联 > 导入 !importa
html+css基础代码
06-16
html+css基础代码
epoll之ep_insert()源码分析
ordeder的专栏
05-11 3284
参考：http://www.cnblogs.com/apprentice89/p/3234677.html ep_insert()过程中涉及的数据结构及回调函数如下图所示： 其中，红色部分回调函数构造了红色部分的结构体，黄色部分结构体主要由init_poll_funcptr和主函数ep_insert构造。 具体源码表在下面，重点环节已标出，以后有空再完善吧~ str
HTML+CSS基础综合案例
qq_53847322的博客
07-04 3091
1.尚合 效果图​​​​​​HTML代码如下： css代码如下： 成果图： 2.腾讯云 效果图html代码如下： css代码如下： 成果图如下：
HTML+CSS 基础
weixin_45756606的博客
06-16 933
html+css 基础
HTML+CSS基础题
weixin_46132649的博客
12-09 2597
HTML+CSS基础题
web前端基础（一）——HTML+CSS
热门推荐
广龙宇的博客
08-18 13万+
系列文章目录 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装 4. vscode 的插件卸载 5. 设置字体大小 6. 设置颜色主题 7. 设置默认浏览器[可选] 初识常用的HTML标签 1. 常用的 ..
html+css基础：问卷调查页面
qq_45387575的博客
01-17 2754
<!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&gt...
Web前端入门 HTML+CSS基础
Web_chicken的博客
09-17 6321
HTML+CSS基础知识总结 1.web标准 结构上来说html页面分为head和body两部分 head里面包含meta标签（UTF8字符集）、title(网页标题)、link(外部样式表引入) body里面是各种常用的标签。 web页面标准分为结构（html）+样式（css）+行为（js） 2.HTML基本标签 2.1基本标签 <html> &
网页制作基础学习——HTML+CSS常用代码
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
超详细的html+css基础知识树状图~HTML标签
有事儿私信。
09-03 1672
本系列的博客旨在更新自己在学习路上总结的思维导图，希望可以帮助初学者快速理清知识结构。
html+css基础.md
02-25
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体...此资源 原创HTML+CSS基础 实战51zxw.net 小清流吖羞羞萌芽之作。
HTML+CSS基础知识点.pdf
06-17
HTML+CSS 基础知识点总结 HTML+CSS 是前端开发的基础技术，掌握 HTML、CSS 和 JavaScript 语言是必不可少的。下面是 HTML+CSS 基础知识点总结： 1. HTML 是网页内容的载体，内容就是网页制作者放在页面上想要让...
Html+css基础
09-18
Html+css基础
正弦波信号发生器设计教程.docx
06-22
正弦波信号发生器设计 本教程详细介绍了如何设计和实现一个正弦波信号发生器，涵盖了硬件实现和软件实现两种方法。通过硬件方法，我们使用函数发生器和示波器生成和观察正弦波信号；通过软件方法，我们使用Python和MATLAB生成和绘制正弦波信号。此外，教程还提供了一些扩展功能，以提高信号发生器的实用性和灵活性。无论您是电子工程师还是编程爱好者，都能从本教程中获得实用的技能和知识。
芯晞微 CSM2042 40V，低辍学，250 mA线性调节器 深圳市可芯电子有限公司.pdf
06-22
芯晞微 CSM2042 40V，低辍学，250 mA线性调节器 深圳市可芯电子有限公司.pdf
gaodetianqi.txt
06-22
gaodetianqi.txt
编程项目实战：基于JAVA的文件压缩与解压缩实践(源代码+论文)
06-22
文件的压缩与解压缩，要能方便地进行，要完成的功能包括压缩功能，解压缩功能，选择文件路径，选择操作方案，选择新文件保存路径。此程序还要在压缩成功后显示被压缩文件的大小，并对非法操作给出提示。 用户可以选择文件进行压缩或解压缩操作，并选择生成保存路径，默认的保存路径为原文件目录，压缩的生成文件以原文件加.gzip后缀命名，在解压缩操作中，若输入文件不是gzip格式的压缩文件，则提示gzip文件格式不对。 程序的基本设计原则有：方便性原则、功能实用性原则和开放性原则等。程序设计时采用较好的压缩技术，能保证文件压缩的压缩比和可恢复性，确保程序有较长的生命周期。 本程序的总体目标是实现文件压缩与解压缩的便捷操作，因此需要有便捷的操作界面。 2.2使用的算法理论 2.2.1LZ77算法简介 这一算法是由Jacob Ziv和Abraham Lempel于 1977 年提出，所以命名为LZ77。这种算法模型也被称为“滑动字典”模型或“滑动窗口”模型。 压缩的模型如图1： 　　　 图1 压缩中的LZ77算法模型图 在最远匹配位置和当前处理位置之间是可以用来查找匹配的“字典”区域，随着压缩的进行，“
TPS2HB35 Altium Designer PCB库
最新发布
06-22
TPS2HB35 AltiumDesigner 原理图库
html onclick用法_HTML+CSS 基础知识-入门概述
05-26
`onclick` 是一个 HTML 属性，用于在用户点击指定的 HTML 元素时触发 JavaScript 代码。它可以应用于任何 HTML 元素，例如按钮、链接、图像等。 使用 `onclick` 属性，可以为 HTML 元素添加交互性。例如，当用户单击按钮时，可以显示一个消息框或执行一些其他的 JavaScript 操作。 以下是一个简单的例子： ``` <button onclick="alert('Hello World!')">点击我</button> ``` 当用户单击按钮时，将弹出一个消息框，显示 "Hello World!"。 注意，使用 `onclick` 属性添加的 JavaScript 代码应该放在引号内，并且应该在双引号内使用单引号，或者在单引号内使用双引号。例如： ``` <button onclick="myFunction()">点击我</button> ``` 在上面的例子中，`myFunction()` 是一个 JavaScript 函数，它将在用户单击按钮时被调用。 除了 `onclick` 属性，还有其他一些类似的 HTML 属性，如 `onmouseover`、`onmouseout`、`onload` 等，它们可以用于在特定事件发生时触发 JavaScript 代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值