day02 html
一.body中的标签
a标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--a标签: 默认在自己的页面打开这个超链接target="_self"; 在新的标签页打开target="_blank"(空白)-->
<a href="../day36/06.html", target="_blank">目录内标签</a>
</body>
</html>
a标签: 在当前的页面中导航 (加锚点)
也可以阻止a标签默认点击行为
还可打电话
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<div id="bbs">bajie</div>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<p>八戒</p>
<!--hash值 锚点 默认有点击行为-->
<!--file:///C:/Users/THINKPAD/PycharmProjects/s15/day37/01.html#bbs: 在url后面加锚点; 如果只有单独的#号, 就是跳转到顶部-->
<a href="#bbs">找bajie3</a>
<!--阻止a标签的默认的点击行为-->
<a href="javascript:void(0);">找bajie1</a>
<!--弹出框-->
<a href="javascript:alert('弹个框');">找bajie2</a>
<!--打电话-->
<a href="tell:13683366336">打电话</a>
</body>
</html>
img和a的共同使用: 加小手
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a{
display: block;
/*width: 300px; #在转成块的a标签里写宽高不起作用*/
/*height: 300px;*/
}
</style>
</head>
<body>
<div class="box">
<!--单独img,鼠标到图片上没有小手, 外面用a标签包住, 就有了小手-->
<!--当用a包裹img时, img图片下面会有一行a标签的空行, 就会影响到排版: 用行内转换解决-->
<a href="javascript:void(0);">
<img src="file:///C:\Users\THINKPAD\Desktop\bajie.jpg" alt="图片" width="300" height="300">
</a>
</div>
<div>bajieaishuishui</div>
</body>
</html>
ul: unordered list: 无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--ul: unordered list: 无序列表: ul下的子元素只能是li(print 的每一项可以用li来存放)-->
<ul>
<!--每个li的前面都有一个内边; 还有一个点(默认是实心点); 未来要干掉他们-->
<li>bajie</li>
<li>datang</li>
<li>wukong</li>
<li>bajie</li>
<li>分类
<ul>
<li>bajie</li>
<li>datang</li>
<li>wukong</li>
<li>分类
<ul>
<li>bajie</li>
<li>datang</li>
<li>wukong</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul type="square">
<li>实心方框</li>
</ul>
<ul type="circle">
<li>空心圆框</li>
</ul>
</body>
</html>
ol: ordered list: 有序列表
<!--ol: ordered list: 有序列表:ul下的子元素也只能是li: 前面出现的不是小圆点了, 而是1.2.3.4.5.这些-->
<ol>
<li>bajie</li>
<li>悟空</li>
<li>大唐</li>
<li>bajie</li>
</ol>
<!--ol: type默认是数字, a是字母, i,I是罗马数字; start是从第几个开始的数字或字母-->
<ol type="a" start="4">
<li>bajie</li>
<li>悟空</li>
<li>大唐</li>
<li>bajie</li>
</ol>
dl: definition list: 定义列表
<!--dl: definition list: 定义列表 : 子元素是dt和dd; 没有属性, 一般用在页面的尾部-->
<dl>
<dt>定义标题</dt>
<dd>定义描述</dd>
<dd>定义描述</dd>
<dd>定义描述</dd>
<dt>定义标题</dt>
<dd>定义描述</dd>
<dd>定义描述</dd>
<dd>定义描述</dd>
</dl>
table:表格
<!DOCTYPE html>
<!--#打开页面时,弹出"翻译此页?"-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--table:表格: border边界,collapse塌陷: 展示型的标签, tr表格行, td表格项 -->
<table border="1" style="border-collapse: collapse;" width="100%">
<caption>人物介绍</caption>
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<!--单元格的合并: 纵向合并-->
<td rowspan="3">work</td>
</tr>
<tr>
<td>1</td>
<td>bajie</td>
<td>300</td>
</tr>
<!--单元格的合并:横向合并, 先删掉某个, 然后加属性colspan-->
<tr>
<td>2</td>
<td colspan="2">wukong</td>
<!--<td>500</td>-->
</tr>
</table>
</body>
</html>
form 表单标签:
作用: 与服务器进行交互
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form: 表单: 作用: 与服务器进行交互, http协议: 请求的方式: get post.
action提交哪个网址,
method默认是get,-->
<!--页面中的img, a, link标签默认都是get请求-->
<!--action里不写, 默认在本url上提交: file:///C:/Users/THINKPAD/PycharmProjects/s15/day37/05.html?username=bajie&password=123: 这个是get提交的url格式
name=""属性会被封装成key
value=""属性会被封装成value
多个keyvalue用&符号分隔
注意: password=123 暴露了, 所以注册不用get请求-->
<form action="" method="get" enctype="multipart/form-data">
<!--input 表单控件:
type:
text:文本输入框,
password 密码输入框,
file: 上传文件的,
submit提交按钮提交的是action中的url,
button普通按钮
radio:单选
checkbox: 多选
reset: 重置按钮
number:只能输入数字
name: 提交到服务器端的key.
value: 显示的文本内容, 与服务器端的value对应-->
<!--label 标签: for: 是与下面的某个表单控件的id属性进行关联-->
<!--select : 下拉菜单, 元素是 option-->
<!--textarea: 文本框-->
<p>
<label for="username">用户名:</label>
<input type="text" name="username" id="username" placeholder="请输入用户名">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password">
</p>
<p>
<input type="submit" value="注册">
<input type="button" value="普通按钮">
<input type="reset" value="重置">
<button type="button">普通按钮</button> #这两button一样
<input type="number" name="number" value="只能输入数字">
</p>
<p>
<!--提交文件的时候, 要告知编码方式, Enctype, 文件提交要用post, 因为地址栏长度有限制, 最多好像是2k-->
<input type="file" name="mp3">
</p>
<p>
<!--radio:单选: 当给相同的name时, 就有了互斥的属性; checked 给出默认选项-->
男:<input type="radio" name="sex" value="man" checked>
女:<input type="radio" name="sex" value="woman">
</p>
<p>
<!--checkbox: 多选:-->
爱好:
<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</p>
<p>
<select name="persion">
<!--selected 设置默认选项-->
<option value="1">大唐</option>
<option value="2" selected>八戒</option>
<option value="3">悟空</option>
<option value="4">小李</option>
</select>
</p>
<p>
<h3>我的描述</h3>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
</form>
</body>
</html>
内容总结:
1.标签嵌套
行内标签, 块标签
行内标签不能嵌套块标签, 但不是绝对的
块标签可以嵌套块标签/行内标签
但是p标签:只可以嵌套字体,图片,表单,而且不能嵌套
2.table
tr
td
3.form: action methods(get|post) enctype
input
type
text
password
submit: 与action相关
file: 与enctype相关,mothods一定是post请求
radio
checkbox
name
value
select
option
textarea
rows
clos
lable
for: 对应input里的id
4.python:
input()
print()
- Html中<font>标签的使用
Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...
- jsp2.0+中的标签文件,JSP Fragment技术
刚进新公司不久,今天在看到项目中用到了.tag文件.刚开始我还以为这个是第三方类似freemarker的模板技术.问了下项目组的其他人员,原来这是jsp2.0以来就有的JSP Fragment技术.以 ...
- Html中<a>标签的样式的设置
html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...
- 禁止手机页面中A标签长按弹出路径框
//禁止手机页面中A标签长按弹出路径框 window.onload=function(){ document.documentElement.style.webkitTouchCa ...
- JSP中<img>标签引用本地图片
问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...
- HTML中<meta>标签如何正确使用
HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...
- Jquery获取iframe子/父窗口中的标签
获取子窗口中的标签: $("#id",document.frames('iframename').document); 获取父窗口中的标签: $('#id', parent.doc ...
- 在php中，如何将一个页面中的标签，替换为用户想输出的内容
前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例 ...
- JSP内置标签 JSP中JavaBean标签 JSP开发模式 EL和JSTL快速入门
2 JSP内置标签(美化+业务逻辑) 1)为了取代<%%>脚本形式,使用JSP标签/JSP动作,目的:与JSP页面的美化,即JSP面页都是由标签组成,不再有其它的内容 2)JSP内 ...
随机推荐
- BZOJ3207 花神的嘲讽计划I
Time Limit: 10 Sec Memory Limit: 128 MB Summary 给你一个模式串P,q个询问,对每个询问回答从Pl到Pr是否存在与给定串相同的子串,同时有所有的给定串长度 ...
- Maven POM中的各种scope的行为总结
compile:默认的scope.任何定义在compile scope下的依赖将会在所有的class paths下可用.maven工程会将其打包到最终的artifact中.如果你构建一个WAR类型的a ...
- 线程池(ThreadPool)创建
线程池创建方式jdk1.5 Java通过Executors(jdk1.5并发包)提供四种线程池,分别为: newCachedThreadPool创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活 ...
- wxpython总体
人到夏天就特别懒 from math import * import wx def sin_fun(event): a=text_angle.GetValue() b=sin(radians(floa ...
- boost system
boost::system::error_code is the most basic class in Boost.System; it represents operating system-sp ...
- 英语单词collaboration
collaboration 来源——github网站 https://guides.github.com/activities/hello-world/ GitHub is the best way ...
- .NET Core 通过 Ef Core 操作 Mysql
1.运行环境 开发工具:Visual Studio 2017 JDK版本:.NET Core 2.0 项目管理工具:nuget 2.GITHUB地址 https://github.com/nbfujx ...
- 2017 ACM-ICPC乌鲁木齐网络赛 B. Out-out-control cars(计算几何 直线相交)
题目描述 Two out-of-control cars crashed within about a half-hour Wednesday afternoon on Deer Park Avenu ...
- linux0.11内核源码——进程各状态切换的跟踪
准备工作 1.进程的状态有五种:新建(N),就绪或等待(J),睡眠或阻塞(W),运行(R),退出(E),其实还有个僵尸进程,这里先忽略 2.编写一个样本程序process.c,里面实现了一个函数 /* ...
- SpringBoot 快速构建微服务体系 知识点总结
可以通过http://start.spring.io/构建一个SpringBoot的脚手架项目 一.微服务 1.SpringBoot是一个可使用Java构建微服务的微框架. 2.微服务就是要倡导大家尽 ...
