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

程序员文章站 2022-07-06 16:31:46

一、tag_text#body1. 标题2.目录(1)

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

一、tag_text

#body

1. 标题

2.目录

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

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

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

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

（3）正文

注意：页面缩放时，<p>标签网页宽度有多大，不够就自己换行，而文本aaaa……aaaa不换行的原因是将aaaa……看作一个英文单词
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

浏览器运行：

举例——客户通话记录

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

上一篇：苹果手机如何开启icloud照片 iphone设置照片备份方法

下一篇： SpringBoot整合dubbo和zookeeper

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

一、tag_text

#body

1. 标题

2.目录

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

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

（3）正文

代码：

二、table（表格）标签

#head

#body

1、table标签，表格的最外层

2、tr标签，代表行

3、td、th标签，代表列，也是单元格

举例——客户通话记录

三、form（表单）标签

表单元素：

例——用户注册

四、链接link

五、框架集

1、 frameset标签

2、 frame标签

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

C＃Web应用程序入门经典学习笔记之二

2020培训0704-0705【python入门】笔记

2020培训0706-0708【web入门】笔记「三」CSS专题整理

【技术君啃书之旅】web安全之机器学习入门第二章笔记

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