前端 html

a标签的使用:

1超链接:   href 超链接的地址  target: _self默认 在当前中打开页面地址 _blank  在空表页面打开链接地址

1 <a href="http://www.baidu.com">连接到百度</ a>

2##在新的页面打开连接的网页##
<a href="http://www.baidu.com"  target="_blank">新的页面打开链接的网页</a>

注意: href 后面只跟#    相当于刷新页面  不建议使用
<a href:"#":>刷新按钮</a>

< a href="javascript:alert(xiaozhu)>跳出xiaozhu</a>

 

2标签的内部跳转   锚点 默认有点击行为.我们可以通过 javascript:void(0)阻止a标签的默认点击行为.

#   调转到相应位置##
<a href="peiqi";>找小猪</a>



###阻止跳转#######
<a href="javascript:void(0)";>不跳转</a>

3 a标签还可以打电话 href 后面直接跟电话号码

img和a:

img:   src:连接图片资源  alt:图片资源加载失败.显示的文本  设置图片大小直接在href链接的资源后 width:设定宽; heigth:设定高;

设定a标签的大小 在head里设置 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <style type="text/css">
        a{display: inline-block;
            width:300px;
            heigth:300px;
        }

    </style>
</head>
<body>
    <div class="tupian">
        <a href="javascript:void(0)";>
        <img src="./1.jpg" alt="lihai" width="300px"; height="300px">
        </a>
    </div>

</body>
</html>
设置大小

 

列表:

ul:unordered list 无序列表  ul下面的子元素只能是li

　　type="cicle" 圆心    type="square"  方块

ol: ordered list  有序列表  只能是li

<div>
    <ul>
        <li>吃鸡战场</li>
        <li>英雄联盟</li>
        <li>全民初级</li>
    </ul>
    <ul type="circle">
        <li>吃鸡战场</li>
        <li>英雄联盟</li>
        <li>全民初级</li>
    </ul>
    <ol>
        <li>王者荣耀</li>
        <li>王者荣耀</li>
        <li>王者荣耀</li>
    </ol>
    <ol type="a">
        <li>虾米</li>
        <li>虾米</li>
        <li>虾米</li>
    </ol>
</div>

打印结果:

dl:定义列表    dt:定义标题  dd:定义内容

   　　　　　　　　

  

 

表格:table制作表格    tr表头   td 表内容

<div>
    <table border="1" style="border-collapse: collapse;" width="500px" heigth="200px">制作表格    #设置标签内容 border线宽 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　#border_collapse 合并线
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小猪</td>
            <td>不清楚</td>
        </tr>
        <tr>
            <td>2</td>
            <td>佩奇</td>
            <td>女</td>
        </tr>

    </table>
</div>

　　打印结果为:

注意:

colspan: 合并横向单元格            rowspan:合并纵向单元格   

 

tbody  thead   tfoot  可以打乱顺序写程序  默认会识别出表头 内容 和结尾

 

form表单:与用户交互

遵循HTTP协议

get:获取    post:提交数据

action:提交的服务器网址

method:get(默认)|post (应用:登录注册,上传文件)

页面中的 a img link 默认是get请求

input:

　　　　type:  text 文本输入框

　　　　　　　password:密码输入框

　　　　　　　submit 提交按钮

　　　　　　　button 普通按钮

　　　　　　　file:文件按钮 提交文件的时候一定要用post 一定要给form标签添加Enctype='multipart/form-data'　

　　　　　　　name:提交到服务器端的key

　　　　　　　value 显示的文本内容,与服务器端的value

　　　　　　　placeholder:文本代替

　　　　　　　radio 单项选择 二选一 例如 性别

　　　　　　　checkbox 单项选择 多选一例如 爱好

　　　　　　　select 下拉框选择  与<option>小学</option> <selected>研究生</selected>

　　　　　　　textarea 输入框   <textarea name="" id="" cols="60" rows="10"></textarea>

 

 

lable:   for:是与下面的某个表单控件的ID属性进行关联

 

<form action="" method="get">
        <p class="user">
            <lable for="username">用户名</lable>
            <input type="text" name="username" id="username" placeholder="请输入用户名">
        </p>
        <p class="pass">
            <lable for="pwd">密&nbsp码</lable>
            <input type="password" name="pwd"  placeholder="请输入密码">
        </p>
        <p>
            <input type="submit" value="注册">
        </p>
    </form>
登录注册

 

 

　

css的三种引入方式:

行内样式   注意:行内样式的优先级是最高的

<p style="color:red font-size:30px">具体内容</p>

内接样式: 

link rel="stylesheet" href="./index.css>

外接样式  链入式  导入式

 

基本选择器

id选择器 :选中的特性是唯一的,不能重复  #来选择

标签选择器  选中的页面中 共性的标签  p      去除小点  ul list-style:none;

类选择器 .类名  选中的也是共性  类名可以起多个 class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第一种方法-->
    <!--<style>-->
        <!--#p1{-->
            <!--font-size: 30px;-->
            <!--color: green;-->
        <!--}-->
        <!--#p2{-->
            <!--color: green;-->
            <!--text-decoration: underline;-->
        <!--}-->
        <!--#p3{-->
            <!--font-size: 30px;-->
            <!--text-decoration: underline;-->
        <!--}-->
    <!--</style>-->
<!--第二种方法-->
    <style>
        .lg{
            font-size: 30px;
        }
        .lv{
            color: green;
        }
        .un{
            text-decoration: underline;
        }
    </style>

</head>
<body>
<!--题目要求 小迷糊1 设置30px green
            小迷糊2  green   text-decoration:enderline;下划线
             小迷糊3 设置30px text-decoration:enderline;下划线
-->
    <p id="p1" class="lg lv">小迷糊1</p>
    <p id="p2" class="lv un">小迷糊2</p>
    <p id="p3" class="lg un">小迷糊3</p>

</body>
</html>
class使用

 

通配符选择器 *  选中的是所有的标签

 

posted @ 2018-09-17 19:35  领财  阅读(157)  评论(0)    收藏  举报