2020培训0706-0708【web入门】笔记「二」
- :无序列表(unorder list)ul的type属性有:disc(默认)| circle | square浏览器运行:(2)
- :有序列表(order list)type属性有:1 | i | I | A | a (type属性不能填汉字,无法识别)浏览器运行:(3)正文注意:页面缩放时,
标签网页宽度有多大,不够就自己换行,而文本aaaa……aaaa不换行的原因是将...
一、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">密 码</label><!-- 是转义字符:空格-->
<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
上一篇: C语言中的递归,你真的懂了吗?
推荐阅读
-
C#Web应用程序入门经典学习笔记之二
-
2020培训0704-0705【python入门】笔记
-
2020培训0706-0708【web入门】笔记「三」CSS专题整理
-
【技术君啃书之旅】web安全之机器学习入门 第二章笔记
-
2020培训0706-0708【web入门】笔记「一」
-
2020培训0706-0708【web入门】笔记「二」
-
北邮机器人队2020预备队培训(二) —— python入门
-
SpringBoot入门学习笔记(二、日志与Web开发)
-
Bootstrap入门笔记之(二)表单_html/css_WEB-ITnose
-
Web学习笔记之html基础操作_常用标签(二)_2020_03_24