Html教程

作者: Francis__ | 来源:发表于2017-07-17 23:37 被阅读46次

Tips

HTML标签对大小写不敏感- 每个尖括号<>都被视为一个html元素- 没有内容的HTML内容被称为空元素。(空元素是在开始标签中关闭的，如br/)
严肃分为块级元素和内联元素 - 块级元素(div)：占掉页面中的整行长度 - 内联元素(span)：只占元素内容的长度- 注释：< !-- 被注释掉的内容 -->- 在html文档中用标签制定浏览器使用某编码进行展示网页(指定与 html 文件的编码对应的编码即可) - 在head之下写 (对应UTF-8 无 BOM)或者(对应文件编码为ansi)
在编写文件之前我们需要声明类型，即在最开头写上

<！Doctype html> 
<html>
    <head>
        <meta charset="utf-8 /">
        <title>此处写标题</title>
    </head>
    <body>
        此处为主体
    </body>
</html>

Knowledge

注释：图像的名称和尺寸是以属性的形式提供的。
src为源属性，就添加图像而言，img之后还应加上src="……"，引号之内包括图像所在的文件地址以及属性(如jpg，gif之类的)，以及宽高所占像素，亦可用长度表示(宽在前)
属性src里面填写图片的路径即可。路径有两种填写方式：绝对路径&相对路径
绝对路径：服务器部署之时用到
相对路径：相对于我们当前html文件的位置来写路径即可。./表示当前目录，../表示上一级目录 - 图片地址不能直接复制粘贴属性里的玩意儿，得把反斜杠()改成正斜杠(/)- 换行：
空格： - 列表需要一种嵌套写法，这种嵌套是必须的 - 页面中某个列表我们可以通过

<ul>
    <li>此处写列表中内容</li>
</ul>

这样的方式表现出来 - 若希望写无序列表只需要将ul改为ol

超链接

<a href=" 链接地址" title=" 私房库优质课程" target=" _blank">私房库</a>

- 属性href：填写需要链接到的网址建设初期可以使用#链接来表示空链接    
- 属性title：title里面的内容会在鼠标悬停时显示
- 属性target:设置为 _blank 时即可在新窗口打开链接地址

指定图片某块区域加超链接

使用 map 标签可以给图片某块区域加超链接
- 为 map 标签首加上 id 属性用来为 map 标签定义一个唯一的名称
- 为了保证兼容性再加上 name 属性，属性值与 id 的值相同(有些浏览器认name,有些认id，都加上保证兼容)
- 为 map 标签所作用的图片加上 usemap 属性，属性值为 #id 名称
- 在 map 标签内嵌套 area 标签来实现给指定区域加链接
- shape属性：定义链接区域的形状，常用值rect,circle
- coords属性：确定区域的精确位置，填写坐标即可
- href属性：填写链接地址即可
- alt属性：给链接加一些说明信息
  - 注：images/1.jpg 为图片保存的路径
  - target="_blank"作用为新打开一个网页(不加此句则直接覆盖原网页)
  - eg:

<map id="img1 name="img1">
        <area shape="rect" coords="横，纵，横，纵" href="http://www.baidu.com" alt="百度一下" target="_blank" />
        <area shape="circle" coords="横，纵，半径" href="http://www.baidu.com" alt="百度一下" target="_blank" />
</map>

div标签

块级元素
可以把div标签视为一个可以存放标签的容器，常用标签几乎都可以嵌套在div标签里面

span标签

使用来组合内联元素，以便于通过css来美化他们

class属性

class属性规定元素的类名(classname)- class属性大多数时候用于指向样式表中的类(class)。不过，也可以利用它通过JavaScript来改变带有指定class的HTML元素- 类名不能以数字开头- class属性不能在以下HTML元素中使用：base,head,html,meta,param,script,style,title - 提示：可以给HTL元素赋予多个class，
- eg:.这么做可以把若干个CSS类合并到一个HTML元素

<html>
<head>
    <style type="text/css">
        h1.intro {color:blue;}
        p.important {color:green;}
    </style>
</head>
<body>
<h1 class="intro">Header 1</h1>
    <p>A paragraph.</p>
    <p class="important">Note that this is an important paragraph.</p>
</body>
</html>

表格

tr标签：定义html表格中的行，tr元素包含一个或多个th或td元素
th标签：定义表格中的单元表格(表头)
td标签：定义表格内的普通单元格 - 常用属性：
- border：规定表格边框的宽度(一般设置为0)
- cellpadding：单元格大小(一般设置为0)
- cellspacing：每个单元格之间的距离(一般设置为0)
  - td之内还可以添加colspan(可横跨的行数)和rowsplan(可横跨的列数)进一步对表格进行设置

<body>
<table border="" cellpadding="" cellspacing="">
    <tr><th>666</th><th>666</th></tr>
    <tr><td rowspan="数字">777</td><td>888</td></tr><!--合并行-->
    <tr><td colspan="数字">777</td><td>888</td></tr><!--合并列-->
</table>
</body>

表单

form定义供用户输入的html表单
- action:规定当提交表单时向何处发送表单数据
- name:给表单命名
- target_blank等其他值，这是最常用的，其他几乎不用
- method：提交方式，post或get值(默认用get)

input标签定义表单的输入界面
- 通过type属性来展示不同的输入界面，通过value改变默认值
  - 普通文本框：<input type="text" value="文字" />
  - 密码框:<input type="password" value="文字" />
  - 文件上传：<input tpe="file" value="文字" />
  - 隐藏的input:<input type="hidden" />(以后学)
  - 普通按钮：<input type="button" value="文字" />
  - 单选：<input type="radio" value="文字" />
    - 通过相同的name属性来实现单选

性别：<input type="radio" name="sex" />男<input type="radio" name="sex" />女

复选框：<input type="checkbox" value="文字" />
提交:<input type="submit" value="文字" />
重置：<input type="reset" />
属性checked,可用值：checked:一般用于对选择输入界面(单选复选)实现默认选择

性别：<input type="radio" name="sex" checked="checked" />男
    系统默认勾选“男”这一选项

属性disabled,可用值：disabled(++框内灰++)：不可输入(几乎所有的输入界面都可以使用该属性)

eg:
姓名：<input typee="text" value="小王" disabled="disabled" />
    系统默认无法在“姓名”所对应的框中填写

属性name：给自己input输入界面取的名字(最好每一个Input都起名字，并与之相关)
属性readonly，可用值readonly(框内不灰)：输入界面为只读状态(与disabled作用相似)
属性size,值为数字：设置输入框长度
属性value：input最终提交到页面的数据，可以通过该属性设置默认值

textarea标签，定义多行输入框

双标签默认值直接写在标签之间
属性：cols，值为数字。rows，值为数字
- 亦可使用上述disabled,name,readonly属性

label标签，提升用户体验

标签的 for属性与相关 input 的 id 属性相同

eg:
性别：
<input type="radio" id="boy" name="sex" checked="checked" /><label for="boy">男</label>
<input type="radio" id="girl" name="sex" /><label for="girl">女</label> 
<!--
只要id号不相同即可(类似于身份证，在一个文件中id必须唯一)
而<label>标签中for之后的属性应该和id后的属性相对应，以达到点击文字亦可选中的效果
-->

select标签，配合option标签实现++下拉菜单++

可用属性：disabled,name,multiple

<select multiple="multiple">
    <option>666</option>
    <option>777</option>
    <option>888</option>
</select>
<!--
此代码中 multiple 的作用为将下拉菜单全部固定，按住 Ctrl 点击左键完成多选-->

option标签

可用属性disabled,selected,value

<select>
    <option value="666">666</option>    <!--养成写value的好习惯-->
    <option selected="selected" value="666">777</option>    <!--默认选中777-->
    <option value="666">888</option>
</select>

optgroup标签

把相关选项组合到一起
属性label:给选项组命名
属性disabled:禁用该选项组

<select name="city">
    <optgroup label="江苏">
        <option value="无锡">无锡</option>
        <option value="南京">南京</option>
        <option value="苏州">苏州</option>
    </optgroup>
    <optgroup label="山东">
        <option value="淄博">淄博</option>
        <option value="青岛">青岛</option>
    </optgroup>
</select>

标签写法探讨

元素标记的省略(在html5里有的标记是可以省略不写的)

不允许写结束标签的元素：area,base,col,command,embed,hr,img,input,keygen,link,metaparan,source,track,wbr
- 这些标签都是单标签，只能以"br/"这样的方式关闭标签(当然，html5中亦可不关闭标签，最重要的是一致！！！！！)
可以省略结束标记的元素有：li,dt,dd,pmrtmoptgroup,option,colgroup,thead,tbody,tfoot,tr,td,th
可以省略全部标记的元素有：html,head,body,colgroup,tbody

具有 boolean 值得属性

eg:disabled,readonly,checked等

标签嵌套讨论

html规定的必须嵌套着写的标签

eg:
- 页面头部是嵌套在head标签里的
- 主题内容是嵌套在body标签里的
- 表单的内容是嵌套在form标签里的
- dd,dt是嵌套在dl里的
- li是嵌套到ul里的……
块级元素可以嵌套内联元素，但是内联元素不能包含块元素

<div><span>我是一个span元素</span></div> <!--对-->
<span><div>div元素</div></span> <!--错-->

内联元素可以嵌套内联元素

<a href="#"><span></span></a>

块级元素与块级元素嵌套注意点：
- div块级元素是一个容器，几乎可以存放任何常用标签，包括自己
- 块级元素不能放在p标签里面
- li内可以包含div标签，反之，div亦可包含li
  - li 和 div 地位平等
  - li 标签连他的父级 ul 或者是 ol 都可以容纳
块级元素和内联元素是可以相互转化的

html其他标签

头部
- <head></head>及其之间的内容更叫做头部头元素，包含关于文档的概要信息，亦称作源信息(meta-information)
- 头元素内的元素在浏览器中不显示(除了标题)
- 在html中，仅有几个标签在html的头部是合法的。包含有：<base>,<link>,<meta>,<title>,<style>,<script>
  - 为html页面添加描述信息用于搜索引擎抓取。使用name属性，配合content属性实现

<meta name="keywords" content="关键词(若有多个则用逗号分隔)" />
<meta name="description" content="页面描述" />

引入css文件
css的代码可以单独的写在一个文件里面然后通过 html标签来引入到页面里

<link rel="stylesheet" href="文件位置" type="text/css" />

为html文档加上使用的语言类型说明
- 在很多国际化的网站中会使用到

<htl lang="zh-CN">
</html>

告诉浏览器等设备，语言使用以中文为显示和阅读基础(英文使用<html lang="en"></html>)

用html标签来实现网页跳转

<head>
    <meta charset="utf-8" />
    <title>网页标题</title>
    <meta http-equiv="refresh" content="等待秒数" URL="跳转网址" />
</head>

高速浏览器不要加载页面的缓存(即不要获取网站的最新内容)

<meta http-equiv="pragma" content="no-cache" />

iframe标签，框架

创建包含另外一个文档的内联框架(即行内框架)

<body>
    <iframe src="该页面内想要包含的网址(亦可是自己写的html文件)" width="" height=""></iframe>
</body>

- frameborder
- 值：1、0
- 作用：规定是否显示框架周围的边框

<body>
    <iframe src="http://www.baidu.com" width="100%" height="100%" frameborder="0"></iframe>
</body>

name:给iframe名命名
scrolling:
值:yes,no,auto(自动)
作用：规定是否在iframe中显示滚动条(侧边那个)

Html教程

Tips

Knowledge

这样的方式表现出来 - 若希望写无序列表只需要将ul改为ol

超链接

指定图片某块区域加超链接

div标签

span标签

class属性

表格

表单

textarea标签，定义多行输入框

label标签，提升用户体验

select标签，配合option标签实现++下拉菜单++

option标签

optgroup标签

标签写法探讨

元素标记的省略(在html5里有的标记是可以省略不写的)

具有 boolean 值得属性

标签嵌套讨论

html规定的必须嵌套着写的标签

html其他标签

iframe标签，框架

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读