文档章节

html巩固(1)

HuangJC
 HuangJC
发布于 2017/09/05 10:19
字数 3097
阅读 16
收藏 0
点赞 0
评论 0

<!DOCTYPE html>是文档声明,为浏览器更好显示内容,html就是html 5。

 

1.能显示中文:在head中添加

<meta charset="utf-8">

 

1.html标签

html文档: <html>...</html>

主体内容: <body>...</body>

段落: <p>...</p>

html链接: <a href="www.baidu.com">链接到百度</a>

html图片: <img src="img.jpg" width=“102” height="104" alt=“tupian”/>alt用于图片显示不出来显示的文字

注释: <!--   注释内容     --> 第二种方式是/*注释内容*/

预留格式(保留空格符和换行符): <pre>...</pre>

长引用: <blockquote cite="填网站地址">引用的内容</blockquote>

缩进标记(搜索优化方面): <addr title="huangjc">HJC</addr> 搜索HJC也能搜索到huangjc

纵观调控html属性(预先加载项): <head>...</head>

反向重写(在body内): <bdo dir=“rtl”>内容</bdo>

1.1文本标签

加粗: < b> <strong>    斜体: <i> <em>   下标字: <sub>   上标字: <sup>   删除字: <del>   大号字: <big>   小号字: <small>

2.html属性

2.1  style

用在标签<body><p><h1>等<>里面

        背景颜色:background-color  可=yellow,blue等

        字体颜色:color

        字体类型:font-family

        字体大小:font-size

        字体对其方式:text-align  可=center居中

2.2  target:

用在链接<a>里面

        新页面打开: _blank

        不知道是啥: _top

3.样式表

<!--外部样式表-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<!--内部样式表-->
<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
<!--内联样式-->
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

4.html链接

html链接: <a href="www.baidu.com">链接到百度</a>

移动到当页某位置:

        导航栏: <a href="(如果是其他页面这里填链接)#随便名字">会显示的名字</a>

       在多页面同窗下指定一个框内打开某页面:<a href="(如果是其他页面这里填链接) target=“那个特定框的name名" >会显示的名字</a>

        被导航处: <h1><a name=“对应的随便名字”>...</a></h1>

发送邮件:

<!--包含发送人,操送人,密件操送,主题,内容,%20代表空格-->
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件!</a>

5.html图像

html图片: <img src="img.jpg" width=“102” height="104" alt=“tupian”/>alt用于图片显示不出来显示的文字

图片链接: <a href=""><img src=“” /></a>

背景图像: <body background="/i/img.jpg">

文本对其图像: <img src="/i/img.jpg" align="bottom">  还有middle,top,left,right

图中图:http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

        图中图的坐标确定:http://www.w3school.com.cn/tiy/t.asp?f=html_ismap

6.表格table

 

 

margin外边界

padding内边界

<html>
<body>
<!-- 格式-->
<table border=“1”>
<caption>标题</caption>

<tr>
	<th>表头</th>   <!--字体会被加粗,可不写-->  
	<th colspan="2">作者</th>  <!--colspan跨两列-->
</tr>

<tr>
	<td rowspan="2">第一行第一列</td>  <!--rowpan跨两行-->
	<td>第一行第二列</td>
	<td>第一行第三列</td>
</tr>

<tr>
	<td>第二行第二列</td>
	<td>&nbsp;</td>
</tr>

<tr>
	<td>
		<table border="2">  <!--表中表-->
		<tr>
			<td>表中表第一行第一列</td>
			<td>表中表第一行第二列</td>
		</tr>
		<tr>
			<td>表中表第二行第一列</td>
			<td>表中表第二行第二列</td>
		</tr>
		</table>
	</td>
	<td>
		<ul>  <!-- 这是无序列表,可通过type属性修改符号,有square,circle。有序列表是<ol>-->
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ul>
	</td>>
</tr>

</table>
</body>
</html>

结果:

特殊调整:

<table cellpading="10" >:增加文本距离单元格框10px,包括上下左右

<table cellspacing="5" >:增加单元格与单元格之间5px,包括上下左右

table,tr,td还支持 style样式修改背景属性,如添加颜色,插入背景图片。

tr,td还支持对齐align属性。

table包含frame属性,用以控制边框样式。有box,above,below,hsides,vsides

7.块div和span

<!DOCTYPE html>
<html>
<head>
	<style>
		.abc {
			background-color: black;
			color:white;
			margin: 20px;
			padding: 20px;
		}
		span.red{
			color:red;
		}
	</style>
</head>
<body>
	<div class="abc">
		<h1>我是谁</h1>
		<p>我是你<span class="red">大爷</span>啊,我!</p>
	</div>
</body>
</html>

结果:

8.布局

<!-- 本方法是使用html5布局,用div请看注释 -->
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		header{			/*如果是div,这需要改成#header*/    
			background: black;
			color: white;
			text-align:center;
			padding: 5px;
		}
		nav{
			line-height: 30px;  
			background-color: #eeeeee;
			height: 300px;
			width: 100px;
			float: left;
			padding: 5px;
		}
		section{
			width: 350px;
			float: left;
			padding: 10px;
		}
		footer{
			background-color: black;
			color: white;
			clear: both;
			text-align: center;
			padding: 5px;
		}
	</style>
</head>
<body>
<header>	<!-- 如果是div,这里要改成<div id="header"> -->
	<h1>这是标题</h1>
</header>
<nav>
	
	导航1<br>
	导航2<br>
	导航3<br>
</nav>
<section>
	<p>这是内容</p>
</section>
<footer>
	<p>Copyright 黄继聪</p>
</footer>
</body>
</html>

还有表格布局,这里没练习

9.响应式设计

使用div的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">	<!-- 让代码中的中文能在浏览器中显示 -->
		<style type="text/css">
			#city{
				float: left;  /*这个是响应式的关键,浮动开启*/
				margin: 5px;
				padding: 10px;
				width: 300px;
				height: 300px;
				border: 1px solid red;/*没有solid的话在浏览器是看不到边界的*/
			}
		</style>
	</head>
	<body>
		<h1>响应式网站设计</h1>
		<p>仅仅是练习而已</p>
		<div class="city">
			<h1>浮动框第一部分</h1>
			<p>aaabbbcc第一</p>
		</div>
		<div class="city">
			<h1>浮动框第二部分</h1>
			<p>aaabbbcc第二</p>
		</div>
		<div class="city">
			<h1>浮动框第三部分</h1>
			<p>aaabbbcc第三</p>
		</div>
	</body>
</html>

w3c推荐使用Bootstrap创建响应式⭐

<!DOCTYPE html>
<html>
<head>
<!-- 显示中文语句 -->
<meta charset="utf-8">
<!-- 控制窗口语句 -->
<meta name="viewport" content="width=device-width,initial-scale=1">  
<!-- 获取相关样式语句,就是那些class指向的对象 -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
	<div class="jumbotron">
		<h1>两个div估计是为了用两个样式</h1>
		<p>没什么好说的</p>
	</div>
</div>
<div class="container">
	<div class="row">
		<div class="col-md-4">
			<h2>小标题1</h2>
			<p>段落1</p>
		</div>
		<div class="col-md-4">
			<h2>小标题2</h2>
			<p>段落2</p>
		</div>
		<div class="col-md-4">
			<h2>小标题3</h2>
			<p>段落3</p>
		</div>
	</div>
</div>
</body>
</html>

10.框架frame(注意:frameset是在body之外

<!-- 这是设置本页面的框架的 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>

<!-- 先用frameset划分区域,再用frame连接html文件显示内容 -->
<frameset  rows="20%,50%,20%">  <!--20%可以直接改成像素-->
<!-- 在frame中添加了noresize="noresize"后边界不会被移动 -->
	<frame noresize="noresize" src="">    
	<!-- 混合框架使用 -->
	<frameset cols="30%,70%">
		<!-- 这是导航框 -->
		<frame noresize="noresize" src="test2.html">
		<!-- 给这个框架赋予名字,然后导航就能target到这里 -->
		<frame src="frameA.html" name="showframe">  
	</frameset>
	<frame noresize="noresize" src="">

	<noframes><!-- 本代码段为显示不了frames的浏览器提供的 -->
		<body>
			<p>没有frameset功能的浏览器才会转向显示这个noframes,</p>
		</body>
	</noframes>
</frameset>
</html>
<!-- 这是设置导航框的,这是上面对应的text2.html部分 -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="frameA.html" target="showframe">frameA</a><br>
<a href="frameB.html" target="showframe">frameB</a><br>
<!-- 指向c页面 -->
<a href="frameC.html" target="showframe">frameC</a><br>
<!-- 指向c页面练习章节,在c页面里有已练习命名的标题 -->
<a href="frameC.html#lianxi" target="showframe">练习</a><br>

</body>
</html>

11.iframe

<!-- 在页面设置一个窗来显示特定东西或指定链接 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<iframe src="frameC.html" name="iframe"></iframe>
<p><a href="http://www.baidu.com" target="iframe">跳转百度</a></p>
</body>
</html>

12.html头部

<head>包含<title><base><link><meta><script><style>

<title>对搜索有关键作用。

<base>规定链接的默认地址和target(比如新页面打开等)。如果在body的<a>

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

<link>主要用于链接样式表。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

<style>创建样式表

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

<meta>元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />

13.表单form(及部分input案例)

<!DOCTYPE html>
<html>
<head>
	<title>测试form,比如登陆页面,客户意见</title>
	<meta charset="utf-8">
</head>
<body>
<!-- 表单被提交后,会被发送到action所指的页面上(就是哪个~.asp) 如果action被省略,会被提交到当前页面-->
<!--method属性有两个值,GET和POST,如果用get,表单信息能在地址栏看得到,post则不行,有密码用post-->
<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="GET"> 
<fieldset style="width: 240px;margin-left: 500px;margin-top: 0px"> <!--创建框,框住-->
	
<legend>账号登陆</legend> <!--表单抬头-->

	请输入你的账号:<br/>
	<!-- 在input中,没有name属性,则本条信息不会被提交 -->
	<input type="text" name="account" value="hjc"><br/> <!-- value填入值,有默认-->
	请输入你的密码:<br/>
	<input type="password" name="password" value="123"><br/>
	
	<!-- 单选框 -->
	<input type="radio" name="sex" value="male" checked> Male <!--checked表示默认选择-->
	<input type="radio" name="sex" value="female" > Female
	<br/>

	<!-- 复选框 -->
	<input type="checkbox" name="mystyle" value="绅士">绅士
	<input type="checkbox" name="mystyle" value="潮男">潮男
	<input type="checkbox" name="mystyle" value="幽默">幽默
	<input type="checkbox" name="mystyle" value="聪明">聪明
	<input type="checkbox" name="mystyle" value="机智">机智
	<br/>
        
    <!--下拉选择框-->
	<select name="hobby">
		<option value="basketball">basketball</option>
		<option value="football">football</option>
		<option value="pingpong" selected>pingpong</option> <!--selected预选项-->
		<option value="running">running</option>
	</select>
	<br/><br/>

	<!-- 可输入文本框 -->
	<textarea name="message" rows="10" cols="30">nothings to input</textarea>
	<br/>

	<!-- 带下拉的输入框 -->
	浏览器选择:
	<input list="browsers" name="browsers">
	<datalist id="browsers">  <!--这里必须是id-->
		<option value="IE">Internet Explorer</option>
		<option value="Firefox"></option>
		<option value="Chrome"></option>
		<option value="opera"></option>
		<option value="Safari"></option>
	</datalist>
	<br/>

	<!-- 对数字进行限制 -->
	你女朋友有多少个:
	<input type="number" name="quantity" min="1" max="10">
	<br/>

	<!-- 颜色选择器 -->
	你喜欢什么颜色:
	<input type="color" name="color" value="#fff000">
	<br/>

	<!-- 滑块选择 -->
	你多少岁:
	<input type="range" name="points" min="10" max="30">
	<br/>

	<!-- 年月日 -->
	你生日:
	<input type="date" name="bday"><br/>

	<!-- 年月 -->
	你生日的月份:
	<input type="month" name="bdaymonth"><br/>

	<!-- 时间 -->
	出生时间:
	<input type="time" name="usr_time"><br/>

	<!-- 日期和时间同一个框 -->
	出生年月日和时间:
	<input type="datetime-local" name="bdaytime">
	<br/>

	<!-- 输入正确的电子邮箱 -->
	电子邮箱:
	<input type="email" name="email"><br/>

	<!-- bing搜索 -->
	搜索:
	<input type="search" name="bingsearch"><br/>


	<!-- URL地址:竟然还要输入http:// -->
	URL地址:
	<input type="url" name="homepage">

	<!-- 弹窗的按钮 -->
	<button type="button" onclick="alert('这里啥都没,哈哈哈')">有种按我啊!</button>

	<!--这里只是为了增加空格-->
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

	<!-- 确定 -->
	<input type="submit" value="确定">  <!--value是按键上显示的字-->

</fieldset> 

</form>
<!-- 收到的表格类似于  account=hjc,password=123,sex=Male -->

</body>
</html>

结果:

14.input属性

readonly :输入框只读不能修改

disabled :禁止输入,内容也不会提交

size=“40”:规定输入框大小

maxlength="10" :字符最大长度设置

以下是html5的:

autocomplete: 输入一次后,再次输入可自动补全。autocomplete 属性适用于 <form> 以及如下 <input> 类型:text、search、url、tel、email、password、datepickers、range 以及 color。

novalidate=“novalidate”:适用于<form>,关闭智能表单,就是说判别是否eamil等的那些功能失效。

autofocus :页面新开时,光标自动聚焦在特定输入框中,不需要点击框再输入 

form="<form>的ID" :即使某input不在<form>中,但这<form>有ID,则可通过form指向该<form>实现再框外书写input

formaction="xxx/xxx.php" :用于type="submit"和"image"的input中,提交不同于form的action的php文件
formenctype="multipart/form-data" :用于type="submit"和"image"的input中,以不同编码形式提交,覆盖form的编码形式

formmethod="post" :用于type="submit"和"image"的input中,设定发送方式GET或POST,覆盖form的method

formvalidate="formnovalidate" :用于type="submit"的input中,提交表单不对input进行验证,覆盖form的novalidate
formtarget="_blank" :用于type="submit"和"image"的input中,提交表单收到的反馈显示在哪个页面上
height=""和width="" :用于type="image"的input中,规定图片大小(与原始<img >差别在于这种可以获取你点击图片时的坐标)
list="datalist的id" :用于创建带列表的输入框,13节的案例中有
min=""和max="" :最小最大值,属性适用于如需输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。
multiple :多文件input,适用于:email和file
pattern="[A-a]{3}" :正则表达式,就是规则。定义输入规则。[A-a]{3}代表需要输入3个字母,输入类型:text、search、url、tel、email、and password
placeholder="请输入用户名" :在用户输入值之前显示在输入字段中,输入类型:text、search、url、tel、email 以及 password。
required :提交前必填字段。输入类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
step="10" :规定只能填10的倍数,包括负值。输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。

© 著作权归作者所有

共有 人打赏支持
HuangJC
粉丝 0
博文 32
码字总数 39927
作品 0
佛山
java&javaweb学习笔记(汇总)

我的java&javaweb学习笔记(汇总) 笔记分为两大部分:javase和javaweb javase javaweb 笔记内容主要是对一些基础特性和编程细节进行总结整理,适合了解java基础语法,想进一步深入学习的人 gi...

brianway ⋅ 2016/02/09 ⋅ 2

AppMobi 发布 Chrome App Packager

移动开发公司 AppMobi 正不断的巩固其在 HTML5 的工具包,它们不希望只是开发一些框架或者是一些Web应用替代方案。AppMobi 希望在其自己的移动平台上推进 HTML5 的发展。 上周,该公司发布了...

红薯 ⋅ 2011/09/12 ⋅ 0

适合PHP学习者的学习路线

适合PHP学习者的学习路线   新手不要看到上面的概括就以为PHP学习是很简单的,编程是需要你认真的思考和不断的实践,下面让兄弟连具体解释一下PHP的学习线路, 首先,任何网站都是由网页组...

小贱1991 ⋅ 2016/08/10 ⋅ 0

【AngularJS】—— 3 我的第一个AngularJS小程序

通过前面两篇的学习,基本上对AngularJS的使用有了一定的了解。 本篇将会自己手动写一个小程序,巩固下理解。   首先要注意的是,引用AngularJS的资源文件angular.min.js文件。   由于这...

青夜之衫 ⋅ 2017/12/04 ⋅ 0

手机HTML5应用框架--appMobi

移动开发公司 AppMobi 正不断的巩固其在 HTML5 的工具包,它们不希望只是开发一些框架或者是一些Web应用替代方案。AppMobi 希望在其自己的移动平台上推进 HTML5 的发展。AppMobi推出了全新开...

匿名 ⋅ 2011/12/19 ⋅ 0

ExtJS 2.x + Google Maps JavaScript API V3

最近一段时间手头没有啥具体事情需要忙, 就抽空学习下ExtJS, 并把原先采用BCB6开发的一个配置工具上功能迁移集成到现有的Web平台上来; 刚好可以实践巩固下ExtJS, 其中有个区域配置功能打算把...

长征2号 ⋅ 2017/11/15 ⋅ 0

appmobi介绍

appmobi介绍 [1]移动开发公司 AppMobi 正不断的巩固其在 HTML5 的工具包,它们不希望只是开发一些框架或者是一些Web应用替代方案。AppMobi 希望在其自己的移动平台上推进 HTML5 的发展。A...

leerobin ⋅ 2012/01/31 ⋅ 0

给PHP新手的一些建议,新手福利!

新手小白想要系统性学好PHP开发,首先需要了解需要学些什么,然后给自己定下来一个学习路线,然后就朝着这个路线奋斗吧! 关于学习路线:(1) 熟悉HTML/CSS/JS等网页基本元素,完成阶段可自行制...

PHP那些事 ⋅ 2017/12/13 ⋅ 0

PHP新手学习路线及建议

为了让各位PHP初学者可以更好地学习PHP,今天就给大家分享一些PHP的学习路线,很适合PHP初学者的学习线路和建议。文章具体如下: 我们要有一个循序渐进的学习过程,这里先把学习PHP的过程做一...

小懒人23 ⋅ 2016/06/03 ⋅ 0

北京的第20+N天

为找工作折腾了也算有一段时间,每天宅在这几平米的地方,刷题刷面经刷算法balabalabalab....... 毕竟时间是有限的,而需要准备的东西确实无限的,总得找点门道吧!! 自己的东西才是最好的东西,很...

王大豆 ⋅ 2015/08/26 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux kernel脉络和主干总结

写在前面 前人常说,对Linux操作系统/内核的理解,是计算机行业从业者的内功,决定了你在技术领域想走多远。但内核的庞大以及学习曲线之陡峭,总让我在学习途中觉得犹如“管中窥豹”。 随着工...

Markz0928 ⋅ 7分钟前 ⋅ 0

在gcc中使用intel风格的内联汇编

很简单,内联汇编使用asm(“.intel_syntax noprefix/n”)声明一下,以后的内联汇编就可以用intel风格了,构建可执行文件时给gcc加上-masm=intel参数。 先写一个小程序测试一下: [cpp] view...

simpower ⋅ 18分钟前 ⋅ 0

NIO 之 ByteBuffer实现原理

相关文章 BIO、NIO、AIO 内部原理分析 NIO 之 Selector实现原理 NIO 之 Channel实现原理 前言 Java NIO 主要由下面3部分组成: Buffer Channel Selector 在传统IO中,流是基于字节的方式进行...

轨迹_ ⋅ 27分钟前 ⋅ 0

Jenkins docker权限问题

环境Ubuntu Server 工具 jenkins-war:2.89.2 报错信息 Cannot connect to the Docker daemon. Is the docker daemon running on this host?Build step 'Execute shell' marked build as fai......

Pulsar-V ⋅ 27分钟前 ⋅ 0

180621-一个简单的时间窗口设计与实现

如何设计一个计数的时间窗口 时间窗口,通常对于一些实时信息展示中用得比较多,比如维持一个五分钟的交易明细时间窗口,就需要记录当前时间,到五分钟之前的所有交易明细,而五分钟之前的数...

小灰灰Blog ⋅ 50分钟前 ⋅ 0

Android之Dalvik、ART、JIT、AOT

Android之Dalvik、ART、JIT、AOT 本文内容:Dalvik、ART、JIT、AOT之间关系 本文定位:知识记录 学习过程记录,加深理解,提升文字组合表达能力。也希望能给学习的同学一些灵感 本文整理于[...

lichuangnk ⋅ 54分钟前 ⋅ 0

Thrift RPC实战(五) thrift连接池

Thrift本身没有提供连接池,我们可以用Apache Commons Pool2来实现一个 一、定义对象工厂 BasePooledObjectFactory<T> extends BaseObject implements PooledObjectFactory<T> public class......

lemonLove ⋅ 54分钟前 ⋅ 0

git 命令简写

简写 命令 g git gst git status gd git diff gdc git diff --cached gdv git diff -w "$@" | view - gl git pull gup git pull --rebase gp git push gc git commit -v gc! git commit -v ......

charley158 ⋅ 今天 ⋅ 0

Java中的锁使用与实现

1.Lock接口 锁是用来控制多个线程访问共享资源的方式,一般来说,一个锁能够防止多个线程同时访问共享资源。 在Lock出现之前,java程序是靠synchronized关键字实现锁功能的,而Java SE5之后,...

ZH-JSON ⋅ 今天 ⋅ 0

Intellij IDEA神器常用技巧四-类和方法注释模板设置

IDEA自带的注释模板不是太好用,我本人到网上搜集了很多资料系统的整理了一下制作了一份比较完整的模板来分享给大家,我不是专业玩博客的,写这篇文章只是为了让大家省事。 这里设置的注释模...

Mkeeper ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部