马冲的博客

导航

html

HTML

 

1.什么是HTML?

超文本标记语言.

HyperText Markup language

How To Make Love...

 

2. 了解浏览器相关内容:

五大浏览器: IE浏览器、chrome浏览器(谷歌浏览器)、火狐浏览器、Safari浏览器、Opera欧鹏浏览器。

IE浏览器:兼容性的问题

IE 4/5.5/6/7/8    不支持HTML5的浏览器

IE9/10/11/12    部分支持HTML5的浏览器

非IE浏览器(Opera,chrome,FF,Safari) W3C

360安全浏览器    IE内核

360极速浏览器    chrome相同的内核  webkit内核

遨游浏览器   IE内核+chrome内核

。。。。。

在学习过程中我们会因为各种浏览器遇到不同的显示效果,这就是所谓的浏览器兼容性.

 

3.HTML的标准和版本问题

目前使用的HTML版本:

HTML4.01版本

XHTML1.0版本

HTML5版本

 

4.HTML学习的重点和难点.

本章的学习重点和难点:

重点: 标签和标签属性的学习

难点: 标签太多,属性太多,记忆困难

 

HTML文件相关

文件的命名方式:

文件后缀: .html和.htm

通常情况下使用.html作为一个完整HTML页面的后缀.

通常情况下使用.htm作为一个网站的模板使用.

文件名称:

1.不允许使用中文,可以使用英文和拼音

2.不要使用特殊符号(部分)

3.可以使用数字命名、

 

第一个HTML标签

<marquee>什么是兄弟?兄弟就是你有xiong,我有di</marquee>

标签 :<marquee>

元素 :marquee

习惯上标签和元素基本没差别

格式1:

<开始标签名>其他内容</结束标签名>

斜线  /正斜线   \反斜线

 

<marquee width="50%">

什么是兄弟?兄弟就是你有xiong,我有di

</marquee>

格式2:

<开始标签名 属性名=“属性值”>其他内容</结束标签名>

关于引号:

在声明属性时,属性值可以写双引号,单引号,也可以不写引号,推荐使用双引号。

 

<marquee width="50%" loop="2">

什么是兄弟?兄弟就是你有xiong,我有di

</marquee>

格式3:

<开始标签名 属性名=“属性值” 属性名=“属性值” ...>

其他内容

</结束标签名>

<marquee width="50%" loop="2">

<font color="red">

 什么是兄弟?兄弟就是你有xiong,我有di

</font>

</marquee>

格式4:

<开始标签名 属性名=“属性值” 属性名=“属性值” ...>

<其他开始标签 属性...>其他内容</其他结束标签>

</结束标签名>

HTML标签的特点: 允许标签嵌套。(嵌套必须要合理缩进)

浏览器具备一定的容错性,简单的代码错误可以被自动更正,不提倡我们写错误代码。

HTML中常见的问题:

1.符号问题,必须使用英文半角符号,禁止出现中文或者全角

2.标签太多  记不住,属性太乱记不住,多写。

 

 

HTML标签部分

1.全局架构标签

<!-- DTD文档类型声明 -->

<!doctype html>

<html>

    <!--网页的头标签 不可见-->

    <head>

        <!--网页标题标签-->

        <title>奥巴马穿越中国防空识别区</title>

    </head>

    <!--网页的内容标签  可见-->

    <body>

        <marquee>奥巴马真牛,应该改名奥巴牛</marquee>

    </body>

</html>

 

2. body标签

bgcolor   设置页面的背景颜色属性

在HTML中表示颜色的几种方式:

1.英文单词方式  red/blue/green/pink....

2.RGB颜色表示方式  计算机的三原色进行组合(有兼容性问题)

格式: rgb(红色,绿色,蓝色)

颜色取值都是0-255

3.HEX(16进制)方式

格式: #红色绿色蓝色   #FF0000->红色

 

background  设置页面的背景图片

如果同时设置背景颜色和图片 以背景图片为主,颜色会被遮盖

 

文本标签

<h1>...<h6>  h系列标签  标题标签 (没有h7以后的标签)

h1~h6  特征:

1.都是粗体字

2.从h1到h6 字体逐渐变小

3.独占一行  标题的特征

 

h1-h6标签在SEO优化中的使用原则:

1.h1标签一个页面只允许出现一次,而且存放最重要的内容

2.h2以后标签页面可以使用多个,h2标签一般用来表示和当前页面主题相关的其他重要内容

3.h3标签几乎不具备什么SEO优化效果,和普通标签区别不大

4.h4-h6标签一般不适用

 

文本样式标签

<b> 表示粗体样式的标签 单纯用来表示样式

<i>   表示斜体的样式的标签  单纯用来表示样式

<u>   表示下划线的样式的标签  单纯用来表示样式

 

<strong>  表示粗体样式的标签,有强调意义。

<cite>   表示斜体样式的标签  有强调意义。  更强烈

<em>     表示斜体样式的标签  有强调意义。

 

<font> 纯样式标签 设定颜色 字体和大小

color  设置字体颜色

size   设置字体大小  只有1-7

face   设置字体类型  

 

 

格式标签:

<P>  表示段落标签  

特点: 每个段落的最后都会空一行

<br> 强制换行标签  (单标签)

br标签封闭时可以  <br />

<hr>  水平线标签

Width 设置水平线的宽度 。一般用百分比。

<center>  居中标签  将该标签内的所有内容居中显示

<pre>  预格式化标签

作用: 将HTML页面代码中的样式原样输出到HTML页面中

<marquee>  滚动标签

Width 设置开始滚动的位置

loop  设置循环的次数

Behavior 设置滚动方式  

scroll  从右向左  slide 停在边上  alternate钟摆模式

<div>  无意义标签   代表块状元素

作用: 划分页面布局

<span> 无意义标签   代表行内元素(内联元素)

作用:输出文字

 

   块状元素和行内元素的问题:

1.块状元素独占一行,不与其他元素在一行共保存,行内元素的特征可以再一行共存

2.宽高设定对块状元素有效,对行内元素无效(在DTD声明的情况下)

 

列表标签

<ol>  order list  有序列表

type 设定排序标示类型

start 设定排序起始位置

<li>  list  列表选项标签

<ul>  unorder list  无序列表

<dl>  define list  定义列表

<dt> 定义标题

<dd> 定义描述

 

超链接标签

通过操作(包括点击移动等)能够打开一个新的页面或者文件的方式 都是超链接.

<a> 超链接标签

href 用于定义连接地址

锚点连接 #锚点名称

邮箱连接  mailto:邮箱地址

普通连接  连接地址

target 设定新页面的打开方式

_self 连接在当前页面打开

_blank 在新页面打开连接

_top  在顶级页面打开

_parent  在上一级页面打开

自定义方式  框架中使用

name  用于定于锚点连接的名称

 

A标签的作用:

1.普通的超链接

2.页面的锚点连接

3.邮箱连接

 <a href=mailto:conghao126@163.com>邮箱</a>

 

关于连接地址问题:

绝对路径: 有协议 有路径

http://as.meituan.com/deal//21269369.html

组成:

http://  协议部分   

http /https/ftp/ftps/svn.... file://(本地)

as.meituan.com/  域名部分

Deal  路径部分

21269369.html  文件名部分

相对路径:没有协议  有路径

./   在当前文件夹之下

../   在上一层文件夹之下

 

图片标签:

<img> 图片标签

用于在HTML页面中使用图片  单标签

src   引入图片的地址

Width  设置图片的宽度

Height 设置图片的高度

alt  设置图片的描述

title 设置图片的描述

Border  设置图片的边框  ,一般用于设置取消边框而不是增加边框.

 

表格标签:

<table>  定义表格区域

border  设定表格的边框

Width  设定表格的宽度

Height  设定表格的高度

align   设定表格的对其方式

bgcolor  设定表格的背景颜色

<tr> 定义表格的一个行

bgcolor  设定行的背景颜色

Align    设定表格内容的水平对其方式

left 左对齐  right 右对齐  center 居中对齐

valign   设定表格内容的垂直对其方式

top 顶部对齐  bottom底部对其  middle 居中对齐

<td> 定义表格行中的一个列

<th> 定义表头行中的一个单元格 和td类似

bgcolor  设定单元格的背景颜色

Align 设定单元格内容的水平对齐方式

valign    设定单元格内容的垂直对其方式

colspan   设置单元格的跨列属性

rowspan   设置单元格的跨行属性

<caption>  定义表格的描述标签

 

表单标签

<form> 定义一个表单的范围

action  表单提交的目标页面

Method  设置表单数据提交的方式

get方式 (明文传送) post方式(密文传送)

<input>  设定一种类型的输入表单

Type=text  普通文本输入框

注意:必须要写name值M,,可以写value值作为默认值

Type=password 密码输入框

注意: 必须要写name值,不需要写value值

Type=radio   单选按钮

注意:必须写name值,name值必须相同才能实现单选,value值必须写

Type=checkbox 多选按钮

注意:必须写name值,nane值通常需要使用[](需要多选操作时),value值必须写

Type=submit  提交按钮

注意:可以不写name值 value值就是按钮的文字

Type=reset 重置按钮

注意:可以不写name值 value值就是按钮的文字

Type=file  上传文件表单

注意: 要填写name值 不需要写value值

Type=image  图片提交按钮

注意:name值不需要 value值不需要 需要填写src属性引入一张图片.,

Type=hidden  隐藏表单

注意:该表单无法显示在页面中 必须填写name值和value值。

<select> 定义下拉菜单的标签

name  用来定义当前表单的名称

Multiple  设置当前下拉列表为多选列表

size 用于设定表单的显示大小 在具有Multiple 属性时使用

<option> 下拉菜单的选项标签

Value 用以声明当前选项的值

<textarea>  文本域标签 (成对标签)

name 设定表单名称

rows  设定表单高度

cols  设定表单宽度

注意;该标签没有value属性  默认值需要在开始和结束标签 内写

<button>  通用按钮标签

该标签通过属性设置可以变为不同的按钮

type =button  普通按钮 没效果

Type=submit  提交按钮  和input提交按钮一样

Type=reset   重置按钮  和input重置按钮一样

 

表单的其他属性:

选中属性:

checkbox和radio  选中属性  

checked  选中(单属性无值)

select标签的选中属性

selected  选中 (单属性无值)

长度限制属性:

input表单中的text和password表单和textarea表单都可以使用

maxlength属性   值为整数

 

大小调整属性:

input表单的大小调整属性,仅用于普通和密码表单

select在多选模式下可以使用size属性

size 属性  值为整数

 

 

 

 

 

 

 

 

 

 

 

posted on 2018-11-07 00:00  马冲的博客  阅读(361)  评论(0编辑  收藏  举报