HTML&CSS学习总结

1、什么是HTML?

        HTML的全称为超文本标记语言Hyper Text Markup Language,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字图形动画声音表格链接等。

        HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言它是标准通用化标记语言SGML的应用。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件翻译成可以识别的信息,即我们所见到的网页。

2、编辑工具

        基本文本、文档编辑软件:使用微软自带的记事本写字板都可以编写,当然,如果你用WPSWord来编写也可以,不过保存时请使用.htm.html作为扩展名,这样就方便浏览器认出直接解释执行了。

        半所见即所得软件,如:FCK-EditerE-webediter等在线网页编辑器;Sublime Text代码编辑器(由Jon Skinner开发,Sublime Text2收费但可以无限期试用)。

        所见即所得软件,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,如:AMAYA(出品单位:万维网联盟);FRONTPAGE(出品单位:微软);Dreamweaver(出品单位Adobe)。Microsoft Visual Studio(出品公司:微软;目前使用):其中所见即所得软件与半所见即所得的软件相比,开发速度更快,效率更高,且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂,不利于大型网站的多人协作和精准定位等高级功能的实现。

3、基本框架

<!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>Document</title>
</head>

<body>
</body>

</html>

标记符<html>:说明该文件是用超文本标记语言来描述的,它是文件的开头,而</html>则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。(lang(uage)=”en(glish)”)

<head></head>:这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。

主题内容:

<body></body>;,网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

网页中几乎所有的内容都写在了body中。同时,为了满足开发人员的需求,我们还可以在body中写入很多的标签来帮助我们的开发,常见的有:

<div></div>: 一个容器,里面可以装很多的东西

代码:这里相当于是最简单的一个html页面了

<!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>Document</title>
</head>

<body>
    <div>1234</div>
</body>

</html>

界面:

我们可以看到,在左上角显示出了‘1234’,这正是我们在代码中写的东西。

4、标签:

构成:由一对尖括号<>和标签名构成,分为起始标签和结束标签两种,两者的标签名相同,只是结束标签的多加了‘/’,同时需要注意,有些标签是可以不需要加结束标签的。

常用标签:

<title></title>: 网页名称

<link></link>&<style></style>:常用于CSS

script标签:脚本编写

meta标签:元信息

div&span标签:用于布局,是没有语义的;

标题标签:<h1></h1>,此外还有其余的2~6级的标题,从1~6,标题中字体的大小依次减小;

段落标签:<p></p>,顾名思义,这个标签里面放的是一段文字;

换行标签:<br>

由于接下来的标签很多都会涉及到标签属性,所以说明一下什么是标签属性。

标签属性:

    1、标签可以有多个属性,必须写在标签中,而且在标签名后面

    2、属性可以不分顺序,其中标签名和属性之间最好分开,属性之间最好分开

    3、任何标签都有默认值,省略该属性则取默认值

图像标签:<img>,有srcalttitle这几个常用属性,src:代表图片存储的路径,可以使绝对路径,也可以是相对路径;alt:引入图片时可能会出现图片路径错误等情况,而导致图片无法加载出来,所以当图片无法加载出来时就会显示出alt中的内容;title:图片显示出来时,将光标放在放在图片上,就显示出title中的内容。(../images代表images文件夹的上一级文件夹;images/pic.png表示images文件夹下的图片;first.html表示访问同一级的文件或者文件夹),例如:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	1、图片的基本插入方式 <br>
	<img src="Picture3.png" /> <br>
	2、带有alt的图片 <br>
	<img src="Picture2.png" alt="1" /> <br>
	3、带有title的图像
	<img src="Picture3.png" title="2" /> <br>
	4、设置图片的长度和宽度,只需要设置一个即可,会等比例缩放 <br>
	<img src="Picture3.png" title="2" width="900"> <br>
	5、带有边框的图像 <br>
	<img src="Picture3.png" title="2" width="900" border="10"> <br>
</body>

</html>

链接标签:<a></a>,有hreftarget两个常用属性,href:代表想要跳转的地址,可以是一个网址,也可以是一个本机地址,当属性值为‘#’时,代表还没有确定链接目标;target属性中可选’_blank’’_self’等,选中’_blank’则表示将跳转的窗口以新窗口展示出来,‘_self’则表示在当前窗口展示出来,例如:

<!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>Document</title>
</head>

<body>
    <h3>跳转——外部标签</h3>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.sina.com.cn" target="_blank">新浪</a>
    <h3>跳转——内部标签</h3>
    <a href="我的html.html">今日新闻</a>
    <h3>没有确定的链接目标时</h3>
    <a href="#">我的作品</a>
</body>

</html>

特殊标签:&nbsp;——空格,&lt;——‘<’,&gt;——‘>

列表标签:<ul><li></li></ul>,无序列表

         <ol><li></li></ol>,有序列表

注意:,ul标签中只能放li标签,但是li标签中还可以放入其他的标签,ol标签同理

<!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>Document</title>
</head>
<body>
    <h3>My favorite fruit:</h3>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Watermalen</li>
        <li>Pear</li>
        <li>Orange</li>
        <li>
            <h3>水果蔬菜</h3>
            <p>西红柿</p>
        </li>
    </ul>
    &lt;ul&gt;标签中只能放&lt;li&gt;标签,但是&lt;li&gt;标签中可以放其他的标签
</body>
</html>
<!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>Document</title>
</head>
<body>
    <ol>
        <li>美国</li>
        <li>英国</li>
        <li>中国</li>
        <li>俄罗斯</li>
    </ol>
</body>
</html>

自定义列表:

<!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>Document</title>
</head>
<body>
    <dl>
        <dt>四川省</dt> <!--名词-->
        <dd>成都市</dd> <!--解释说明-->
    </dl>
</body>
</html>

表格:

       属性:cellspacingcellpadding……

<!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>Document</title>
</head>

<body>
    <!--有行的定义,但是没有列的定义,只有单元格的定义-->
    <table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center">
        <!--单元格和边框之间的距离-->
        <!--单元格内容和单元格边框之间距离-->
        <!--管理对齐,有左对齐,右对齐和居中对齐;分别用对应单词表示代表-->
        <caption>人物信息</caption>
        <thead>
            <!--头部分-->
            <tr>
                <!--行-->
                <th>姓名</th>
                <!--单元格,单元格和<li>类似,其中可以嵌套很多的东西,但是table中只能嵌套<tr>标签,和《dl》是一样的-->
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>

        <tbody>
            <!--身体部分-->
            <tr>
                <td>名字1</td>
                <td>女</td>
                <td>18</td>
            </tr>

            <tr>
                <td>名字2</td>
                <td>男</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>

</body>

</html>

Input标签:<input></input>

       属性:type,可选值:

        ‘text’:文本框,

        ‘password’:密码框,

        ‘radio’:单选框

        ‘checkbox’:多选框,使用和单选框类似

        ‘button’:普通按钮

        ‘submit’:提交按钮

        ‘reset’:重置表单

        ‘image’:图像标签,使用与之前的img标签类似,

        ‘file’:提交文件

<!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>Document</title>
</head>
<body>
    <!-- <input/> -->
    用户名:<input type = "text" value="用户名"/> <!-- 文本框 --> <br>
    密  码:<input type= "password" maxlength="10"/> <!--密码框--> <br>
    性别:<input type= "radio" name = "sex" checked = "checked"/> 女 <!--默认选中-->
    <input type="radio" name = "sex">男 <br>
    <!--一组单选框,通过相同的name值实现单选-->
    爱好:<input type="checkbox" name = "hobby" checked = "checked"> 羽毛球 
    <input type = "checkbox" name = "hobby"> 篮球 
    <input type = "checkbox" name = "hobby"> 乒乓球
    <!-- 可以同时选择多个 --> <br>
    <input type="text"> <input type = "button" value="搜索"> <!--普通按钮--> <br>
    <input type="submit" value="提交表单"> <!--提交按钮-->
    <input type="reset" valut="重置表单"> <!--重置表单--> <br>
    <input type="image" src=""> <!--图像标签,src中为图像的路径--> <br>
    提交文件: <input type="file"> 
</body>
</html>

文本域标签:<textarea></textarea>,与QQ聊天界面的输入框相似

<!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>Document</title>
</head>
<body>
    <h3>留言板</h3>
    <textarea name="" id="" cols="30" rows="10">

    </textarea>
</body>
</html>

下拉菜单:

<!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>Document</title>
</head>
<body>
    省份:
    <select name="" id="">
        <option></option>
        <option selected="selected">北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
    城市:
    <select name="" id="">
        <option></option>
        <option selected="selected">天安门</option> <!--默认选中项-->
        <option>朝阳区</option>
        <option>大兴</option>
        <option>通州</option>
    </select>
</body>
</html>

       表单域:

<!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>Document</title>
</head>
<body>
    <form action="xxx.php" method="get" name="userMessage">
        用户名:<input type = "text" value="用户名"/> <!-- 文本框 --> <br>
        密  码:<input type= "password" maxlength="10"/> <!--密码框--> <br>
        性别:<input type= "radio" name = "sex" checked = "checked"/> 女 <!--默认选中-->
        <input type="radio" name = "sex">男 <br>
        <!--一组单选框,通过相同的name值实现单选-->
        爱好:<input type="checkbox" name = "hobby" checked = "checked"> 羽毛球 
        <input type = "checkbox" name = "hobby"> 篮球 
        <input type = "checkbox" name = "hobby"> 乒乓球
        <!-- 可以同时选择多个 --> <br>
        <input type="text"> <input type = "button" value="搜索"> <!--普通按钮--> <br>
        <input type="submit" value="提交表单"> <!--提交按钮-->
        <input type="reset" valut="重置表单"> <!--重置表单--> <br>
        <input type="image" src=""> <!--图像标签,src中为图像的路径--> <br>
        提交文件: <input type="file"> 
        <h3>lable 标签的使用</h3>
        <label>账户:<input type="text"></label> <!--直接用lable标签包裹住input标签即可--> <br>
        <label for="two">账户:<input type="text"><input type="text" id="two"></label>
        
    </form>
</body>
</html>

datalist标签:应该与input标签一起配合使用

<!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>Document</title>
</head>
<body>
    <input type="text" value="搜索明星" list="star">  
    <datalist id="star">   <!--和input一起配合使用-->
        <option>刘德华</option>
        <option>郭富城</option>
        <option>成龙</option>
        <option>张学友</option>
        <option>张柏芝</option>
    </datalist>
</body>
</html>

多媒体标签(了解)<embed></embed>

以下是一个简单的例子:

    <embed src="https://www.bilibili.com/video/BV1rx411u7tv?p=64&share_source=copy_web" width="960" height="800"
        allowScriptAccess='always' align='middle' quality='high' allowFullScreen='true'>
    <emded />

音频播放(了解)<audio></audio>

以下是一个简单的例子:

<audio src=”” autoplay=”autoplay” controls loop=”-1”>,分别表示音频路径,是否自动播放控制键快进,循环播放

视频播放(了解)<video></video>

例子:<video src=”” controls autoplay width=”800px”></video>

当播放一个文件的不同数据格式时,可以使用sourse标签进行播放,以音频为例:

<audio>

       <source src=”xxx.mp3”>

       <source src=”xxx.ogg”>

</audio>

  1. 什么是CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

  1. 基本语法:

属性名:属性值(color:red

  1. 分类
    • 行内样式:html标签直接使用style属性,适用于一些简单的修改
    • 内嵌样式:在html页面中写样式,但是要写在style标签中
    • 外部样式:在html页面外面写样式,并在页面当中引入,需要使用link标签
  2. 选择器:
    • 标签选择器:
      <style>
      
          p {
      
             color: red;  // 将p标签中的文字改为红色
      
          }
      
      </style>

      2.类选择器:’.’代表red是一个类,且类选择器是最为常用的

<style>

       .red {

              color: red;

       }

</style>

        ​​​​​​​        3.Id选择器:口诀:样式“#”定义,结构id调用,只能调用一次,切勿被别人使用

<style>

        #red {

               color: red;

        }

</style>

​​​​​​​​​​​​​​        ​​​​​​​        4.通配符选择器:将所有的标签都改成了相同的样式

<style>
    *{

       color: red

    }
</style>

​​​​​​​​​​​​​​        ​​​​​​​        5.后代选择器

<style>
    ul li {

       color: red;

    }

</style>
  1. 常用的样式属性:
    • 文字:字体系列,大小,粗细,颜色,对齐,装饰,缩进,行间距

                修改字体:font-family:”微软雅黑(将字体改为微软雅黑)

                修改大小:font-size:20px (px表示像素)

                修改粗细:font-weight: 700 与font-weight: bold等效

                修改颜色:color: red (将字体颜色修改为红色)

                对齐方式:text-align: center (居中对齐,还有leftright的选项)

            装饰:text-decoration: underline(在字体上加上下划线,还有overline:上划线,line-throught:删除线,none:没有装饰等选项)

                缩进:text-indent:2em (缩进2个字符,em代表当前1个字符的大小)

                行间距:line-height:20px(行间距为20px

​​​​​​​​​​​​​​   2. 背景

                修改背景颜色:background-color: red (将背景改为红色)

               插入背景图片:background-image:url(“images/pic.png”) (插入背景图片,url表示图片路径)

               背景平铺:background-repeat: no-repeat(不平铺,repeat:平铺,repeat-x:沿着x轴进行平铺;repeat-y:沿着y轴进行平铺)

             背景位置:background-position: center left(向左居中对齐,同理,还有向右居中对齐等);精确位置:background-position: 20px 50px (20px: x坐标,50px: y坐标)

​​​​​​​   3. 边框线

        border-color:red (边框线设为红色)

        border-width:5px (边框宽5个像素)

        border-style:solid(实线,还有dasheddotted选项)

        复合写法:borderred  5px  solid (参数的顺序随意)

​​​​​​​​​​​​​​   4. 间距和边距

        内边距:padding(还有左边距padding-left,上边距等同理)

        padding:5px (内边距为5px

        padding:10px 15px (上下边距为10px,左右边距为15px

        padding:5px 10px 15px (分别为上,左右,下边距)

        padding:5px 10px 15px 20px (分别为上,右,下,左边距)

   5. 外边距:margin(同理,还有左边距等),与padding用法几乎相同

   6. ​​​​​​​位置和布局

        浮动floatleft(常用还有right属性)

        定位positionrelative(相对定位),相对原来的位置进行移动,原来的位置保留,例如:

<style>
    .test1 {
        position: relative,
        top: 100px,
        left: 100px
    }
</style>

        则表示跟之前的位置相比上边距增加100px,左边距增加100px

        absolute(绝对定位),例如:

<style>
    .test1 {
        position: absolute,
        top: 100px,
        left: 100px
    }
</style>

        表示跟最近的祖先元素相比,上边距增加100px,左边距增加100px,如果没有祖先元素则以浏览器为准进行定位。

7. ​​​​​​​隐藏和展示

displaynone(不展示元素,而且不保留位置,还有block等选项)

visibilityhidden(不展示,而且保留位置,还有visible等属性)

overflowvisible(超出部分显示,还有hiddenscrollauto等属性)

       好了,关于htmlcss的知识就总结到这里了,之中肯定有很多的东西没有写出来,还请大家多多体谅,同时,目前列出来的东西可能还有些错误,也请大家指正。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值