Java web 学习笔记 Html CSS 小节

时间:2023-03-09 06:05:09
Java web 学习笔记  Html CSS 小节


HTML (Hyper Text Markup Language):

HTML就是超文本标记语言的简写,是最基础的网页语言

HTML的版本:

2.0(IETF)

3.0(W3C)

4.01(W3C)

5.0(W3C)IETF: Internet Engineering Task Force

 

W3C:World Wide Web Consortium

HTML的特点:是通过标签来定义的语言,

代码都是由标签所组成,代码不用区分大小写由<html>开始,</html>结束

由头部分<head></head>和体部分<body></body>两部分组成

 

头部分是给HTML页面增加一些辅助或者属性信息,它里面的内容会最先加载body体部分是真正存放页面数据的地方

1.字体标签:<font>

2.标题标签<h1><h2><....h6>

&lt;

<

&gt;

>

&quot;

"

&reg;

®

&copy;

©

&trade;

&nbsp;

空格

标签:<dl>列表、<dt>标题、<dd>列表项

数字标签:

        <ol>列表、<li>列表项

        type属性更改项目符号(a A 1 i I)

符号标签:

        <ul>列表、<li>列表项

        type属性更改项目符号(circle、disc、square)

图像标签<img>: <img src="1.jpg" align="right" border="3" alt="图片说明文字" />

     

        src: 图片路径

        align: 对齐方式

        border: 边框粗细

        <img src="Sunset.jpg"   alt="图片说明文字"    usemap="#Map" />

        <map name=”Map”>

        <area shape="rect" coords="50,59,116,104" href="1.html" />

        <area shape="circle" coords="118,203,40" href="2.html" />

        </map>

链接标签<a>:

<a href="http://www.itheima.com" target="_blank">黑马程序员</a>

        href:要链接的地址

        target:显示位置

Java web 学习笔记  Html CSS 小节

 

       <a name="mark" />

              在页面的某个位置做出标记

       <a href="#mark">跳转到标记</a>

      点击链接跳转到标记位置

框架集合标签<frameset>:

        <frameset>中可以放入多个<frame>框架,把页面分成几个部分

        <frameset>不能放在body中

<frameset rows="20%,*">

        <frame src="1.html" name="top" />

        <frameset cols="20%,*">

                  <frame src="2.html" name="left" />

                  <frame src="3.html" name="right" />

        </frameset>

</frameset>

rows:框架集合每行的高度

cols:框架集合每列的宽度

src:框架中显示的页面

name:框架的名字,可用做超链接的target 表单标签<form>:

        内部可以包含文本框、单选、多选、下拉列表等表单项

        可以把用户在页面中的输入和选择提交到一个地址

        常用属性:

         action:提交地址

         method:提交方式

<form action="http://www.itheima.com/LoginSetvlet" method="get">

        <input type="text" name="username">

        <input type="password" name="password">

        </form>

        输入项<input>:

        通过指定type属性可以定义不同的输入项:

        text:普通文本框

        password:密码框

        radio:单选按钮

        checkbox:多选按钮

        file:文件

        hidden:隐藏字段

        submit:文本提交按钮

        image: 图片提交按钮

        reset:重置按钮

        button:普通按钮

下拉列表<select>

         默认为单选,multipe属性指定是否为多选

         size属性指定显示个数

         内部用<option>标签指定其中选项

文本域<textarea>

        rows属性指定行数

        cols属性指定列数

标签<label>

        可以用来方便点击或者设置快捷键

        <label><input type="radio"> 男</label>

        <label for="user" accesskey="u">用户名(u)</label>

        <input type="text" id="user" />

Java web 学习笔记  Html CSS 小节

定义方式:

style属性:

        直接在HTML标签的style属性中定义,例如:

        <div style="color: red;">DIV中的文本</div>

style标签:

        在<head>标签中加入<style>标签,例如:

        <head>

 <style type="text/css">

         div { color: red; }

 </style>

        </head>

import:

        将CSS代码定义在一个文件中,在<style>标签中引入,已不推荐使用

        <style>

 @import url(theme.css);

        </style>

link:

        将CSS代码定义在一个文件中,使用<link>标签引入

        <link rel="stylesheet" type="text/css" href="theme.css"

Java web 学习笔记  Html CSS 小节

Java web 学习笔记  Html CSS 小节

Java web 学习笔记  Html CSS 小节

Java web 学习笔记  Html CSS 小节

Java web 学习笔记  Html CSS 小节