欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 16:31:46
一、tag_text#body1. 标题2.目录(1)
    :无序列表(unorder list)ul的type属性有:disc(默认)| circle | square浏览器运行:(2)
      :有序列表(order list)type属性有:1 | i | I | A | a (type属性不能填汉字,无法识别)浏览器运行:(3)正文注意:页面缩放时,

      标签网页宽度有多大,不够就自己换行,而文本aaaa……aaaa不换行的原因是将...

一、tag_text

#body

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

2.目录

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

ul的type属性有:disc(默认)| circle | square
2020培训0706-0708【web入门】笔记「二」
浏览器运行:
2020培训0706-0708【web入门】笔记「二」

(2)<ol>:有序列表(order list)

type属性有:1 | i | I | A | a (type属性不能填汉字,无法识别)
2020培训0706-0708【web入门】笔记「二」
浏览器运行:
2020培训0706-0708【web入门】笔记「二」

(3)正文

注意:页面缩放时,<p>标签网页宽度有多大,不够就自己换行,而文本aaaa……aaaa不换行的原因是将aaaa……看作一个英文单词
2020培训0706-0708【web入门】笔记「二」
浏览器运行:
2020培训0706-0708【web入门】笔记「二」

代码:

<!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>处用 /* 注释 */
2020培训0706-0708【web入门】笔记「二」

#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
    2020培训0706-0708【web入门】笔记「二」
    浏览器运行:
    2020培训0706-0708【web入门】笔记「二」

举例——客户通话记录

<!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>

浏览器运行:2020培训0706-0708【web入门】笔记「二」

三、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>

浏览器运行:
2020培训0706-0708【web入门】笔记「二」

四、链接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