我是谁,我从何而来,我要到哪儿去(HTML)

HTML的基本知识思维导图.png

什么是HTML

HTML是用来描述网页的一种语言

  • HTML指的是超文本标记语言
  • HTML不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签
  • HTML使用标记标签来描述页面

HTML通过标签的形式将信息展示给用户。

HTML基本标签

  1. 文件标签(结构标签)

     <html>根标签
     <head>
         <title>页面的标题
     <body>内容
         属性
             text:文本的颜色
             bgcolor:背景色
             background:背景图片
    
  2. 排版标签

     <!-- -->注释标签
     <br/>换行标签
     <p></p>段落标签 段与段之间的空行
         属性:
             align:对齐方式  left center right
     <hr/>水平线标签
         属性:
             width:长度
             size:粗度
             color:颜色
             align:对齐方式
         尺寸的写法:
             (1). 像素:10px
             (2). 百分比:占据父标签的百分比
    
  3. 块标签

     <div>:行级块标签
     <span>:行内块标签
     作用:div:div+css布局。span:进行友好提示
    
  4. 文字标签

     基本文字标签:
     <font>
         属性:
             color:颜色
             size:文字大小 最小值:1,最大值:7,默认值:3
             face:字体类型(黑体、宋体)
     标题标签:
     <h1>--<h6>
     是依次减小的,默认字体加粗,内置字号
    
  5. 清单标签

     无序列表:<ul>
             属性
             type:disc square circle
                 <li>:列表项
     有序列表:<ol>
             属性
             type:1 a A I i
             start:从第几个开始(数字)
    
  6. 图形标签

     <img>
         src:图片地址
         width:宽度
         height:高度
         border:边框
         align:对齐方式 代表图片与相邻的文本的相对位置 top middle bottom
         alt:图片的文字说明,
    
  7. 链接标签

     <a>
         属性:
             href:跳转的页面地址
             name:页面名称, 锚点
             target:_self _blank 默认_self
         作用:
             (1)页面跳转
                 注意:访问互联网上的资源,前边必须加协议http://
             (2)锚点访问
                 href在访问锚点的时候书写格式#name的值
    
  8. 表格标签

     <table>
     属性:
     border:表格线
     width:表格的宽度
     align:表格的对齐方式
     bgcolor:背景颜色
         <caption>:表格的标题
         <tr>行
         属性:
         align:对齐方式  单元格内数据的对齐方式
             <td>单元格
             属性:
             colspan:列合并
             rowspan:行合并
         表头的话讲<td>换成<th>
     表格的作用:
         (1)简单的实现一个表格样式
         (2)进行布局
     <thead>
     <tbody>
     <tfoot>
         作用:分块加载,优化用户体验
    

HTML表单标签

  1. form标签

     <form>
     属性:
         name:表单名称
         action:提交的路径地址
         method:提交方式 post get
             *get与post区别:
                 (1)get提交将数据加在地址栏后边,而post提交将数据封装在请求体中。
                 (2)get提交相对不安全 post提交相对安全。
                 (3)get提交有大小限制,根据浏览器的不同而不同。post不限制大小。
    
  2. input标签

     属性:
         type:根据type值的不同,会显示不同功能呢表单项
             text:普通的文本输入框
             password:密码输入框,特点显示掩码
             radio:单选按钮 name值相同
                 checked:代表默认被选中
             checkbox:复选框 name值相同
             file:上传文件
             button:普通按钮,没有任何内置功能
             submit:提交按钮,点击表单按照action地址进行提交
             reset:重置按钮,点击会将表单清空
             image:图片按钮,点击表单按照action地址进行提交
                 属性:
                     src:图片地址
                     alt:图片的文字信息
             hidden:隐藏标签 服务端需要,不需要用户看到。
         name:
         value:默认显示值
    
  3. select标签

     name:表单项名称 
     option:代表一个选择项
         value
         selected:默认被选中的项
    
  4. textArea文本域标签

     属性:
         cols:列数
         rows:行数
         默认的文本值是在标签体中
    

HTML框架标签及其他

  1. 框架标签

     frameset:
         属性:
             cols:按照列划分
             rows:按照行划分
             划分的格式:rows="120,*,120" *代表剩余部分
         frame:
             属性:
             name:名称,方便target根据name值进行定位。
             src:加载页面的路径
    
  2. 其他标签
    <meta> <link> <link re="stylesheet" type="text/css" href="./styles.css"> href:引入css文件的地址 <script> <script type="text/javascript" src=""></script> src:js的文件地址

  3. 特殊字符

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

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,172评论 1 41
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 989评论 0 1
  • HTML需要掌握标签 标签(空格分隔): H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 2,028评论 1 8
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139
  • 文/南墙北都 离比赛结束还有1.8秒,现在比分34:32,我们还落后2分! 这是一场由HB公司行政部组织的年度篮球...
    南墙北都阅读 683评论 3 5