【JavaWeb学习笔记】之HTML&CSS

来源：互联网发布：万网单域名控制台编辑：程序博客网时间：2024/05/21 19:44

本文章仅为作者对html与css知识点的总结，如有不恰当的地方欢迎沟通交流，如需转载请注明出处http://blog.csdn.net/tobesuccess/article/details/78650724

HTML部分
- HTML的概念
- HTML的文档构成
- HTML中的标签
CSS部分
- CSS的概念
- CSS与html的结合方式
- CSS的选择器
- CSS的基本语法
- CSS的常用属性

HTML部分

HTML的概念

HTML（Hyper Text Mark-up Language）超文本标记语言1.超文本：表达能力优于普通文本，指页面内可以包含图片、音乐、超链接及程序等。2.标记语言：由标记构成的语言，其中还有XML、XHTML等。html是用来制作网页的标记语言，不需要编译，直接由浏览器执行。它的后缀名有.html和.htm两种，这两种后缀名没有区别。

HTML的文档构成

<!--最外层包裹--><html>    <!--头标签  里面可以写标题、网页属性、css、js等-->    <head>        <meta charset="utf-8" />        <!--标题标签-->        <title></title>    </head>    <!--体标签  用来写正文部分-->    <body>    </body></html>

html标签的写法：    1.在<>中包裹一个英文单词。    2.所有标签中的英文单词不区分大小写（推荐使用小写）。    3.标签分为两类        1>围堵标签：有开始标签，也有结束标签（如<html></html>）。        2>自闭合标签：本身既是开始标签，也是结束标签（如<br />)。    注意：所有标记语言，标签中的英文单词没有以数字开头的。

HTML中的标签

排版标签

<!--这是一段注释。注释不会在浏览器中显示。--><p> → 标签定义段落。<p> 相见时难别亦难， </p><p> 东风无力百花残。 </p><p> 春蚕到死丝方尽， </p><p> 蜡炬成灰泪始干。 </p>

效果：

相见时难别亦难，

东风无力百花残。

春蚕到死丝方尽，

蜡炬成灰泪始干。

<br> → 标签可插入一个简单的换行符。成功没有快车道，幸福没有高速路。<br>所有的成功，都来自不倦的努力和奔跑；<br>所有幸福，都来自平凡的奋斗和坚持。

效果：

成功没有快车道，幸福没有高速路。
所有的成功，都来自不倦的努力和奔跑；
所有幸福，都来自平凡的奋斗和坚持。

<hr> → 标签在 HTML 页面中创建一条水平线。春蚕到死丝方尽，<hr>蜡炬成灰泪始干。

效果：

春蚕到死丝方尽，

蜡炬成灰泪始干。

<pre> → 可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。<pre>    public static void main(String[] args){        System.out.println("Hello JavaWeb!");    }</pre>

效果：

    public static void main(String[] args){        System.out.println("Hello JavaWeb!");    }

<font> → 字体标签：该标签的使用必须配合属性。            size：大小（取值1~7之间从小到大）。            face：字体。            color：颜色，值的写法有以下三种：                1.可以直接填写颜色的英文名称                2.#FFFFFF                3.rgb(255,255,255)<font size="5" face="黑体" color="red">这是一个字体标签！</font>

效果：

这是一个字体标签！

<strike> → 可定义加删除线的文本。<strike>这行文字将被删除。

效果：

~~这行文字将被删除。~~

<big> → 标签呈现大号字体效果。<big>这行文字将呈现大号字体效果。

效果：

这行文字将呈现大号字体效果。

<small> → 标签呈现小号字体效果。<small>这行文字将呈现小号字体效果。

效果：

这行文字将呈现小号字体效果。

<u> → 标签为文本添加下划线。<u>这行文字将添加下划线。

效果：

这行文字将添加下划线。

<b> → 标签呈现粗体文本效果。<b>这行文字将加粗显示。

效果：

这行文字将加粗显示。

<sup> → 标签可定义上标文本。5<sup>2</sup>

效果：

5²

<sub> → 标签可定义下标文本。5<sub>2</sub>

效果：

5₂

<hn> → 标题标签：n的取值范围是1-6。        可以达到的效果:            1>1-6文字从大到小;             2>文字加粗;            3>换行<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6>

注意：HTML中不支持：空格、回车、制表符，都会被解析成一个空白。

列表标签

<!-- ol有序列表：order list --><!-- type属性：取值A a I i 1(默认值) --><!-- start属性：从几开始计数 --><ol>  <li>First Line</li>  <li>Second Line</li>  <li>Third Line</li></ol>

效果：

First Line
Second Line
Third Line

<!-- ul无序列表：unorder list --><!-- type属性：disc(默认)、square(方形)、circle(圆形) --><ul>  <li>First Line</li>  <li>Second Line</li>  <li>Third Line</li></ul>

效果：

First Line
Second Line
Third Line

<!-- dl定义列表:definition list --><dl>    <!-- dt定义标题:definition title -->    <dt>html</dt>    <!-- dd定义条目:definition description -->    <dd>标签</dd>    <dt>css</dt>    <dd>选择器</dd></dl>

效果：

html: 标签
css: 选择器

图形标签

<!-- <img />自闭合标签:        src属性：指定图片的URL。        alt属性：当图片无法加载时显示的提示信息。        title属性：鼠标悬浮时显示提示信息。        height属性：图片的高（单位是像素）（如果宽和高只指定一个，图片会按比例缩放）        width属性：图片的宽。        border属性：边框（单位是像素）        usemap属性：将图片分区，每个区点了之后链接到不同的页面。 dw（不常用）--><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511849983184&di=a71f72def5bc9e741dd9b5d0ac2457a4&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140622%2F0035035760337678_b.jpg" alt="唯美图片" title="flower" height="300px" width="900px"/>

效果：

唯美图片

表格标签

<!-- <table>表格        <th>:table header 标题单元格            align属性：对齐            cellspacing：外边距 → 单元格和其他单元格（边框）之间的距离            cellpadding：内边距 → 内容和单元格框线之间的距离            <tr>:table row 表格中的一行                <td>：table data cell 一行中的一个单元格                    colspan属性：横着占多少列                    rowspan属性：竖着占多少行--><table border="1">  <tr>    <th colspan="3">学生信息表</th>  </tr>  <tr>    <td>学号</td>    <td>姓名</td>    <td>年龄</td>  </tr>  <tr>    <td>001</td>    <td>苏娜</td>    <td>18</td>  </tr>  <tr>    <td>002</td>    <td>亚森</td>    <td>19</td>  </tr></table>

效果：

学生信息表学号姓名年龄 001 苏娜 18 002 亚森 19

框架标签

<!-- 框架标签与<body>标签互斥（使用时需要把body标签删除掉）        frameset标签：定义一个框架集。            rows属性：定义框架集中行的数目和尺寸。            cols属性：定义框架集中列的数目和尺寸。        frame标签：定义 frameset 中的一个特定的窗口（框架）。                src属性：指定显示页面的路径。                noresize属性：不能调整框架大小。                scrolling属性：是否显示滚动条yes no auto。                frameborder属性：是否显示边框0（无边框）、1（有边框）。                name属性：规定框架的名称。                target属性用法：如果想在框架中指定在哪个框架页显示，那么该值填写框架名称。--><html>    <frameset cols="25%,50%,25%">        <frame src="frame_a.htm" />        <frame src="frame_b.htm" />        <frame src="frame_c.htm" />    </frameset></html>

锚（超链接）标签

<!-- <a>标签可定义锚(anchor),有两种用法：        1. 通过使用 href 属性，创建跳转的超链接(格式：协议名+资源)；        2. 通过使用 name 或 id 属性，在当前页面中跳转，例如：回到顶部 → 使用就是锚。            步骤：1> 做一个锚标记，使用a标签的name属性指定锚点名称。                 2> 跳转到锚标记，使用href属性指定要跳转到的锚点。        <a>标签中的属性:            href属性：跳转的资源名或锚点名称。            name属性：定义锚点时，指定锚点名称。            target属性：针对资源跳转时使用。                该属性不指定 → 在当前页面打开新的窗口。                该属性值为_blank → 在空白页打开新的窗口。       --><a href="http://blog.csdn.net/" name="csdn">CSDN博客</a>

效果：

CSDN博客

表单标签

<!-- 将要提交的内容放入form标签中，        1.action属性：决定表单提交到哪里。        2.method属性：决定表单的提交方式，取值：get（默认值）/post。            post提交和get提交的区别：                1.post提交（http请求正文中）键值对没有在地址栏上，而get是放在地址栏上的。                2.安全性上post更高一些。                3.长度上：get因为是放到地址栏中，长度受限(2k),post理论上是无限的。 --><form action="" method="post">            <table border="1" width="100%" cellspacing="15">                <tr>                    <td>用户名</td>                    <!-- text 文本框 -->                    <td><input type="text" id="username" name="username"></td>                </tr>                <tr>                    <td>密码</td>                    <!-- password 密码框 -->                    <td><input type="password" id="password" name="password"></td>                </tr>                <tr>                    <td>确认密码</td>                    <td><input type="password" id="repassword" name="repassword"></td>                </tr>                <tr>                    <td>性别</td>                    <!-- radio 单选框 -->                    <!-- 同一组单选项name值相同 -->                    <td><input type="radio" name="sex" value="男">男<input                        type="radio" name="sex" value="女">女</td>                </tr>                <tr>                    <td>籍贯</td>                    <!-- select标签：下拉选 -->                    <td><select id="province" name="province">                            <option>-请选择-</option>                            <option>北京</option>                            <option>上海</option>                            <option>广东</option>                </tr>                <tr>                    <td>爱好</td>                    <!-- checkbox 多选框 -->                    <!-- 同一组多选框name值相同 -->                    <td><input type="checkbox" name="hobby" value="篮球" />篮球 <input                        type="checkbox" name="hobby" value="足球" />足球 <input                        type="checkbox" name="hobby" value="排球" />排球 <input                        type="checkbox" name="hobby" value="羽毛球" />羽毛球</td>                </tr>                <tr>                    <td>邮箱</td>                    <td><input type="text" id="email" name="email"></td>                </tr>                <tr>                    <td>描述</td>                    <!-- textarea标签：文本域 -->                    <td><textarea rows="3" cols="20"></textarea>                    </td>                </tr>                <tr>                    <!-- submit 提交 -->                    <!-- 用于提交表单内容 -->                    <td colspan="2"><input id="regBut" type="submit" value="注册"></td>                </tr>            </table>        </form><!--    input 标签的type属性还有：        file → 文件上传        hidden → 隐藏域（用于提交用户看不到的，必要的提交的内容）                       reset → 重置（还原）        image → 提交（图片，没用了）        button → 按钮    input 标签的name属性：        对于需要提交的表单项：提交时键值对的键    input 标签的value属性：        1.对于需要提交的表单项：提交时的值        2.对于按钮类型的：按钮上显示的文字。    input 标签的readonly属性：        1.只读属性，只是限制value属性的变化        2.只能给：text和password使用。textarea也有这个属性    input 标签的disabled属性：        1.禁用。颜色变灰，不参与提交。        2.使用范围，所有input都可以使用。    input 标签的checked属性：        1.默认被选中。        2.只适用于：1 raido，2 checkbox    input 标签的maxlength属性：        定义最大长度（只能放在text和password中）    input 标签的size属性：        定义输入框的显示长度（只能放在text和password中）    select 标签：        name 属性：下拉列表的名称：提交的键        size 属性：下拉列表中可见选项的数目        multiple 属性：可选择多个选项        selected 属性：让option默认被选中。    textarea 标签：        name 属性：文本区的名称：提交的键        col 属性：文本区内的可见宽度        row 属性：文本区内的可见行数        readonly 属性：文本区为只读        注：该标签没有value属性-->

meta标签

<!-- meta标签：属性定义了与文档相关联的名称/值对,网页元标签。 --><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 可以实现当前网页定时刷新或定时跳转 --><meta http-equiv="refresh" content="3;url=#" /><!-- 可能对于进入搜索引擎的索引有帮助 --><meta name="keywords" content="#" /><meta name="description" content="#" />

转义字符

&nbsp; → 空格&gt; → 大于号&lt; → 小于号&trade; → ™商标&copy; → ©版权&reg; → ®已注册&quot; → "引号

注：在html中，当属性的键和值完全一样时，可以忽略属性的值。

CSS部分

CSS的概念

CSS（Cascade Style Sheet）层叠样式表CSS 能够决定页面的样式，对网页的配色以及元素的布局进行精确控制。

CSS与html的结合方式

在标签上加入style属性

<!-- 属性值为CSS样式代码 --><p style="color: red;">aaa</p>

在页面的head标签中，书写一个style标签

<html>    <head>        <title></title>        <!-- 在style标签中书写css代码 -->        <style type="text/css">            p{                color: blue;            }        </style>    </head>    <body>    </body></html>

在页面head标签中填写link标签

<html>    <head>        <title></title>        <!-- type:mime类型   rel:类型    href:css文件路径(.css文件) -->        <link type="text/css" rel="stylesheet" href="#" />    </head>    <body>    </body></html>

CSS的选择器

元素选择器

<!-- 语法：元素名称{            属性键：属性值;        }--><style type="text/css">    html {        color:black;    }    h1 {        color:blue;    }</style><body>    <h1>标题标签</h1></body>

ID选择器

<!-- ID属性唯一标识符，要确保页面当中id属性的唯一性        语法：#ID{                属性键：属性值;            }--><style type="text/css">    #tb{        background-color: red;    }</style><body><talbe id="tb">    <tr>        <td></td>        <td></td>    </tr>    <tr>        <td></td>        <td></td>    </tr></table></body>

类选择器

<!-- class属性可以随意重复        语法：.class名称{                属性键：属性值;            }--><style type="text/css">    .tb{        background-color: red;    }</style><body><talbe class="tb">    <tr>        <td></td>        <td></td>    </tr>    <tr>        <td></td>        <td></td>    </tr></table></body>

选择器分组

<!-- 语法：选择器1，选择器2...{                属性键：属性值;            }--><style type="text/css">    .t1,#t2{        background-color: red;    }</style><body><talbe>    <tr id="t1">        <td></td>        <td></td>    </tr>    <tr class="t2">        <td></td>        <td></td>    </tr></table></body>

伪类选择器

<!-- 指的是选择的某个标签的某种状态。常见状态有4种，a标签最全:        l   link      没有点击过的状态        v   visited   访问过的状态        h   hover     鼠标悬浮        a   active    激活状态（鼠标点下去没有弹起）--><style type="text/css">    a:link {        color: #FF0000;    }       /* 未访问的链接 */    a:visited {        color: #00FF00;    }   /* 已访问的链接 */    a:hover {        color: #FF00FF;    }   /* 鼠标移动到链接上 */    a:active {        color: #0000FF;    }   /* 选定的链接 */</style><body>    <a href="#">a标签的不同状态</a></body>

CSS的基本语法

选择器｛    属性键：属性值;    属性键：属性值1 属性值2 ...;｝注释：与java中多行注释相同      /*注释内容*/

CSS的常用属性

单位（了解）

颜色单位(color  units)    #RRGGBB       rgb（R,G,B）      color name长度单位(Length units)    em     ex     px像素（常用）     pt     pc     in     cm     mm单位换算：1in = 2.54cm = 25.4mm = 72pt = 6pc

字体属性

color  → 文字颜色font-family → 文字样式font-size → 文字大小font-style → 文字样式（斜体）font-weight → 文字加粗font-variant → 异形字font → 复合属性

背景属性

background-color → 背景色background-image → 背景图background-repeat → 图片重复background-attachment → 背景定位background → 复合属性

阅读全文

1 0