1.HTML

HTML简介

hyper text markup language  即超文本标记语言。

超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

标准模板

<!DOCTYPE html>    
<html lang="en">
<head>                  
<meta charset="UTF-8">      
<title>Title</title>       
</head>
<body>
<p>主体内容</p>         
</body>
</html>

Head 标签

1.<meta/> 

定义关于HTML文档的元数据。 重要的属性有三个:http-equiv、name、content

(1)http-equiv  把content属性值关联到http头部。

  • Content-Type(浏览器接受的文档类型,一般是text/html)
  • refresh(网页刷新,以秒为单位)
  • expires(设定网页到期时间,一旦过期,必须到服务器上重传)
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
<meta http-equiv="Refresh" content="2">    #过两秒自动刷新
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">     #过两秒自动跳转到对应的网站
<meta http-equiv="expires" content="6 Jun 2016"/>

(2)name  把content属性关联到一个名称。

  • keywords(搜索关键字,用于搜索引擎抓取信息的显示)
  • description(搜索到网站后显示的网页内容简描述)
  • author(站点制作者信息)
  •  generator(用以说明生成工具)
<meta name="keywords" content="搜索关键字">
<meta name="description" content="简要描述">
<meta name="author" content="http://cnblogs.com/suoning">
<meta name="generator" content="用以说明生成工具">

(3)content  定义与http-equiv或name属性相关的元信息,是必要的属性

2.<link/> 

引用外部文档,常见于引用外部样式。重要属性有三个:rel、href、type。

<link rel="stylesheet" href="...">

Body标签

1.块级标签和内联标签

block(块)元素的特点

① 总是在新行上开始;
② 高度,行高以及外边距和内边距都可控制;
③ 宽度缺省是它的容器的100%,除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素

inline(内联)元素的特点
① 和其他元素都在一行上;
② 高,行高及外边距和内边距不可改变;
③ 宽度就是它的文字或图片的宽度,不可改变
④ 内联元素只能容纳文本或者其他内联元素

2.基本标签

<h1>标题1</h1>
<h6>标题6</h6>
<p>段落</p>
<br />            换行
<hr>              水平线
<u></u>           文字下方加下划线
<div></div>       块级标签
<span></span> 行内标签
&nbsp; &nbsp; 空格 &gt; > &lt; <

3.<a> 超链接标签(锚标签)

重要属性有三个:href、target、name

href 超链接地址:可以是Web上任意资源,包括图片,网页,样式,脚本文件等。href="#"时,表示被链接页面就是当前页面。

target 文档打开时要显示的目标位置,属性值一般有:_blank(新窗口中打开)、_self(默认,在超链接所在的容器中打开)、_parent(在超链接的父容器中打开)、_top(整个容器中打开)、name(框架名称)。

name  锚记名称。作用:跳转到文档的某个地方。返回首页。

(1)超链接    

<a href="http://www.baidu.com" target="_blank">百度一下你就知道</a>

(2)锚点

<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1" style="height: 600px;">第一章的内容</div>
<div id="i2" style="height: 600px;">第二章的内容</div>
<div id="i3" style="height: 600px;">第三章的内容</div>

4.<form>表单标签

(1)表单属性

HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中

action表单要提交的地址,用于处理表单的内容(一般是提交字典到后台的一个接口,这个接口是java写成的,提交到这个接口后后台就知道如何处理这些数据了)。

method提交的方法,默认是get方式提交。

      get提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

      post提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

(2)表单元素input

text  文本框输入(默认text文本框类型)。

  autocomplete(自动完成输入的内容,要求表单元素要有name属性才有自动完成的效果,off表示自动完成不可用,on表示自动完成可用)

  disabled(设置或者获取控件的状态,默认是false即可用,等于true时不可用,不能输入内容)

password  密码框。(以下属性text和password共有)

  size(指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位,对于其他元素,宽度以像素为单位)

  maxlength(type为text或password时,表示输入的最大字符数),有利于防止sql的注入攻击

   readonly 只读. 

  placeholder 框内预置内容(灰色),写上内容时才消失 

radio 单选按钮。属性:

  name(将name的值设置为相同值,才表示一组数据,才能实现单选功能)

  value(必须要写,提交到服务器的key值,实际开发过程中value一般是编号)

   checked(是否被选中的状态)

checkbox 复选框。

  name(名字一定要一样一样的,才表示是一组数据,添加到同一value值列表提交到服务器)

  value(必须要写,提交到服务器的key值,实际开发过程中value一般是编号)

  checked(是否被选中的状态)

file文件域,上传文件(不同的浏览器表现形式不同)

submit 提交按钮。用于提交表单。

reset 重置按钮。清空表单的输入,恢复到表单默认的状态。

button  普通按钮。一般结合javascript使用。

<textarea> 文本域标签。默认表现形式是可以输入很多行文本的文本框。

  name (表单提交项的key)

  cols(设置文本域宽度)

  rows(设置文本域高度,即行数)

<select> 下拉框标签。使用时要结合<option>子标签一起使用。

  name:表单提交项的key

  size:选项个数

  multiple:多选

  <option> 下拉选中的每一项

  value(表单提交项的值)

  selected(selected下拉选默认被选中)

(3) radio和checkbox

<body>
<form action="ip" method="get">
<div>
<!--单选-->
<p>请选择性别</p>
男:<input type="radio" name="gender" value="M">
女:<input type="radio" name="gender" value="F" checked="checked">
<!--/多选-->
<p>爱好</p>
篮球:<input type="checkbox" name="favor" value="1">
足球:<input type="checkbox" name="favor" value="2">
台球:<input type="checkbox" name="favor" value="3" checked="checked">
</div>
<input type="submit" value="提交">
<input type="reset" value="重置">
</from>
</body>

(4)textarea多行文本

<textarea name="memo" id="" cols="30" rows="10">请写上你的评价</textarea>

(5)select下拉框

<select name="city" size="2" multiple="multiple">
<option value="1">纽约</option>
<option value="2">深圳</option>
<option value="3" selected="selected">北京</option>
</select>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="ip" method="get">
<div>
<!--单选-->
<p>请选择性别</p>
男:<input type="radio" name="gender" value="M">
女:<input type="radio" name="gender" value="F" checked="checked">
<!--/多选-->
<p>爱好</p>
篮球:<input type="checkbox" name="favor" value="1">
足球:<input type="checkbox" name="favor" value="2">
台球:<input type="checkbox" name="favor" value="3" checked="checked"> <br /><br />
<!--下拉标签-->
<!--size一次显示的个数,multiple可以多选-->
<select name="city" size="2" multiple="multiple">
<option value="1">纽约</option>
<option value="2">深圳</option>
<option value="3" selected="selected">北京</option>
</select>
<p><textarea name="memo" id="" cols="30" rows="10">请写上你的评价.....</textarea></p>
</div>
<input type="submit" value="提交">
<input type="reset" value="重置">
</from>
</body>
</html>
全部代码

5.img 图片

<!-- a标签作用:点击图片链接到对应地址-->
<!-- title鼠标移动到图片上面显示的内容-->
<!--alt图片加载不出来的时候的提示信息-->

<a href="http://www.baidu.com"> <img src="fanye.jpg" title="范冰冰" alt="美女"> </a>

6.ul、ol、dl 列表

无序,有序,标题列表

  <ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<dl>
<dt>1</dt>
<dd>2</dd>
<dd>3</dd>        
</dl>

7.table表格

caption: 表格标题

<thead>  表格头部,使结构更加分明

<tbody>  表格主体部分,使结构更加分明

<tr>  表格的数据行

<th>  表格的表头名称,与<td>不同在于文字采用加粗居中的形式显示

<td>  单元格,用来显示表格内容

(1)简单表格

<body>
<table border="1">
<caption>小学一班</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小明</td>
<td>6</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>小红</td>
<td>8</td>
<td></td>
</tr>
</tbody>
</table>
</body>

(2)合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<td>表头1</td>
<td>表头2</td>
<td>表头3</td>
<td>表头4</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">1</td>
<!--<td>2</td>-->
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
<td>4</td>
</tr>
<tr>
<!--<td>1</td>-->
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
合并单元格.html
View Code

 8.label 标签

把标签与文本关联起来(获取光标)

<label for="username">用户名</label>
<input id="username" type="text" name="user" />

点“用户名”也可以开始输入信息

 9.<fieldset> 

对表单中的相关元素进行分割

<fieldset>
<legend>温馨提示</legend>
<div align="middle">不要忘记点赞哦 ==</div>
</fieldset>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369538.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php记住表单数据cookie,【PHP基础】cookies和session

1.Cookiescookie 常用于识别用户。cookie 是服务器留在用户计算机中的小文件。每当相同的计算机通过浏览器请求页面时&#xff0c;它同时会发送 cookie。通过 PHP&#xff0c;您能够创建并取回 cookie 的值。1.1、如何创建 cookie&#xff1f;setcookie() 函数用于设置 cookie。…

C#调用Power Shell 管理Office365 执行脚本时遇到的问题

Power Shell管理Office参考http://www.mamicode.com/info-detail-494553.html C#调用Power Shell 参考 https://www.cnblogs.com/chenkai/archive/2010/11/09/1872471.html string pwd "**********";string userName "**********";StringBuilder ss new…

javaweb(三十七)——获得MySQL数据库自动生成的主键

测试脚本如下&#xff1a; 1 create table test1 2 ( 3 id int primary key auto_increment, 4 name varchar(20) 5 ); 测试代码&#xff1a; 1 package me.gacl.demo;2 3 import java.sql.Connection; 4 import java.sql.PreparedStatement; 5 import java.sql.ResultSet; …

基于Matlab的模拟通信实验平台设计,【通信原理仿真实验】通信原理虚拟实验仿真平台的设计和实现_玛雅作文网...

作文「通信原理虚拟实验仿真平台的设计和实现」共有 4564 个字&#xff0c;其中有 2704 个汉字&#xff0c;1316 个英文&#xff0c;162 个数字&#xff0c;382 个标点符号。作者佚名&#xff0c;请您欣赏。玛雅作文网荟萃众多优秀学生作文&#xff0c;如果想要浏览更多相关作文…

2018/3/1 省选模拟考试 50分

T1 30分模拟暴力&#xff0c;40分树的直径。拿了0分。&#xff08;空间开小了爆了&#xff0c;因为缩点之后是又建了一次图&#xff0c;两个边的编号tot没分开&#xff0c;mdzz&#xff09; 只写了后40分&#xff0c;而这40分中有20分不需要边双连通分量。写了一个类似于强连通…

骆驼和春天的Drools决策表

正如我在之前的文章中所展示的那样&#xff0c; JBoss Drools是一个非常有用的规则引擎 。 唯一的问题是&#xff0c;对于非技术人员而言&#xff0c;以Rule语言创建规则可能会非常复杂。 这就是为什么可以提供一种轻松的方式来创建业务规则的方法-在电子表格中创建决策表&…

酷炫,用Html5/CSS实现文字阴影

前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现。她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过于局限化,好了,闲话也不多说,咱们就先来看看这个文本阴影. 一.文字阴影text-shadow 文…

从xtrabackup备份恢复单表【转】

目前对MySQL比较流行的备份方式有两种&#xff0c;一种上是使用自带的mysqldump&#xff0c;另一种是xtrabackup&#xff0c;对于数据时大的环境&#xff0c;普遍使用了xtrabackupbinlog进行全量或者增量备份&#xff0c;那么如何快速的从xtrabackup备份中恢复单张表呢&#xf…

CSS中的overflow属性

overflow属性 如果元素中的内容超出了给定的宽度和高度属性&#xff0c;overflow 属性可以确定是否显示滚动条&#xff0c;是否隐藏溢出部分等行为&#xff0c;规定当内容溢出元素框时发生的事情。 可能的值有&#xff1a; visible&#xff1a;默认值。内容不会被修剪&#xff…

【知识梳理1】Android触摸事件机制

前言 随着科学技术的发展&#xff0c;智能手机早已成为我们当代人身边不可缺少的“伙伴”之中的一个&#xff0c;堪比对象女友。每天我们对着手机反复的做着点击、滑动操作&#xff0c;而手机则随着我们的操作给我们展示她的精彩。… 废话到此结束。 看到这里&#xff0c;即使…

自己做的一个登录页面,纯代码!

先上效果图吧. 本人菜鸟入门, 请勿喷. 首先样式: 1 1 body{2 2 margin: 0;3 3 padding: 0;4 4 width: 100%;5 5 height: 100%;6 6 }7 7 8 8 .headers{9 9 width: 100%;10 10 height: 100px;11 11 }12 12 .siv-ng{13 13 width:…

ASP.NET调用cmd命令提示符拒绝访问解决方案

using System.Diagnostics; public class CmdHelper{private static string CmdPath "C:\Windows\System32\cmd.exe";/// <summary>/// 执行cmd命令/// 多命令请使用批处理命令连接符&#xff1a;/// <![CDATA[/// &:同时执行两个命令/// |:将上一个命…

Some reading, some thinking.

update&#xff1a;感谢助教0 0又学会一招&#xff0c;play 了一下CSS Part 1 Reading AuthorArticleNoteMadcola《两年波折路&#xff08;考研、工作、考研&#xff09;》"吾志所向&#xff0c;一往无前&#xff1b;愈挫愈奋&#xff0c;再接再励。"辜新星《时刻调…

CSS选择器:伪类(图文详解)

本文最初发表于博客园&#xff0c;并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我&#xff0c;一起入门和进阶前端。 以下是正文。 伪类&#xff08;伪类选择器&#xff09; 伪类&#xff1a;同一个标签&#xff0c;根据其不同的种状态&#xff0c;有不同的样式。…

DIV固定宽度和动态拉伸混合水平排列

1.效果图 2.源代码 html <h2>1.头部固定&#xff0c;尾部拉伸</h2> <div class"container" id"div1"><div class"head"></div><div class"tail"></div> </div><h2>2.尾部固定…

使用CSS设置JavaFX饼图样式

渲染图表时&#xff0c; JavaFX默认提供某些颜色。 但是&#xff0c;在某些情况下&#xff0c;您想自定义这些颜色。 在此博客文章中&#xff0c;我将使用一个示例来更改JavaFX饼图的颜色&#xff0c;该示例打算在今天下午在RMOUG Training Days 2013的演示中包括。一些基于Jav…

java 错误: 找不到或无法加载主类

这个问题应该很常见的&#xff0c;笔者经常手工编译一些测试代码或者小工具&#xff0c;经常用到 javac和java来编译并运行一些简单的小工具。 以Hello World来测试。 HelloWorld.java public class HelloWorld{public static void main(String[]args){System.out.println(&quo…

在Visual Studio Code中配置GO开发环境

一、GO语言安装 详情查看&#xff1a;GO语言下载、安装、配置 二、GoLang插件介绍 对于Visual Studio Code开发工具&#xff0c;有一款优秀的GoLang插件&#xff0c;它的主页为&#xff1a;https://github.com/microsoft/vscode-go 这款插件的特性包括&#xff1a; Colorizatio…

最受欢迎的应用服务器

这是本系列的第二篇文章&#xff0c;我们将发布有关Java安装的统计数据。 使用的数据集来自免费的Plumbr安装&#xff0c;在过去六个月中&#xff0c;我们总共收集了1,024个不同的环境。 本系列的第一篇文章分析了基础-运行JVM的操作系统&#xff0c;是32位还是62位基础架构以…

SON_EXAM考试php,通用全国少儿英语等级考试:三星笔试真题

单项选择&#xff1a;36. exciting the game was! I enjoyed every minute of it.A.What B. How C.What an B.How an37.You stay here if youve finished your work.A.neednt B.mustnt C. shouldnt D.cant38 Nanjing Road in Shanghai is always crowded peole.A.with B.by c.o…