Html教程

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

超链接

  • eg:
<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中显示滚动条(侧边那个)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 导语: HTML(Hyper Text Markup Language 超文本标识语言)是一种用来制作超文本文档的...
    梦巷_n阅读 7,113评论 0 0
  • 什么是 HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text ...
    Y_yao13阅读 861评论 0 3
  • 1 .基本结构 <!DOCTYPE html> 标题文本... 内容文本... 基本解释 <!D...
    mavin_235阅读 428评论 0 0
  • 一、SQL SERVICE的存储过程 二、ORACLE的包
    努力努力再努力_y阅读 555评论 0 2