HTML CSS基础笔记

最新推荐文章于 2024-03-14 11:01:54 发布

zhaozekun2015

最新推荐文章于 2024-03-14 11:01:54 发布

阅读量162

点赞数

分类专栏：前端界面

本文链接：https://blog.csdn.net/zhaozekun2015/article/details/81674444

版权

前端界面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML
超文本标记语言，不区分大小写，一般来说有头就有尾,标签有各种属性可以设置

   列表标签<dl>
       <dt>上层
       <dd>下层
       这是上层内容
           a 这是下层内容（有缩进哦）
           b 这是下层内容（有缩进哦）
           c 这是下层内容（有缩进哦）

   表格标签<table>
       按照表格方式排版
           <tr> 一行
           <td> 一格
           <tbody> 不定义也会存在，是加载的单位

   图像标签<img>

   超链接标签<a href="协议:路径"></a> 默认是file协议，还可以是http;mailto;javascript;thunder

           <a name=锚定标签></a>
           <a href="#锚定标签">.....实现位置跳转

   框架标签<frameset><frame src=></frameset>
       必须放在head和body之间

   画中画<iframe src=> 当前页面划一块地展示连接资源
                       也可以连接javascript程序

   表单标签<form> 用于和服务器交互，提交用户输入的信息
               <input type。。。可以提交文件哦
               如果要提交表单的数据到服务端的时候
               必须要制定 name和value (以属性映射的方式提交哦)
               提交文件不用有value，name还是要的

               type=“image” 这个图片具备提交功能，可以编辑图片提交按钮
               type="hidden" 看不见的隐藏的
               选择器<select name
                           <option value= >.....
               文本编辑区 <textarea name>....

       <form action="提交地址"，method="post/get"

       get和post的区别，get提交数据用的是请求行，容量小，不隐秘
                       post提交容量大，数据载体使用的是请求体

                       编码问题，get的话服务器是默认iso8859-1解码，最好使用iso8859-1进行编码

                               post的时候可以使用服务端的对象request的set....方法，这个方法只对
                               请求体中的数据进行解码

                               因此表单的提交建议使用post（表单数据不就是name，value对吗？）

   <base href=“”设定这个网页的所有超链接路径
       target= 设定好之后这个网页的所有网页目标都会被设置

   <meta 网页的描述信息，在head下 title前
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

       <b> 加粗
       <i>   倾斜
       <u> 下划线
       <sub> 上标
       <sup> 下标
       <marquee>让标签动起来
       <pre> 标签保留文字的格式和缩进

标签分为两大类
1块级标签标签结束后有换行 div（块）p（段）dl，table，title
2行内标签标签结束后没有换行 font span img input select a

有关html xml xhtml

   XHTML是为了替代html而推出的，html网页太多，没成，算是html的升级版

   XML是可拓展的标记语言，可以自定义标签，html不行，描述的是数据之间的关系
       规定更为严格，作为各大框架的配置文件，xml可以被更多的应用程序解析
       称为一种通用的数据交换语言

   HTML是为了封装数据用于显示的

CSS
   丰富html样式的一个东西，css的注释与html不同只有一种/**/
       语法：属性名字与属性值之间用冒号":"
               属性与属性之间用分号";"
               一个属性的多个属性值使用空格隔开 " "
   html使用css的方式
       1 每一个html的标签都有style属性，在这个属性里面可以完成全部的css设置
           <div style="background-color:#960; color:#F00">这是一个div</div>
       2 使用<style>标签,这个标签应该是在html自身标签属性加载前加载的。
           一般都定义在head标签中，css的属性设置可以写入到css文件中，css文件能包含其他css文件
           html使用的时候需要import
           <style type="text/css">
           div{
               background:#999;
               color:#F00;
           }
           </style>

           <style type="text/css">
           @import url(1.css);
           </style>
       3 在head中连接进css资源，stylesheet样式表 href路径 type解析类型
           <link rel="stylesheet" href="1.css" type="text/css" />

   css作用的范围，css选择器，选择器的开头不能使数字，id classname都不能以数字开头
       1通过html标签类型指定
               div{
       2通过class类型指定，每一个html标签都有class属性
               div.classname{ //div下类名交classname的
               .classname{ //所有类名叫classname的都行
           很多classname是预定义出来的，当修改元素的classname的时候就能替换样式，动态效果就有了

       3通过id进行选择，每一个html标签都有id属性,id通常是唯一的，id还会被javascript使用
               div#id{
               #id{

       优先级 html标签style属性 > id选择器 > class选择器 > 标签选择器
       加载顺序由外到内

       拓展选择器
           1 关联选择器，标签包含标签
               span b a img{ //span 中的 b中的a中的img中的选择器
           2 组合选择器
               .haha,span b{ //类为haha的，且span内的b
           3 伪元素,并不是真正的元素，只是某元素不同的状态，超链接在不同的状态加载不同的css效果
                   超链接的状态
                       未访问
                       a:link{
                       鼠标悬停
                       a:hover{
                       。。。
                       。。。

div盒子模型注意点
   div盒子的内边距 padding
   div盒子的外边距 margin

   body也有padding换个margin，分别标示body内部内容与body的边距，以及body与浏览器框的边距

div的布局
   float布局设定过float的是一波，没设定过float的是一波，两拨可能相互重叠打架哦;