JavaWeb篇-HTML&CSS

朴灿烈づ我的快乐病毒、 2021-06-24 13:58 353阅读 0赞

### 文章目录 ###

*  HTML&CSS
 *   *  HTML
     *   *  标签语法
         *  font标签
         *  特殊字符
         *  标题标签
         *  超链接
         *  img标签
         *  表格标签
         *  iframe标签
         *  列表
         *  表单
         *  其他标签
     *  CSS
     *   *  CSS与HTML结合
         *   *  第一种
             *  第二种
             *  第三种(final)
         *  CSS选择器
         *   *  标签名选择器
             *  id选择器
             *  class类型选择器
             *  class类型选择器
         *  常用样式

# HTML&CSS #

## HTML ##

### 标签语法 ###

### font标签 ###

<body>
    	
    	<font color="red" face="宋体" size="7">我是字体标签</font>
    </body>

### 特殊字符 ###

<body>
    	
    	我是<br>标签<br/>
    	国哥好                           帅啊!
    </body>
    </html>

最常用的字符实体

<table> 
 <thead> 
  <tr> 
   <th>显示结果</th> 
   <th>描述</th> 
   <th>实体名称</th> 
   <th>实体编号</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td></td> 
   <td>空格</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&lt;</td> 
   <td>小于号</td> 
   <td>&lt;</td> 
   <td>&lt;</td> 
  </tr> 
  <tr> 
   <td>&gt;</td> 
   <td>大于号</td> 
   <td>&gt;</td> 
   <td>&gt;</td> 
  </tr> 
  <tr> 
   <td>&amp;</td> 
   <td>和号</td> 
   <td>&amp;</td> 
   <td>&amp;</td> 
  </tr> 
  <tr> 
   <td>"</td> 
   <td>引号</td> 
   <td>"</td> 
   <td>"</td> 
  </tr> 
  <tr> 
   <td>’</td> 
   <td>撇号</td> 
   <td>' (IE不支持)</td> 
   <td>'</td> 
  </tr> 
 </tbody> 
</table>

其他一些常用的字符实体

### 标题标签 ###

### 超链接 ###

<body>
    	
    	<a href="http://localhost:8080">百度</a><br/>
    	<a href="http://localhost:8080" target="_self">百度_self</a><br/>
    	<a href="http://localhost:8080" target="_blank">百度_blank</a><br/>
    </body>

### img标签 ###

### 表格标签 ###

### iframe标签 ###

<body>
    	我是一个单独的完整的页面<br/><br/>
        
        <iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
        <br/>
    
        <ul>
            <li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li>
            <li><a href="1.font标签.html" target="abc">1.font标签.html</a></li>
            <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
        </ul>
    </body>

### 列表 ###

### 表单 ###

<body>
    
    
        
        
        <form>
            <h1 align="center">用户注册</h1>
            <table align="center">
                <tr>
                    <td> 用户名称：</td>
                    <td>
                        <input type="text" value="默认值"/>
                    </td>
                </tr>
                <tr>
                    <td> 用户密码：</td>
                    <td><input type="password" value="abc"/></td>
                </tr>
                <tr>
                    <td>确认密码：</td>
                    <td><input type="password" value="abc"/></td>
                </tr>
                 <tr>
                    <td>性别：</td>
                    <td>
                        <input type="radio" name="sex"/>男
                        <input type="radio" name="sex" checked="checked" />女
                    </td>
                </tr>
                 <tr>
                    <td> 兴趣爱好：</td>
                    <td>
                        <input type="checkbox" checked="checked" />Java
                        <input type="checkbox" />JavaScript
                        <input type="checkbox" />C++
                    </td>
                </tr>
                 <tr>
                    <td>国籍：</td>
                    <td>
                        <select>
                            <option>--请选择国籍--</option>
                            <option selected="selected">中国</option>
                            <option>美国</option>
                            <option>小日本</option>
                        </select>
                    </td>
                </tr>
                 <tr>
                    <td>自我评价：</td>
                    <td><textarea rows="10" cols="20">我才是默认值</textarea></td>
                </tr>
                 <tr>
                    <td><input type="reset" /></td>
                    <td align="center"><input type="submit"/></td>
                </tr>
            </table>
        </form>
    </body>

### 其他标签 ###

<body>
            
        <div>div标签1</div>
        <div>div标签2</div>
        <span>span标签1</span>
        <span>span标签2</span>
        <p>p段落标签1</p>
        <p>p段落标签2</p>
    </body

## CSS ##

### CSS与HTML结合 ###

#### 第一种 ####

在标签的 style 属性上设置”key:value value;”，修改标签样式

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    
    <div style="border: 1px solid red;">div 标签 1</div>
    <div style="border: 1px solid red;">div 标签 2</div>
    <span style="border: 1px solid red;">span 标签 1</span>
    <span style="border: 1px solid red;">span 标签 2</span>
    </body>
    </html>

**问题：这种方式的缺点？**

*  如果标签多了。样式多了。代码量非常庞大。
 *  可读性非常差
 *  Css 代码没什么复用性可方言

#### 第二种 ####

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

格式如下： xxx \{ Key : value value; \}

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <style type="text/css"> /* 需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。*/ div{ border: 1px solid red; } span{ border: 1px solid red; } </style>
    </head>
    
    <body>
        <div>div标签1</div>
        <div>div标签2</div>
    
        <span>span标签1</span>
        <span>span标签2</span>
    </body>

**问题：这种方式的缺点**

*  只能在同一页面内复用代码，不能在多个页面中复用 css 代码
 *  维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了

#### 第三种(final) ####

把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。 使用 html 的 link标签 导入 css 样 式文件。

css代码

div{ 
    border: 1px solid yellow;
    }
    span{ 
    border: 1px solid red;
    }

html代码

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <link rel="stylesheet" type="text/css" href="1.css"/>
    
    </head>
    
    <body>
        <div>div标签1</div>
        <div>div标签2</div>
    
        <span>span标签1</span>
        <span>span标签2</span>
    </body>

### CSS选择器 ###

#### 标签名选择器 ####

<head>
    	<meta charset="UTF-8">
    	<title>CSS选择器</title>
    	<style type="text/css"> div{ border: 1px solid yellow; color: blue; font-size: 30px; } span{ border: 5px dashed blue; color: yellow; font-size: 20px; } </style>
    </head>
    <body>
    	
    	<div>div标签1</div>
    	<div>div标签2</div>
    	<span>span标签1</span>
    	<span>span标签2</span>
    </body>

#### id选择器 ####

<head>
    	<meta charset="UTF-8">
    	<title>ID选择器</title>
    	<style type="text/css"> #id001{ color: blue; font-size: 30px; border: 1px yellow solid; } #id002{ color: red; font-size: 20px; border: 5px blue dotted ; } </style>
    </head>
    <body>		
    	
    	
    	<div id="id002">div标签1</div>
    	<div id="id001">div标签2</div>
    </body

#### class类型选择器 ####

<head>
    	<meta charset="UTF-8">
    	<title>class类型选择器</title>
    	<style type="text/css"> .class01{ color: blue; font-size: 30px; border: 1px solid yellow; } .class02{ color: grey; font-size: 26px; border: 1px solid red; } </style>
    </head>
    <body>
    	
    
    	<div class="class02">div标签class01</div>
    	<div class="class02">div标签</div>
    	<span class="class02">span标签class01</span>
    	<span>span标签2</span>
    </body>

#### class类型选择器 ####

<head>
        <meta charset="UTF-8">
        <title>class类型选择器</title>
        <style type="text/css"> .class01 , #id01{ color: blue; font-size: 20px; border: yellow 1px solid; } </style>
    </head>
    <body>
    	
       <div id="id01">div标签class01</div> <br />
       <span>span 标签</span>  <br />
       <div>div标签</div> <br />
       <div>div标签id01</div> <br />
    </body>

### 常用样式 ###

1 、字体颜色

color：red；

颜色可以写颜色名如：black, blue, red, green 等

颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，\#00F6DE，如果写十六进制值必 须加\#

2、宽度

width:19px;

宽度可以写像素值：19px；

也可以写百分比值：20%；

3、高度

height:20px;

高度可以写像素值：19px；

也可以写百分比值：20%；

4、背景颜色

background-color:\#0F2D4C

5、字体样式：

color：\#FF0000；

字体颜色红色 font-size：20px; 字体大小

6、红色 1 像素实线边框

border：1px solid red;

7、DIV 居中

margin-left: auto;

margin-right: auto;

8、文本居中：

text-align: center;

9、超连接去下划线

text-decoration: none;

10、表格细线

table \{

border: 1px solid black; /*设置边框*/

border-collapse: collapse; /*将边框合并*/

td,th \{ border: 1px solid black; /*设置边框*/ \}

11、列表去除修饰

ul \{ list-style: none; \}

**代码示例**

<head>
        <meta charset="UTF-8">
        <title>06-css常用样式.html</title>
        <style type="text/css"> div{ color: red; border: 1px yellow solid; width: 300px; height: 300px; background-color: green; font-size: 30px; margin-left: auto; margin-right: auto; text-align: center; } table{ border: 1px red solid; border-collapse: collapse; } td{ border: 1px red solid; } a{ text-decoration: none; } ul{ list-style: none; } </style>
    </head>
    <body>
        <ul>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
        </ul>
        <table>
            <tr>
                <td>1.1</td>
                <td>1.2</td>
            </tr>
        </table>
        <a href="http://www.baidu.com">百度</a>
        <div>我是div标签</div>
    </body>