前端html+css之第十四天

一、HTML

1、HTML是什么？

　　Hypertext Markup Language, 中文也就是超文本链接标示语言。
　　HTML是一套规则，一套浏览器认识的规则。

2、开发者：
　　(1)学习Html规则
　　(2)开发后台程序：
　　　　写Html文件（充当模板的作用） ******
　　　　数据库获取数据，然后替换到html文件的指定位置（Web框架）

3、本地测试
　　（1）找到文件路径，直接浏览器打开，如下图：

　　图一：

　　　　　　

　　图二：

                　

　　图三、

　　　　　　

 

　　（2）pycharm打开测试，如下图：

　　　　图一：　　　　

　　　　　　　　

　　　　图二： 　　　　　　　　

　　　　          

　　　　注：如果用pycharm打开测试有乱码的话，可以用本地测试的方法

 

4、编写Html文件
　　（1） doctype对应关系

　　　　a：启用标准模式，建议使用大写的 DOCTYPE

　　　　　　例如：

　　　　b：启用IE模式，向下兼容

　　　　　　　　<meta http-equiv="X-UA-Compatible" content="IE=IE9；IE=IE8；IE=IE7">

　　　　c：html标签上lang的属性

　　　　　　有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。

　　　　　　例如：

　　（2）html标签，标签内部可以写属性 ====> 但是文件中只能有一个html标签
　　（3） 如何注释： 示例  <!-- 注释的内容 -->

　　　　

 

　　在pycharm中同样可以用ctrl+/,对选中内容进行注释。

 

5、标签分类
　　（1）自闭合标签，如
　　　　<meta charset="UTF-8">
　　（2）主动闭合标签,如下
　　　　<title>老男孩</title>

6、head标签中
　　（1）<meta> 编码，跳转，刷新，关键字，描述，

　　　　IE兼容
　　　　<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
　　（2）title标签

　　　　　　


　　（3）<link /> 小图标，写法如下　

　　　　<link rel="shortcut icon" href="image/favicon.ico">
　　　　效果图及下图显示的小图标，

 

　　　　　　

　　相对当前html文件的同级目录中有个image的文件里的favicon.ico文件就是小图标

 7、body标签

　　body中标签的另一种分类：

　　　　行内标签（内联标签）：span标签

　　　　块级标签：h系列标签，p标签，div标签

　　

　　（1）特殊符号

　　　　　　空格&nbsp 大于号&gt 小于号&lt

　　（2）p标签，段落，主动闭合标签 特点：段落和段落之间有间距

　　（3）br标签，换行，自闭合标签 <br /> 不区分大小写 

　　（4）h系列标签，标题，h1-->h6 字体从大到小 特点：加大加粗

　　（5）div标签，白板

　　（6）span标签，白板

　　（7）input系列 + form标签

　　　　　input

　　　　　　input type='text'  　　　　name属性（便于后台区分数据，提取数据），value="张三"（默认是张三） 
　　　　　　input type='password' 　 name属性（同上），value="123456"（默认密码是123456） 
　　　　　　input type='submit' 　　  value='提交' 提交按钮，表单
　　　　　　input type='button'  　　 value='登录' 按钮 
　　　　　　input type='radio' 　　　 单选框 value，checked="checked"（默认为已选），name属性（name相同则互斥）
　　　　　　input type='checkbox' 　复选框 value, checked="checked"（默认为已选），name属性（批量获取数据）
　　　　　　input type='file' 　　　　 依赖form表单的一个属性 enctype="multipart/form-data"
　　　　　　input type='rest'  　　　 重置

　　　　　　<textarea >默认值</textarea> 　　多行文本的输入　　name属性（后台提取数据的依据）  
　　　　　　select标签 　　　　　　 选择下拉框;name,内部option value, 提交到后台，size(把值列出来默认size=1)，multiple=multiple（可以多选）　　　　　　　　　

 　　　　form

　　　　　　action="提交数据的url地址" 

　　　　　　method=get形式　　　　　　　　　　　　表单提交的数据拼接到url上并提交

　　　　　　method=post形式　　　　　　　　　　　表单提交的数据直接写在body中，并提交

　　　　　　这两种形式并没有数据安全不安全的说法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>S5</title>
</head>
<body>
    <!--type='file'依赖form表单的一个属性enctype="multipart/form-data"-->
    <form enctype="multipart/form-data">
        <div>
            <textarea name="meno">默认可以多行输入</textarea>
            <select name="city" size="10" multiple="multiple">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3" selected="selected">南京</option>
                <option value="4">成都</option>
            </select>
            <!--type='text' name='user' value=''(默认值)-->
            <input type="text" name="user"/>
            <p>请选择性别</p>

            男：<input type="radio" name="gender" value="1"/>
            女：<input type="radio" name="gender" value="2"/>
            中姓：<input type="radio" name="gender" value="3"/>
            <p>爱好</p>
            篮球：<input type="checkbox" name="favor" value="1"/>
            足球：<input type="checkbox" name="favor" value="2"/>
            铅球：<input type="checkbox" name="favor" value="3"/>
            台球：<input type="checkbox" name="favor" value="4"/>
            皮球：<input type="checkbox" name="favor" value="5"/>
            滚球：<input type="checkbox" name="favor" value="6"/>
            网球：<input type="checkbox" name="favor" value="7"/>
            <p>技能</p>
            聊妹：<input type="checkbox" name="skill" value="1" checked="checked"/>
            写代码：<input type="checkbox" name="skill" value="2" />
            <p>上传文件</p>
            <input type="file" name="fname"/>
        </div>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>
示例代码

 

　　（8）a标签

　　　　　作用：跳转--》target="_blank" 新开窗口 _self自身 _parent 父窗口 _top顶层窗口

　　　　　　　　锚定--》 href='#某个标签的ID'    标签的ID不允许重复

　　　　　示例代码：　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签-跳转</title>
</head>
<body>
    <h1>a标签-跳转</h1>
    <a href="http://www.baidu.com" target="_blank">百度首页-_blank新开窗口</a>
    <a href="http://www.baidu.com" target="_self">百度首页_self是自身</a>
    <a href="http://www.baidu.com" target="_parent">百度首页_parent是父窗口</a>
    <a href="http://www.baidu.com" target="_top">百度首页_top是顶层窗口</a>
</body>
</html>
a标签-跳转
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签-锚</title>
</head>
<body>
    <h1>a标签-锚</h1>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <div id="i1" style="height: 600px;" >第一章内容</div>
    <div id="i2" style="height: 600px;">第二章内容</div>
    <div id="i3" style="height: 600px;">第三章内容</div>
    <div id="i4" style="height: 600px;">第四章内容</div>
</body>
</html>
a标签-锚定

　　（9）img标签

　　　　　　属性：src=“图片地址” style=“高度，宽度”  alt=“美女”（及但图片不存在时，会显示这个alt的值） title=“大美女”（及当图片存在，鼠标放到图片上会显示这个值）

　　　　　　img标签可以放在a标签里面，当点击图片时做url跳转，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.cgpower.cn">
        <img src="1.jpg" title="完美动力" style="height: 200px;width: 200px;" alt="美女"/>
    </a>

</body>
</html>
img-跳转

　　（10）列表组合（默认情况下，这种用得比较少）

　　　　　　ul与li  以点开头

　　　　　　ol与li  以数字开头

　　　　　　dl与dt及dd  以dt为标题，以dd为内容

　　　　示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>完美动力</li>
        <li>完美动力</li>
        <li>完美动力</li>
    </ul>
    <ol>
        <li>完美动力</li>
        <li>完美动力</li>
        <li>完美动力</li>
    </ol>
    <dd>
        <dt>www.cgpower.cn</dt>
        <dd>完美动力</dd>
        <dd>完美动力</dd>
        <dd>完美动力</dd>
    </dd>
</body>
</html>
ul-ol-dd

　　　　结果：

　　　　　　　　

　　（11）表格 table标签

　　　　　　thead 表头 tr th

　　　　　　tbody        tr td

　　　　　　colspan=“” 列合并

　　　　　　rowspan=“” 行合并

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>第1列</th>
                <th>第2列</th>
                <th>第3列</th>
                <th>第4列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">1</td>
                <td>1</td>
            </tr>
            <tr>
                <td rowspan="3">1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
表格 table标签示例

 

　　　　　　结果：

　　　　　　　　

　　（12） lable标签

　　　　　　与input一起用，用于点击文字，使关联的标签获取光标

　　　　　　<label for="username">用户名：</label>
            　　<input id="username" type="text" name="user" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <label for="username">用户名：</label>
    <input id="username" type="text" name="user"/>
</body>
</html>
lable+input

　　（13）fieldset标签（只要知道就行，很少用）

　　　　　　legend 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <fieldset>
        <legend>登录</legend>
        <label for="username">用户名：</label>
        <input id="username" type="text" name="user" />
        <br />
        <label for="pwd">密码：</label>
        <input id="pwd" type="text" name="user" />
    </fieldset>
</body>
</html>
View Code

效果：

　　　　　　

二、CSS　

　　在标签上设置style属性：

　　　　background-color： #2459a2；

　　　　height：48px；

　　　　。。。等等

　　1、标签的属性中，可以直接写style

　　2、写在head里面， style标签中写样式

 　　　　（1）id选择器

                  　　#i1{
                    　　background-color: #2459a2;
                    　　height: 48px;
                 　　 }

　　　　　　　　<标签 id='i1'> </标签>

　　　　（2）class选择器 （常用，比较重要）
                
                  　　.名称{
                   　　 ...
                 　　 }          
                  <标签 class='名称'> </标签>
　　　　（3） 标签选择器
                   　　div{
                      　　  ...
                   　　 }
　　　　　　所有div设置上此样式           
　　　　（4）层级选择器（空格） ******
                   　　.c1 .c2 div{
                  　　 }
　　　　（5）组合选择器（逗号） ******
                    　　#c1,.c2,div{                     
                   　　}           
　　　　（6）属性选择器 ******
                   　　对选择到的标签再通过属性再进行一次筛选
                   　　.c1[n='alex']{ width:100px; height:200px; }                  
　　　　（7）PS:
             　　优先级：标签上style优先，编写顺序，就近原则
            
　　3、 css样式也可以写在单独文件中（重用性）

　　　　　　引入需要有如下：
           　　 <link rel="stylesheet" href="commons.css" />
           　　或 <link rel="stylesheet" href="css/commons.css" />     

　　　　　　这里的css是同级目录有个css文件
　　4、注释
           　　 /*   */
    
　　5、边框
             　　border 边框宽度，dotted，soild样式（虚线，实线），red颜色 

　　　　　　(border: 4px dotted red;)
             　　border-left 左边框

　　　　　　border-right 有边框
        
　　6、给标签定义（高度，宽度等）       

　　　　　　height，         高度 　　像素，没有百分比
            　　width，          宽度  　　像素，百分比
            　　text-align:ceter, 水平方向居中
            　　line-height，垂直方向根据标签高度（跟height值一样就完全居中）
           　　 color     字体颜色
           　　 font-size 字体大小
            　　font-weight 字体加粗    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border: 1px dotted red;">
        asdfasdf
    </div>
    <div style="height: 48px;
    width:80%;
    border: 1px solid red;
    font-size: 16px;
    text-align: center;
    line-height: 48px;
    font-weight: bold;
    ">asdf</div>
</body>
</html>
border-高宽度-水平居中-垂直居中 

　　7、float （应用最广）
            　　让标签浪起来，块级标签也可以堆叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 20%;background: red ;float: left">
        1111111111111111111111
    </div>
    <div style="width: 60%;background: #339ba3 ;float: right">
        2222222222222222222222
    </div>
</body>
</html>
View Code

           　　 让float起来的变得可控：
               　　 <div style="clear: both;"></div>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 300px;border: 1px solid red;">
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="clear: both;"></div>
    </div>
</body>
</html>
View Code          

　　8、display（应用比较广）
            　　display: none; -- 让标签消失
            　　display: inline;--让块级标签变为行内标签属性
            　　display: block;--让行内标签变为块级标签属性
            　　display: inline-block;（重中之重）
                     　　具有inline,默认自己有多少占多少
                     　　具有block，可以设置设置高度，宽度，padding  margin
            　　******
           　　 行内标签：无法设置高度，宽度，以及边距（padding  margin）
            　　块级标签：可以设置高度，宽度，以及边距（padding  margin）
            
            
　　9、边距：

　　　　　　padding     　　　　　　　　内边距

　　　　 　　margin(0,auto)　　　　　　外边距  这里的0表示：上下两边的边距为零，网页默认边距是8px，

　　　　　　　　　　　　　　　　　　　　auto 当前的div居中







		

		
posted @ 
2016-11-09 16:24 
willpower-chen 
阅读(622) 
评论(0) 
编辑 
收藏 
举报