当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 2020培训0706-0708【web入门】笔记「二」

2020培训0706-0708【web入门】笔记「二」

2020年07月14日  | 移动技术网IT编程  | 我要评论

一、tag_text

#body

1. 标题在这里插入图片描述

2.目录

(1) <ul>:无序列表（unorder list）

ul的type属性有：disc（默认）| circle | square
在这里插入图片描述
浏览器运行：
在这里插入图片描述

（2）<ol>:有序列表（order list）

type属性有：1 | i | I | A | a （type属性不能填汉字，无法识别）
在这里插入图片描述
浏览器运行：
在这里插入图片描述

（3）正文

注意：页面缩放时，<p>标签网页宽度有多大，不够就自己换行，而文本aaaa……aaaa不换行的原因是将aaaa……看作一个英文单词
在这里插入图片描述
浏览器运行：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>list</title>
    <!--title为网页标题-->
</head>
<body>
    <!--heading标题-->
    <h1>学习使我快乐</h1>
    <!--h1有默认格式（上下边距等），div没有-->
    <ul>
        <li>学校</li>
        <li>班级</li>
        <li>姓名</li>
    </ul>
    <!--paragraph正文-->
    <p>Dangerous is so smart!</p>
    <p style="text-indent: 2em;">小天使真聪明</p>
    <!--控制格式：首行缩进-->
</body>
</html>

二、table（表格）标签

#head

在<head>处用 /* 注释 */
在这里插入图片描述

#body

1、table标签，表格的最外层
  • border属性：（值是整数）
  • width属性：（值是整数或者是百分比，默认表格的宽不是100%，是根据表格内容伸缩的
  • cellpadding属性：单元格个的内容和边框的距离，设置会松一些，不那么紧凑
  • cellspacing属性：单元素格和单元格之间的距离
2、tr标签，代表行
  • align属性：水平对齐 left | center | right
  • bgcolor属性：背景颜色
3、td、th标签，代表列，也是单元格
  • width属性：可以写成整数或者百分比，注意一列当中有一个td设置宽就生效
  • height属性：高度
  • colspan属性：合并列，一列占几个
  • rowspan属性：合并行，一行占几行
  • valign属性：垂直对齐（只有它有垂直对齐）
    top | middle | bottom | baseline
    在这里插入图片描述
    浏览器运行：
    在这里插入图片描述

举例——客户通话记录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
    <style>
        /*改变偶数行颜色（不改变标题颜色）*/
        tr:nth-child(even)
        {
            background-color: lemonchiffon;
        }
        /*光标移动之处改变背景颜色*/
        tbody tr:hover
        {
            background-color: lightpink;
        }
        /*此处只改变tbody中的，head和foot不变*/
    </style>
</head>
<body>
    <h1 align="center">188****1711客户的通话记录</h1>    
    <table width="100%" border="1" cellpadding="5" style="border-collapse: collapse;border-color: blueviolet;color: cadetblue;">
        <thead>
            <tr>
                <th>序号</th><!--th默认居中-->
                <th>主叫号码</th>
                <th>被叫号码</th>
                <th>时长</th>
                <th>实收（元）</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="center">1</td>
                <td>188****1711</td>
                <td>155****7611</td>
                <td>0:56</td>
                <td>0.2</td>
            </tr>
            <tr bgcolor="#ccc"> <!--斑马行-->
                <td align="center">2</td>
                <td>188****1711</td>
                <td>155****7611</td>
                <td>0:56</td>
                <td>0.2</td>
            </tr>
            <tr>
                <td align="center">3</td>
                <td>188****1711</td>
                <td>155****7611</td>
                <td>15:56</td>
                <td>1.2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="right">合计</td><!--colspan合并列-->
                <!--rowspan合并行-->
                <td align="center">58：03</td>
                <td>7：00</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

浏览器运行：在这里插入图片描述

三、form（表单）标签

用于提供用户界面，让用户输入操作用的

表单元素：

（label不是表单元素，form、input、select、option、textarea是表单元素）

  • label标题，用于表单上的文字和表单控件配合使用
    for属性：写的是某一个表单控件的id值，点击文本会激活焦点
    checked属性：选中状态
  • input标签，他能表达出多种控件，是通过type属性来确定的
  • type属性：规定这个表单元素代表啥样
    （text值）：文本框
    （password值）：密码框
    （radio值）：单选，单选的name值要一致，代表他们是一组
    （checkbox值）：多选
    （submit值）：提交表单
    （reset值）：把表单控件还原成页面刚打开的样子
    （number值）：数字
    （email值）：邮箱
    （url值）：地址
    （tel值）：电话，手机端弹出数字键盘
    value属性：文本框里的内容
    placeholder属性：文字提示，有值的时候就消失了，提示用户输入的内容
    name属性：控件的名字，他和id不一样，name是用于传命名用的
    disabled属性：不可用
    readonly属性：只读（和disabled的区别在于不可用不能往后台传值，readonly可以传值，但两者都不能编辑）
    required属性：必填项且控制格式，是浏览器自带简单验证功能，如果文本框不填写值，提交不了
    size属性：输入框的长度
    maxlength属性：最大输入长度（字符）
  • button标签：普通按钮，如果不写JavaScript事件没效果
  • max属性：限制输入的最大值
  • min属性：最小值
  • datetime-local标签：日历选择框
  • file标签：选择文件框
  • hidden标签：隐藏文本框，隐藏一些值用
  • select标签：下拉列表（combobox）size属性如果大于等于2变成列表盒子（listbox）
    multiple属性可以多选
  • ption标签：选项
    value属性：传的值，必须写值
    selected属性：被选中
  • textarea标签：
    cols属性：长度
    rows属性：高度
  • datalist标签：HTML5新标签
例——用户注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <!--表单标签包含表单元素（控件）-->
    <form action="xxxx.php"><!--链接-->
        <label for="name">注册用户名:</label><!--for里面写的是某一个表单的id名字，用于激活-->
        <input type="text" value="" placeholder="提示" name="name" id="name" maxlength="20"><button>搜索</button>
        <br><!--换行-->
        <label>性别</label><!--for可以不写-->
        <label><input type="radio" name="gender">男</label><!--用label标上后，点击文字就可勾选-->
        <label><input type="radio" name="gender">女</label>
        <br>
        <label for="pwd">密&nbsp;&nbsp;&nbsp;码</label><!--&nbsp是转义字符：空格-->
        <input type="password" name="pwd" id="pwd" placeholder="请输入8位以上数字和字母"><!--id必须有且不能重复-->
        <br>
        <label for="repwd">重复密码</label>
        <input type="password" name="repwd" id="repwd" placeholder="请输入8位以上数字和字母">
        <br>
        <label for="age">年龄</label>
        <input type="number" max="99" min="1" name="age" id="age" size="5">
        <br>
        <label for="homepage">个人主页</label>
        <input type="url" name="homepage" id="homepage" required>
        <br>
        <label for="birth">出生日期</label>
        <input type="datetime-local" name="birth" id="birth">
        <br>
        <label for="email">邮箱</label>
        <input type="email" name="email" id="email" required>
        <br>
        <label for="telephone">电话</label>
        <input type="tel" name="telephone" id="telephone">
        <br>
        <label>爱好</label><!--要写for才可以点击文字也完成勾选-->
        <label for="writing"><input type="checkbox" name="hobby" id="writing">书法</label>
        <label for="reading"><input type="checkbox" name="hobby" id="reading">阅读</label>
        <label for="flower"><input type="checkbox" name="hobby" id="flower">绣花</label>
        <label for="coding"><input type="checkbox" name="hobby" id="coding" checked>编码</label><!--checked默认勾选-->
        <hr><!--分割线-->
        <label for="">住址</label>
        <!--下拉列表（combobox）-->
        <select name="province" id="province" size="2"><!--size属性可把下拉列表变成另一种展现形式（listbox）-->
            <option value="0">山西</option>
            <option value="1">四川</option>
            <option value="2">广东</option>
        </select>
        <select name="city" id="city">
            <option value="01">晋中</option>
            <option value="12">成都</option>
            <option value="23">广州</option>
        </select>
        <select name="district" id="district">
            <option value="0101" selected>榆次</option><!--selected:被选中-->
            <option value="0102">太古</option>
            <option value="0103">介休</option>
        </select>
        <input type="text" name="address" id="address">
        <br>
        <label for="remark">备注</label>
        <textarea name="remark" id="remark" cols="30" rows="5"></textarea>
        <br>
        <input type="button" value="按钮">
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
        <!--推荐使用button标签做按钮，也是bootstrap框架推荐，注意button默认提交-->
        <button>注册</button>
    </form>
</body>
</html>

浏览器运行：
在这里插入图片描述

四、链接link

a（anchor）标签
[ 培训前老师给辅导班讲的，白抄来的笔记 ]

  • href属性：值是url，还可以写JavaScript函数调用（格式 javascript：函数名）
    例：< a href=”javascript:xxxclick()”>文字</a>
  • 相对路径：就是从你当前文件所在目录去找网页，上一级目录打…两个点是跳到上一级
  • 绝对路径：前面是以http，https，file带访问协议的开头
    http:// 普通链接
    https:// 加密链接
    file:/// 本地
    ftp:// 文件服务器，下载文件的协议
    mailto: 邮箱地址，会把你当前电脑的outlook，邮箱软件自动弹出来让你发邮件，手机端也会调用出手机的发邮件app
  • target属性：目标，意思是你这打开网页是从当前的窗口还是再弹出一个新的默认的值_self , _blank
  • 锚点：就是在网页里有区域，起名id，超链接可以跳到那个id上
    例：<a href=”#top”>回到顶部</a> （井号是id选择器的符号，必须有<div id=”top”></div>

五、框架集

把网页拆成多个页面
[ 培训前老师给辅导班讲的，白抄来的笔记 ]

1、 frameset标签

cols属性：拆分成多列，例如cols=“20%，20%，*” 星号代表剩下的区域都给第三个区域
rows属性：拆分行

2、 frame标签

name属性：名字，用于超链接的target指定跳转到的名字

3、 iframe标签：（有个缺点容易缓存）

inner frame属性：用这个标签可以把网页嵌入到任何位置
src属性：包含的网页的地址
frameborder属性：边框
width属性：宽
height属性：高
——————————————————————————————————————

【听课最大的感受是没有框架，每个知识点穿插的比较杂，刚开始以为是老师讲课的习惯，学习之后才明白可能是html的特点，就是很多知识要边用边讲，没有特别清晰的大纲】
【新手笔记 欢迎指正】（标签和属性那里好像有一点乱套了）

本文地址：https://blog.csdn.net/RK_Dangerous/article/details/107291484

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网