Html基本结构

来自CloudWiki
跳转至： 导航， 搜索

前言

教师在授课过程中避免模棱两可的表述：比如浏览器有容错能力，所以标签大小写都可以等这样语言不要出现。

从开始就要树立标准规范，强调这样几点：

  • 双标签必须闭合
  • 单标签必须有结尾正斜线
  • 所有标签要求小写
  • 标签嵌套规范
  • 属性值必须使用引号包裹等。

教师重点强调：标题标签 对搜索引擎优化有重要意义 

搜索引擎要抓取网页的关键字   遍历不同的标签  有不同的权重  标题标签对爬虫程序来说权重值比较高

标题标签

 <h1 id="main">标题1</h1>
	<h2>标题2</h2>
	<h3>标题3</h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>

段落标签

 <p>段落标签<p>非常棒</p>


换行标签

 <br/>


水平线

  <hr/>


强调标签

 <em>倾斜</em>
	<i>倾斜</i>
	<strong>强壮</strong>
	<b>加粗</b>

图片标签

教师要强调路径问题

讲清什么是相对路径 什么是绝对路径

还要强调在项目中为什么不能使用绝对路径

第二点要强调路径中不能有中文

第三点注意相对路径中表示当前目录推荐（要求）写./ 


 <img src="img/adv1.png" alt="tu" title="图"/>
	<img src="img/adv1.png" alt=""/>

超链接

 <a href="http://www.baidu.com" target="_blank">百度</a>
	<a href="#main">主题</a>
	<a href="mailto:a.61@163.com">打开邮箱</a>
	<a href="笔记1.html#footer">跳转到笔记1的底部</a>

列表标签

列表标签能够更清晰的表达层级，w3c标准是推荐使用的标签 在实际开发中ul使用更多 ol也是不错的选择. 


<ul>

		<li>
			<a></a>
		</li>
		<li>2</li>
		<li>3</li>
	</ul>


	<ol>
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ol>

	<dl>
		<dt>第一章</dt>
		<dd>第一节</dd>
		<dd>第二节</dd>
		<dd>第三节</dd>
		<dt>第二章</dt>
		<dd>第一节</dd>
		<dd>第二节</dd>
		<dd>第三节</dd>
		<dt>第三章</dt>
		<dd>第一节</dd>
		<dd>第二节</dd>
		<dd>第三节</dd>
	</dl>

表格

  • 在div和css布局之前，前端开发人员都是使用表格布局的，这种布局方式对seo不友好，现在都要求div+css
  • 现在的表格就是展示数据用。注意colspan 和 rowspan 的使用。
  • border="1" width="800" 这种属性的写法也是过时了。在面试过程中绝对不能出现table布局。


表格标签: 

  <table border="1" width="800">
		<caption>通讯录</caption>
		<thead>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>电话</th>
				<th>备注</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2">1</td>
				<td rowspan="2">刘艳</td>
				<td>13754899251</td>
				<td rowspan="2">山西太原</td>
			</tr>
			<tr>
				<td>15383405767</td>
			</tr>
			<tr>
				<td>2</td>
				<td>杨艳</td>
				<td>13753846431</td>
				<td>山西吕梁</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="4" align="right">共2人</td>
			</tr>
		</tfoot>
	</table>



表单标签

表单标签对于初学者来说是难点 一下子接触这么多input类型 容易混淆，更难的是不理解表单作用，不理解get和post区别，

最好通过搭建一个真实的服务器环境，比如phpstudy，简单演示如何进行get请求 post请求 。

容易忽视的表单的一个属性 enctype="application/x-www-form-urlencoded" 在做上传业务必须有这个属性否则无法成功上传

＜input type="checkbox" name="cb[]"＞ 可以直接checkbox name属性是一个数组形式

表单标签 

<form action="" method="post">
		用户名：<input type="text" name="username"/><br/>
		密码：<input type="password" name="password"/><br/>
		性别：<input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="1">女<br/>
		爱好：<select name="like"> 
			 <option value="看书">看书</option> 
			 <option value="旅游" selected="selected">旅游</option> 
			 <option value="运动">运动</option> 
			 <option value="购物">购物</option> 
		</select><br/>
		个人简介：<textarea cols="50" rows="10"></textarea>
		<input type="button" name="but" value="按钮">
		<input type="submit" name="submit" value="提交">
		<input type="reset" name="reset" value="重置">
	</form>

无语义标签

<div></div>
	<span></span>



模块划分

常见的企业站，多由头部区，展示图片区域，主题区域，底部信息区域组成



考点

1.块级元素和内联元素，空元素

2.alt与title的区别

3.head标签中的哪个标签不能省略

4.标签书写正确的是

5.src与href的区别

6.<!doctype html>的意义

7.语义化标签的作用

取自“http://www.openbrains.net/mediawiki/index.php?title=Html基本结构&oldid=14937”