HTML

开发工具

我们主要用的 开发工具有   chrome  、  sublime 、  photoshop

浏览器

浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。

查看浏览器占有的市场份额(知晓)

查看网站:http://tongji.baidu.com/data/browser

常见浏览器内核介绍

浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。
(1)Trident(IE内核)
(2)Gecko(firefox)
(3) webkit(Safari)  
(4) Chromium/Blink(chrome)
(5) Presto(Opera)

HTML初识

文档

W3C :  http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/

 

HTML骨架格式

<HTML>   
   <head>    
       <title></title>
   </head>
   <body>
   </body>
</HTML>
1 HTML标签:

作用所有HTML中标签的一个根节点。 最大的标签   根标签

2 head标签: 文档的头部

注意在head标签中我们必须要设置的标签是title

3.title标签: 文档的标题

作用:让页面拥有一个属于自己的标题。

4.body标签:文档的主体 以后我们的页面内容 基本都是放到body里面的

body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

文档类型<!DOCTYPE>

这句话就是告诉我们使用的是 html 5 的版本。

字符集

<meta charset="UTF-8" />

HTML标签

标题标签

<hn>   标题文本   </hn>

段落标签

<p>  文本内容  </p>

水平线标签(单标签)

<hr />是单标签

换行标签(单标签)

<br />

div span标签(重点)

<div> 这是头部 </div>    <span>今日价格</span>

文本格式化标签

标签					显示效果
<b></b>和<strong></strong>		文字以粗体方式显示
<i></i>和<em></em>			文字以斜体方式显示
<s></s>和<del></del>			 文字以删除线方式显示
<u></u>和<ins></ins>		     文字以加下划线方式显示

标签属性

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

图像标签img (重点)

<img src="图像URL" />
属性			属性值		   描述
src			 URL		图像的路径
alt			 文本		图像不能显示时的替换文本
title		      文本		鼠标悬停时显示的内容
width		      像素		设置图像的宽度
height		      像素		设置图像的宽度
border		      数字		设置图像边框的宽度

链接标签(重点)

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
1.外部链接 需要添加 http:// www.baidu.com
2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

锚点定位 (难点)

1.使用“a href=”#id名>“链接文本"</a>创建链接文本(被点击的)
  <a href="#two">   

2.使用相应的id名标注跳转目标的位置。
  <h3 id="two">第2集</h3> 

base 标签

base 可以设置整体链接的打开状态   
base 写到  <head>  </head>  之间
把所有的连接 都默认添加 target="_blank"
<base target="_blank">

特殊字符标签 (理解)

特殊字符

特殊符号		       描述					字符的代码
			   空格					&nbsp;
<			  小于号					&lt;
>			  大于号					&gt;
&			  和号					&amp;
¥			 人民币				        &yen;
©			  版权					&copy;
®			  注册商标				&reg;
°			  摄氏度					&deg;
±			  正负号					&plusmn;
×			  乘号					&times;
÷			  除号					&divide;
²			  平方2(上标2)			      &sup2;
3			  平方3(上标2)			      &sup3;

注释标签

 <!-- 注释语句 --> 
 快捷键: ctrl + /   或者 ctrl +shift + / 

路径(重点、难点)

1.相对路径
(1)图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如<img src="logo.gif" />
(2)图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img src="img/img01/logo.gif" />
(3) 图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,如<img src="../logo.gif" />

2.绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的

列表标签

无序列表 ul (重点)

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>
注意:
1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!

有序列表 ol (了解)

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

 

自定义列表(理解)

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

表格 table(会使用)

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>
1.table用于定义一个表格。

2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。

3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。
注意:
1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签,他就像一个容器,可以容纳所有的元素
## 表格属性

属性名				含义						常用属性值
border			设置表格的边框						像素值
cellspacing		设置单元格与单元格边框之间的空白间距				像素值(默认为2像素)	
cellpadding		设置单元格内容与单元格边框之间的空白间距			像素值(默认为1像素)	
width			设置表格的宽度						像素值
height			设置表格的高度						像素值
align			设置表格在网页中的水平对齐方式				left(默认),center,right			
最常用写法:
三参为0    border  cellpadding  cellspacing  为  0

表头标签

<th></th>代替<td></td>即可

表格结构(了解)

在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体 如下所示:

<thead></thead>:用于定义表格的头部。

必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。


<tbody></tbody>:用于定义表格的主体。

位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。

表格标题

*表格的标题: caption(只存在于表格中)*

<table>
   <caption>我是表格标题</caption>
</table>

合并单元格(难点)

跨行合并:rowspan    跨列合并:colspan

总结表格

1. 表格提供了HTML 中定义表格式数据的方法。

2. 表格中由行中的单元格组成。

3. 表格中没有列元素,列的个数取决于行的单元格个数。

4. 表格不要纠结于外观,那是CSS 的作用。

 

表格的学习要求: 能手写表格结构,并且能合并单元格。

表单标签(掌握)

表单目的是为了收集用户信息。

在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

input 控件(重点)(单标签)

属性				属性值			描述
type			      text			单行文本输入框
				password		密码输入框
				radio			单选按钮
				checkbox		复选按钮	
				button			普通按钮	
				submit			提交按钮
				reset			重置按钮
				image			图像形式的提交按钮
				file			文件域
name			    由用户自定义		控件的名字
value			    由用户自定义		input控件中的默认文本
checked			    checked		    定义选择控件默认被选中的项
maxlength		    正整数			控件允许输入的最多字符数
radio  如果是一组,我们必须给他们命名相同的名字 name   这样就可以多个选其中的一个啦

label标签(理解)

label 标签为 input 元素定义标注(标签)

作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

for 属性规定 label 与哪个表单元素绑定。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>
注意:

1. <select></select>中至少应包含一对<option></option>
2. 在option 中定义selected =" selected "时,当前项即为默认选中项。

表单域

form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>
常用属性:

1. Action
   在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method
   用于设置表单数据的提交方式,其取值为get或post。
3. name
   用于指定表单的名称,以区分同一个页面中的多个表单。
注意:每个表单都应该有自己表单域。
原文地址:https://www.cnblogs.com/baoyingying/p/12878648.html