html巩固(1)
博客专区 > HuangJC 的博客 > 博客详情
html巩固(1)
HuangJC 发表于5个月前
html巩固(1)
  • 发表于 5个月前
  • 阅读 8
  • 收藏 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>
<!-- 这是设置导航框的 -->
<!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(比如新页面打开等)。

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

共有 人打赏支持
粉丝 0
博文 30
码字总数 35251
×
HuangJC
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: