html标签与css样式

<!DOCTYPE html>  --->  对应规则关系（标准）

1、一套规则，浏览器认识的规则 
2、 开发者： 学习html规则 开发后台程序
　　- 写html文件（充当模板作用） 
　　- 数据库获取数据，然后替换到html文件的指定位置(web框架) 
3、本地测试 
　　- 找到文件路径，直接浏览器打开
　　- pycharm打开测试 
4、编写html文件 - doctype对应关系 
　　- html标签，标签内部可以写属性 
　　===> 只能有一个html、head、body标签 
　　- 注释：<!-- 注释内容 > 
5、 标签分类 
　　- 自闭合标签： <meta charset="UTF-8"> 
　　- 主动闭合标签： <title>老男孩</title>

head标签

- meta标签：
   　　属性：编码，跳转，刷新，关键字，描述，IE兼容
      <meta http-equiv="refresh" content="3">   页面默认3s刷新一次
      <meta http-equiv="refresh" content="3;Url=http://baidu.com">  页面默认3s跳转到baidu.com
      <meta name="keywords" content="灰太狼,喜洋洋">   # 关键字搜索
      <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=IE7;">  IE浏览器从最新的开始，看能否兼容
 - title标签：
      页面头标签，显示出来能看到的内容
 - link标签：
      搞图标,引用css文件
　　　　<link rel="stylesheet" href="css/comms.css"/>

1 <head>
2     <meta charset="UTF-8">
3     <meta http-equiv="refresh" content="3">
4     <meta http-equiv="refresh" content="3;Url=http://baidu.com">
5     <meta name="keywords" content="灰太狼,喜洋洋">
6     <meta name="descripts" content="你好，这个喜洋洋与灰太狼。。。">
7     <title>页面标题</title>
8 </head>

head标签内容

body标签

- 图标(&nbsp; &lt; &gt;) (空格、< 、>)
    <a href="http://www.baidu.com">百&nbsp;&lt;a&gt;度</a>
- p 标签:
    段落标签,内容不换行
- br 标签:
    换行
- input 标签
    - name属性,提供后台拿数据
        <input type="text" name="user"/>  # type="text" 单行数据输入
        <input type="password" name="password"/>
    - value属性为默认值
        <input type="text" name="user" value="alex"/>

    input type='radio'   - 单选框，value, name属性（name相同则互斥），checked="checked" 默认值

    input type='checkbox'  - 复选框 value,name属性（name相同批量获取数据），checked="checked" 默认值

    input type='file'   - 依赖from表单中的一个属性(enctype="multipart/form-data",默认把文件一点一点上传)

    input type='reset'   - 重置

    <textarea name="meno">默认值</textarea>   # 多行文本输入

    - select标签   - name属性，内部option中的value属性,selected默认值
                - size  可以展示多个
                - mulitiple 多选
                - optgroup 分组标签,内部包含option
    - a 标签
        - 跳转
            <a href="http://baidu.com" target="_blank">百度</a>
            - target="_blank" 新的窗口打开，默认是当前页面打开
        - 锚（相当于书签的作用）
            <a href="#i4">第四章</a>
            <div id="i4" style="height: 600px;">第四章内容</div>
            - href="#某个标签的ID"  标签ID不允许重复

    - img标签（图片）
        - src 图片地址
        - title 鼠标移到图片时出现的内容
        - style 可以设置图片高度宽度
        - alt  图片出现烂图时出现的文字
        - 图片跳转可以将img标签写在a标签内部
         <a href="http://cnblogs.com/sshcy" target="_blank">
            <img src="timg.jpg" title="萌萌哒" style="height: 200px; 200px;" alt="小狗">
         </a>

    - 列表
        - ul
            li
        - ol
            li
        - dl
            dt
            dd

    - table 表格
        - broder属性添加表格
        - tr标签: 一行
            - td标签：一列

            <table border="1">
                <tr>
                    <td>主机</td>
                    <td>端口</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td>1.1.1.1</td>
                    <td>80</td>
                    <td>
                        <a href="s1.html">查看详情</a>
                    </td>
                </tr>

            </table>

         - thead 标签：表头
            - tr 标签： 一行
            - th 标签： 表头中的一列
         - tbody 标签：表身体
            - tr 标签： 一行
            - td 标签：表身体中的一列

    - lable标签：
        跟id有关，用于点击文字，使得关联的标签获取光标
            <label for="username">用户名:</label>
            <input id="username" type="text" name="user" />

    - fieldset标签
        - legend标签：在框上写文字

        <fieldset>
            <legend>登录</legend>
            <label for="username">用户名:</label>
            <input id="username" type="text" name="user" />
        </fieldset>

 1 <body>
 2     <form action="http://baidu.com" method="post">
 3         <input type="text" name="user"/>
 4         <input type="password" name="pwd"/>
 5         <!--<input type="button" value="登录1">-->
 6         <input type="submit" value="登录2"/>  <!-- from表格中提交用submit类型 -->
 7     </form>
 8 
 9     <form enctype="multipart/form-data">
10         <div>
11             <select name="city" size="5" multiple="multiple">
12                 <option value="1">北京</option>
13                 <option value="2">南京</option>
14                 <option value="3" selected="selected">广州</option>
15                 <option value="4">上海</option>
16             </select>
17 
18             <select name="city2">
19                 <optgroup label="湖南">
20                     <option>长沙</option>
21                     <option>株洲</option>
22                 </optgroup>
23                 <optgroup label="广东">
24                     <option>广州</option>
25                     <option>深圳</option>
26                 </optgroup>
27             </select>
28 
29             <input type="text" name="user"/>
30 
31         </div>
32 
33         <div>
34             <p>请选择性别:</p>
35             男：<input type="radio" name="sex" value="1" checked="checked"/>
36             女：<input type="radio" name="sex" value="2"/>
37             Alex：<input type="radio" name="sex" value="3">
38             <p>爱好</p>
39             篮球：<input type="checkbox" name="favor" value="1" checked="checked"/>
40             足球：<input type="checkbox" name="favor" value="2" checked="checked"/>
41             排球：<input type="checkbox" name="favor" value="3"/>
42             <p>技能</p>
43             撩妹：<input type="checkbox" name="skill" value="1" checked="checked"/>
44             写代码：<input type="checkbox" name="skill" value="2"/>
45             <p>上传文件</p>
46             <input type="file" name="fname"/>
47         </div>
48 
49         <textarea name="meno">默认值</textarea>
50 
51 
52         <input type="submit" value="提交"/>
53         <input type="reset" value="重置"/>
54     </form>
55 
56 </body>

body标签1

 1 <body>
 2     <a href="#i1">第一章</a>
 3     <a href="#i2">第二章</a>
 4     <a href="#i3">第三章</a>
 5     <a href="#i4">第四章</a>
 6 
 7     <div id="i1" style="height: 600px;">第一章内容</div>
 8     <div id="i2" style="height: 600px;">第二章内容</div>
 9     <div id="i3" style="height: 600px;">第三章内容</div>
10     <div id="i4" style="height: 600px;">第四章内容</div>
11     <a href="http://cnblogs.com/sshcy" target="_blank">
12         <img src="logo.jpg" title="萌萌哒" style="height: 200px; 200px;" alt="小狗">
13     </a>
14 
15     <ul>
16         <li>alex</li>
17         <li>lucy</li>
18     </ul>
19 
20     <ol>
21         <li>alex</li>
22         <li>lucy</li>
23     </ol>
24 
25     <dl>
26         <dt>名字</dt>
27         <dd>alex</dd>
28         <dd>lucy</dd>
29     </dl>
30 
31     <table border="1">
32         <tr>
33             <td>主机</td>
34             <td>端口</td>
35             <td>操作</td>
36         </tr>
37         <tr>
38             <td>1.1.1.1</td>
39             <td>80</td>
40             <td>
41                 <a href="s1.html">查看详情</a>
42             </td>
43         </tr>
44 
45     </table>
46 
47 </body>

body标签2

 1 <body>
 2     <table border="1">
 3         <thead>
 4             <tr>
 5                 <th>表头1</th>
 6                 <th>表头2</th>
 7                 <th>表头2</th>
 8                 <th>表头2</th>
 9             </tr>
10         </thead>
11         <tbody>
12             <tr>
13                 <td>1</td>
14                 <td colspan="2">1</td>   <!-- 两列合成一列 -->
15                 <td>1</td>
16             </tr>
17             <tr>
18                 <td rowspan="2">1</td>   <!-- 两行合成一行 -->
19                 <td>1</td>
20                 <td>1</td>
21                 <td>1</td>
22             </tr>
23             <tr>
24                 <td>1</td>
25                 <td>1</td>
26                 <td>1</td>
27             </tr>
28             <tr>
29                 <td>1</td>
30                 <td>1</td>
31                 <td>1</td>
32                 <td>1</td>
33             </tr>
34         </tbody>
35     </table>
36 
37     <fieldset>
38         <legend>登录</legend>
39         <label for="username">用户名:</label>
40         <input id="username" type="text" name="user" />
41     </fieldset>
42 
43 </body>

body标签3

html小结

所有标签分为:
        块级标签:
            div标签(白板), h系列标签(加大加粗), p标签(段落与段落之间有间距)
        行内标签:
            span标签(白板), input标签，textarea标签 select标签 a标签
    标签之间可以嵌套
    标签存在的意义:
        css操作, js操作, 定位更方便
    
    <input type="text" name="user"/>
    <input type="password" name="pwd"/>
    有name属性后以字典的形式把数据传过去：{"user":"用户","pwd":"密码"}
    没有name属性后台拿不到具体的值
    ------------------
    <form action="http://baidu.com" method="post">
    <input type="text" name="user"/>
    <input type="password" name="pwd"/>
    <input type="button" value="登录1">
    <input type="submit" value="登录2"/>
    </form>
    ---------------------
    服务端：self.get_argument("user")  # 取user的值
    
    提交请求：请求头相关数据、内容
    get方法：数据在请求头中直接发过去
    post方法：数据在内容中发过去

css样式介绍

    在每一个标签上都可以设置style属性:
        background-color: #2a8bcb;
        height: 48px;

    编写css样式
        1. 标签的style属性
        2. 写在head里面，style标签中编写样式
            - id 选择器
                #i1{
                    background-color: #2459a2;
                    height: 48px;
                }
                <div id="i1">fff</div>   # id 不能重复

            - class 选择器（推荐使用）
                .c1{
                    background-color: #3c763d;
                    height: 20px;
                }
                <div class="c1">dddd</div>   # class 可以重复

            - 标签选择器
                div{
                    background-color: #3c763d;
                    color: white;
                }
                把所有div标签都设置上

            - 层级选择器（空格）
                .c1 span div a {
                    background-color: #3c763d;
                    height: 20px;
                }
                class=.c1下面的span标签下面的div标签下的a标签

            - 组合选择器（逗号）
               #i1,#i2,#3{
                    background-color: #2459a2;
                    height: 48px;
               }
               id=i1或者id=i2或者id=i3都可以应用这个样式

            - 属性选择器
                对选择到的标签再通过属性进行一次筛选
                input[n="alex"]{ 100px; height: 200px;}  # input标签下的n="alex"属性
                .c1[n="alex"]{ 100px; height: 200px;}   # class=c1下的n="alex"属性
        PS:
            - 优先级
                标签上style优先,其它的按编写顺序，就近原则
            - css样式
                可写入单独的文件中通过link标签进行引用
                <link rel="stylesheet" href="comms.css"/>

        - 边框
            - 宽度、样式、颜色(border: 4px dotted red;  # 边框线条粗细为4px，dotted为虚线，颜色为red)
            - border-left  左边框（默认是后边都有）

        - 样式
            - height: 高度
            -  宽度，可以用像素，百分比
            - text-align:cener  水平方向居中
            - line-height: 垂直方向根据标签高度居中
            - color: 字体颜色
            - font-size: 字体大小
            - font-weight: 字体加粗

            <div style="height: 48px; 80%; text-align: center;line-height: 48px; font-weight: bold; font-size: 20px; border: 5px dotted red";>caoy</div>

        - float 属性
            让标签飘起来，块级标签也能堆叠
                <div style="background-color: #3c763d; 20%; float: left">1</div>
                <div style="background-color: #7b3f25; 80%; float: left;">2</div>

            float起来后,边框管不住，后面要加：
                <div style="clear: both"></div>
                ############################
                    <div style=" 300px;border: 1px solid red">
                        <div style=" 96px; height: 30px; border: 1px solid green; float: left;"></div>
                        <div style="clear: both"></div>
                    </div>

        - display属性
            display: none;   让标签不显示
            display: inline;  块级标签转变成行内标签效果
            display: block;   行内标签转变成块级标签效果
            display: inline-block;
                       -  具有inline属性，默认自己有多少占多少
                       -  具有block属性，可以设置高度、宽度、padding margin

            行内标签：无法设置高度、宽度、padding margin
            块级标签：设置高度、宽度、padding margin

        - padding margin (0,auto)
            padding: 内边距
            margin: 外边距
                margin: 0 auto;   # 上面边距为0，左右边距自动

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         #i1,#i2,#3{
 6             background-color: #2459a2;
 7             height: 48px;
 8         }
 9         .c1{
10             background-color: #3c763d;
11             height: 20px;
12         }
13 
14         span div{
15             background-color: #3c763d;
16             color: white;
17         }
18 
19         input[n="alex"]{width: 100px; height: 200px;}
20         .c1[n="alex"]{width: 100px; height: 200px;}
21 
22     </style>
23 </head>
24 <body>
25     <div style="background-color: #2a8bcb;height: 48px;">1</div>
26     <div id="i1">fff</div>
27     <span class="c1">1243432
28         <div>sssbbbb</div>
29     </span>
30     <div class="c1">dddd</div>
31     <div class="c1">hehehe</div>
32 
33     <input class="c1" type="text" n="alex"/>
34     <input class="c1" type="password"/>
35 </body>

css样式1

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .c1{
 6             background-color: red;
 7             color: white;
 8         }
 9         .c2{
10             font-size: 58px;
11             color: black;
12         }
13     </style>
14 
15     <link rel="stylesheet" href="css/comms.css"/>  <!-- 引用css文件 -->
16 
17 </head>
18 <body>
19     <div class="c1 c2" style="color: pink;">adafdsf</div>
20 
21     <div style="height: 48px;  200px; border: 5px dotted red">caoy</div>
22 
23     <div style="height: 48px;
24      80%;
25     text-align: center;
26     line-height: 48px;
27     font-weight: bold;
28     font-size: 20px;
29     border: 5px dotted red";>caoy</div>
30 
31     <div style="background-color: #3c763d; 20%; float: left">1</div>
32     <div style="background-color: #7b3f25; 80%; float: left;">2</div>
33 
34     <div style=" 300px;border: 1px solid red">
35         <div style=" 96px; height: 30px; border: 1px solid green; float: left;"></div>
36         <div style=" 96px; height: 30px; border: 1px solid green; float: left;"></div>
37         <div style=" 96px; height: 30px; border: 1px solid green; float: left;"></div>
38         <div style=" 96px; height: 30px; border: 1px solid green; float: left;"></div>
39         <div style=" 96px; height: 30px; border: 1px solid green; float: left;"></div>
40         <div style=" 96px; height: 30px; border: 1px solid green; float: left;"></div>
41         <div style=" 96px; height: 30px; border: 1px solid green; float: left;"></div>
42         <div style="clear: both"></div>
43     </div>
44 
45     <div style="background-color: red; display: inline;">addadf</div>
46     <span style="background-color: red; display: block;">sddsa</span>
47 
48 </body>

css样式2

问题小结

html去除li前面小黑点及ul、li部分属性介绍

li 默认显示时前面总是会有一个小黑点，可以用以下方法来清除。
1、在CSS中写入代码
　　ul li{
　　　　list-style-type:none;
　　}
2、在相关的页面找到head部分写入下面的代码
　　<style type="text/css">list-style:none;</style>
3、在li,ul内加入list-style。
　　<ul style="list-style-type:none>
　　　　<li>
　　　　　　<a>我的博客</a>
　　　　</li>
　　</ul> 

list-style-type的其它属性：
　　none不使用项目符号
　　disc实心圆，默认值
　　circle空心圆
　　square实心方块
　　decimal阿拉伯数字
　　lower-roman小写罗马数字
　　upper-roman大写罗马数字
　　lower-alpha小写英文字母
　　upper-alpha大写英文字母
A).运用CSS格式化列表符
　　ul li{
　　　　list-style-type:none;
　　}
B).如果你想将列表符换成图像
　　ul li{
　　　　list-style-type:none;
　　　　list-style-image: url(images/icon.gif);
　　}
C).为了左对齐，可以用如下代码
　　ul{
　　　　list-style-type:none;
　　　　margin:0px;
　　}
D).如果想给列表加背景色，可以用如下代码： 
　　ul{
　　　　list-style-type: none;
　　　　margin:0px;
　　}
　　ul li{
　　　　background:#CCC;
　　}

p标签强制换行与不换行

一、英文换行
    /*只对英文起作用，以字母作为换行依据*/
        Div p{ word-break:break-all; 150px;}
    /*--只对英文起作用，以单词作为换行依据*/
        Div p{ word-wrap:break-word; 150px;}
    注意有的时候英文单词是一个整体不能拆开！！！

二、中文换行以及强制不换行
    /*只对中文起作用，强制换行*/
        Div p{white-space:pre-wrap;150px;}
    /*强制不换行，都起作用*/
        Div p{white-space:nowrap;10px;}

三、强制不换行以及超出宽度部分文字隐藏
    /*不换行，超出部分隐藏且以省略号形式出现*/
        .p5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;100px;}

一定要注意p或者p标签里面要有一个宽度才可以换行，要不然没有作用！！！

其他内容

　　html去掉a超链接下划线样式：　

　　　　　　text-decoration:none

　　　　}

　　span中加删除线效果：

删除线效果

 标签呈现斜体的文本。

￥

　　display:list-item

　　　　为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。display:list-item是 li 的默认样式　

相关阅读:
Activity工作流(2)-入门安装运行第一个例子
 三分钟明白 Activiti工作流 -- java运用
 java 实现一套流程管理、流转的思路（伪工作流）【仅供参考】
jquery 的 each 方法中 return 的坑
 js判断数组里是否有重复元素的方法
 JFreeChart工具类
 JQuery中$.each 和$(selector).each()的区别详解
 echarts彩虹柱状图每个bar显示不同颜色，标题在不同位置，工具中有可以直接保存为图片下载，平均线的添加
 poi导出word表格详解超详细了
 java使用POI操作XWPFDocument中的XWPFRun（文本）对象的属性详解
原文地址：https://www.cnblogs.com/sshcy/p/8622035.html