HTML+CSS一起学习

最新推荐文章于 2022-06-14 19:03:54 发布
最新推荐文章于 2022-06-14 19:03:54 发布
阅读量345 收藏
点赞数 1
分类专栏： #HTML 文章标签： html css 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62779007/article/details/123195062
版权

HTML：

表单标签
<from method="get或者post" action="向何处发送表单数据">
</input>
A.属性type定义输入框的类型
a.文本框type="text"  密码框type="password"
b.提交框type="submit"和<button>提交按钮</button>一样
c.按钮框type="button"单纯的按钮框
d.重置框type="reset"清空的效果
B.属性placeholder描述输出字段预期值的简短的提示信息、兼容到ie8上
C.属性name必须设置，否则在提交表单时，用户在其中输入的数据不会被送给服务器
D.属性vale
</form>
提交信息到action指定的地址
Form当中method的post和get的区别?
1get是从服务器上获取数据，post是向服务器传送数据。
2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post
是通过HTTPpost机制，将表单内各个字段与其内容放置在HTMLHEADER内一起传送到ACTION属性所指的URL地址。用户看不
到这个过程。
3对于aet方式，服务器端用Reauest.OuervStrina获取变量的值，对于post方式，服务器端用ReauestForm获取提交的数据
4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4(Internet
InformationService互联网信息服务)中最大量为80KB，/IS5中为100KB
5.get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
英文全名:cascadingstylesheets(百度百科)===cascading stylesheet 层叠样式表
WEB标准中的表现标准语言表现标准语言在网页中主要对网页信息的显示进行控制简单说就是如何修饰网页信息的显示样式。
目前推荐遵循的是W3C发布的CSS3.0.
用来表现XHTML或者XML等样式文件的计算机语言。
1998年5月21日由w3C正式推出的css2.0

css:

<!--
css语法
每个css样式是又两部分组成，即选择符和声明，声明又分为属性和属性值；
属性必须放在花括号中，属性与属性值用冒号链接
每条声明用分号结束
当一个属性有有多个值的时候，属性与属性值不分先后顺序，用空格隔开
在书写样式的过程中，空格，换行的操作不影响属性显示.
样式的创建 内部样式、外部样式、行内样式
css外部引入方法1
<link rel-"styleshecct" type="text/css" href="css的文件路经"/> relation定义关联性 stylesheet样式表
css外部引入方法2
<style type="text/css">
@import url("css文件的路径")；
</style>
@import导入，引入
扩展知识点:link和import之间的区别?
①差别1:本质的差别:link属于XHTML标签，而@import完全是CSS提供的一种方式。
②差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候)，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载 CSS的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
3)差别3:兼容性的差别:@import是CSS21提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
<div style="width:200px;height:200px;">我是div</div>
style作为属性直接写在标签后面
优先级（就近原则）！important>行内>内部>外部
为什么要用选择器?
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器
元素选择符/类型选择符(element选择器)如:div{width:100px;height100px;background:red;}

语法:元素名称{属性:属性值;}如:divph1,img,aspan,iem,strong,b,ul,liol,li…等
说明:
a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span……等。
b)所有的页面元素都可以作为选择符
用法:
1)如果想改变某个元素得默认样式时，可以使用类型选择符:
(如:改变一个div、p、h1样式)
2)当统一文档某个元素的显示效果时，可以使用类型选择符
(如:改变文档所有p段落样式)
class选择器/类选择器
语法:class名{属性:属性值;}
说明:
A)当我们使用class选择符时，应先为每个元素定义一个class名称
B)class选择符的语法格式是:
如:<div class="top"></div>
.top{width:200px; height:100px;background:green;)
用法:class选择符更适合定义一类样式;
id选择器

语法:#id名{属性:属性值:}
说明:
A)当我们使用id选择符时，应该为每个元素定义一个id属性
如:<divid="box"></div>
B)id选择符的语法格式是“#”加上自定义的id名
如:#box{width:300px;height:300px;}
C)起名时要取英文名，不能用关键字:(所有的标记和属性都是关键字)
如:head标记
D)一个id名称只能对应文档中一个具体的元素对象。(唯一性)
/**/css的注释
*通配符/通配选择器

语法:*{属性:属性值;}
说明:通配选择符的写法是“”，其含义就是所有元素。
*{margin:0;padding:0;}代表清除所有元素的默认边距值和填充值;

-->

1.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
        .a{
            background-color: blue;
        }
        .b{
            color:red;
            background-color: yellow;
        }    
    </style>
    
</head>

<body>
    <div>1111111</div>
    <div class="a b">2222222</div>
    <div class="a">3333333</div>
    <div>4444444</div>
    <div>5555555</div>
</body>
</html>

2.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
        #a1{
            color:red;
        }
        #a2{
            color:blue;
        }
        #a3{
            color:green;
        }
        #a4{
            color:pink;
        }
    </style>
</head>

<body>
<div id="a1">11111111</div>
<div id="a2">22222222</div>
<div id="a3">33333333</div>
<div id="a4">44444444</div>
</body>
</html>

4.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
    *{
            margin:0;/*外边距*/
            padding:0;/*内变距*/
        }  
    </style>    
</head>

<body>
    <h1>标题<h1>
    <div>11111</div>
        <ul>
        <li>111111111</li>
        <li>222222222</li>
        <li>333333333</li>
        <li>444444444</li>
        </ul>    
</body>
</html>

5.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <link rel="stylesheet" type="text/css" href="css.css"/>
    <style>
    @import url("css.css");
    </style>
</head>

<body>
    <h1>1111111</h1>
    <h2>2222222</h2>
</body>
</html>

酒菡
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
网游剑网三页面html+css
01-05
该资源是我以前自学前端html+css时，本人很喜欢这个剑网三的页面，在学习阶段的目标就是能够自己将这个剑网三页面敲出来。所以在学习一周后，自己尝试着第一次将学习的知识点运用起来。图中也是刚做是记得插入视频、...
【CSS表单form】
魔术师
06-11 2692
【CSS表单form】 表单（form）的作用 主要负责数据的采集，作为网页与用户接触最直接、最频繁的页面元素，其在网站用户体验中占有最重要的位置，常常用于用户注册、登录、投票等的制作。 form的属性 action：表单提交的地址 method：表单数据提交的方法/形式 get：明文发送（可见）
HTML5+CSS
weixin_43364084的博客
05-26 1112
HTML HTML（超文本标记语言） 标签 标签都是成对出现的，如 <html></html> HTML常用的标签 html：前端页面的起始 head：头部元素 meta：声明 title：网页标题 body：网页正文（内容） h1~h6：标题，从1—6字体大小越来越小 img：图片 p：段落 a：超链接 li：无序列表 ul：li的父级元素 ol：有序列表 dt：自定义列表 dd：dt的子元素 以下是不建议使用的标签 i：倾斜 b：加粗 em：倾斜 strong：加粗
第二篇 1+X考证 Web前端测试题（含答案解析）
灵魂学者的博客
04-06 1万+
第二篇 1+X考证 Web前端测试题（含答案解析)
制作一个简单的文本框输入的网页
aisijue2425的博客
11-19 2103
题目：制作一个简单的网页（包含一个文本框、一个按钮），在页面上输出用户在文本框输入的内容，要求用JavaScript获取文本框内容。 一、首先利用html在网页上制作表单，代码如下： 　　 **onclick事件：onclick 事件会在对象被点击时发生. 二、利用js获取输入信息，并将其输出： 　　相关知识： 　　　　1、给用户确认消息，真正实现交互，使用语...
使用HTML+CSS实现魔方转体
09-28
基于HTML+CSS动画效果，实现了魔方的转体效果，将魔方的每一次转动都很好的实现，期待大家的评论，期待和大家一起学习
html+css基础学习入门教程标记语言——网页应用CSS样式
01-08
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。   让我们从方法A开始吧. 网页教学网 方法A:标签 <!DOCTYPE ...
H5+CSS学习资料+笔记+项目资料
07-13
跟着大家一起学习，一起进步，先从前端开始，之后慢慢一点点的学习。 内涵一份光宇游戏官网项目+理财软件项目可供参考 还有详细的H5+SCC个人学习笔记。
hmtl+css基础入门学习教程之HTML 链接
01-08
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。 如下代码： F2E.TMING 页面上显示为 F2E.TMING 注释：请始终将...
js基本DOM操作
weixin_46310351的博客
04-13 159
获取元素 通过document获取节点 document.getElementById("标签id名"); // 通过标签的id名获取标签 document.getElementsByTagName("标签名"); // 通过标签名获取标签 document.getElementsByClassName("标签类名"); // 通类名获取标签 document.getElementsByName("标签的name属性的值"); // 通过标签的name属性获取标签 // 上述4种获取标签的方法，除了通过id
网页结构（<div>、<span>标签）
拾Miss~博客
03-14 1067
当下比较流行的网页布局是 div+css。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--div标签：（块级标签）每...
web前端的基础考试题
热门推荐
zhang_ran123的博客
02-24 5万+
Web前端阶段考试 一、选择题（每题2分*40=80分） 1.下列元素中，为行内元素的是（B）。  A.div  B.span  C.p  D.h3 2.下列HTML代码中，能在新窗口中打开新浪首页的是（C）。  A. 新浪  B. 新浪  C. 新浪  D. 新浪 3.需要创建一个多选框，且和文本关联起来（单击文本就像单击核选框一样）。下列 H
Bootstrap 标签页（Tab）插件 跳转B页面相应id的页面
myc1994的博客
08-24 6103
js是以前查找使用的，由于时间过长已忘记哪里借用，还望见谅 Bootstrap 标签页（Tab）插件：任何页面指定的tab链接，跳去b页面指定的tab 之前写个导航代码要求跳转其他页面指定的tab，调查很久找到一个支持bootstrap的tab跳转，无需在填写id，是利用Bootstrap 标签页（Tab）插件的data-toggle="tab"来对应相应的id跳转 代码： 导航栏： p...
窗体（文本框，按钮，单选按钮，标签）
晴天下的大头娃娃
05-07 3376
运行结果： 问题：         //6．设计一个如图实验8-6所示的窗体。窗体上有两个文本框：一个文本框中最多输入字符6个；一个文本框中输入任何内容都显示*号。         //再添加一个按钮、两个单选按钮。实现单击按钮后，根据单选按钮，将对应文本框中内容显示在标签 代码： using System; using System.Collections.Gene
Html+Css基础-表单
weixin_42957650的博客
06-09 218
表单 表单组成：表单域(将数据提供给服务器），表单控件，提示信息 表单元素：输入表单元素，选择 1. name,value: 使用name 区分表单元素 复选框，单选按钮必须同一个name属性 value name是每个表单元素都有的属性，主要给后台使用 2. checked属性 ：单选按钮和多选按钮具有checked属性，单选按钮只能选择一个，多选可以选择多个.
JavaScript 习题及面试题 2
qq_34227896的博客
04-01 1万+
149. [问答题] 编写一个方法 求一个字符串的字节长度。 ---------------------------------------------------------------------------------------------------------------------------- 来自：前端工程师练习卷参考： 假设：一个英文字符占用一个字节，一个中文字符占用两个字节。 function GetBytes(str){ var len = str.leng..
1+X web前端理论考试：html js css jq题
moRickyer的博客
06-14 9941
Web前端开发初级理论考试:HTML5,CSS3,JS,JQ等初级试题.
html+css+js 期末作业 下载
最新发布
05-09
同时，通过实践还可以让学生了解其他同学的实现方案，一起合作讨论，形成良好的合作和学习氛围，提高沟通和合作能力。 总之，HTML、CSS和JS的期末作业下载对于学生来说具有很重要的意义，通过实践和探索，可以更加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

酒菡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值