初识HTML之基础篇

前端认知


一、公司开发流程 1、 产品需求(产品经理给需求文档) 2、项目设计(视觉设计师给PSD文件,交互设计师配合) 3、前端开发 4、后端开发 5、测试 6、上线运营

二、前端开发的核心语言 HTML 超文本标记语言 (负责页面结构) CSS 层叠样式表 (负责页面样式) JS 脚本语言 (负责页面行为)


HTML的基本结构

<!DOCTYPE html>    /*文档头声明*/<html lang="en">   /*HTML中的根元素*/<head>     /*head标签内部的内容绝大部分是不可见的*/    <meta charset="UTF-8">   /*定义html页面的元数据,meta中的charset属性,针对搜索引擎和解析格式的属性*/    <title>Document</title>  /*定义文档的标题,在页面中可见 */</head><body>
    /*主要书写页面中的内容*/</body></html>
  • HTML中的单标签 <br> <hr> <meta> <img> <input..> <option.> <link>
  • HTML中基本标签
    • <div></div>双标签
    • <h1>----- <h6>双标签 一级标题至六级标题
    • <p></p>双标签 段落标签
    • <strong>双标签 用于强调文本 表示重要的文本
    • <span> 双标签 用来组合文档中的行内元素
    • <pre> 双标签 文字的格式按源码的排版来显示,我们称之为预处理格式
    • <a>双标签 --> 它有一个必不可少的属性 href ■ target属性 ■ _self (在原来页面打开) ■ _blank (新窗口打开) ■ _top (打开是忽略所有的框架) ■ _parent (在父窗口中打开)
    • 创建锚点和锚链接 ■ 锚点也是一种超链接,是页面内进行跳转的超链接 第一步:创建锚点 ``<a name="锚点链接"></a>`` 第二步 : 使用创建好的锚点名称 ``<a href="#锚点名称">内容</a>``
    • marquee 标签 可以创建一个滚动效果 <marquee direction="down" loop="4" onmousenver=this.stop( ) onmouseout=this.start( )></marquee>
  • direction 表示滚动方向,取向有(left,right,up,down,默认left)
  • loop 表示滚动循环的次数,默认为无线循环 onmouseover=this.stop( ) onmouseover=this.start( ) scrollamout="1"(滚动速度)

img标签的用法

  • img图片标签与路径
    • 常用的图片格式 jpg png gif
    • gif (只支持全透明的)
    • Jpeg / jpg
    • png(半透明/全透明都支持)
  • 图片四要素
    • src=" " 图片路径
    • alt=" " 图片含义
    • width=" " 图片宽度 尽量与图片大小保持一致
    • height=" " 图片高度 尽量与图片大小保持一致
  • 图片标签的写法
    • <img src=" " alt=" " width=" " height=" " />
  • 关于路径的小知识
    • 相对路径:(Relative Path)相对于该文件的路径;
    • 绝对路径:(Absolute Path)从磁盘出发的路径;
    • / 开头表示根目录
    • ./ 表示当前目录;
    • ../ 上级目录
    • 直接用文件名不带 / 也表示同一目录

关于列表的用法

  • Number1
    • <ul> 无序列表
    • 无序列表顾名思义就是一个没有顺序项目的列表,此列表项默认粗体圆点 <ul> <li></li> <li></li> <li></li></ul>
  • Number2
    • <ol> 有序列表
    • 有序列表也是一列项目,只是列表项目使用的是数字进行标记. <ol> <li>内容一</li> <li>内容二</li> <li>内容三</li></ol>
  • 列表嵌套
    • 无序列表--嵌套 <ul> <li>布朗熊 <ul> <li>海绵宝宝</li> <li>多啦A梦</li> </ul></li><li>派大星</li><li>海马</li></ul>
    • 无序列表--嵌套 <ol> <li>布朗熊 <ol> <li>海绵宝宝</li> <li>多啦A梦</li> </ul></li><li>派大星</li><li>海马</li></ol>
  • Number3
    • dl 定义列表
    • 定义列表不仅仅是一列项目,而是项目及其注释的组合。定义列表 <dl> 标签开始。每个定义列表项以 <dt>开始。每个自定义列表项的定义以 <dd>开始 <dl> <dt>男装</dt> <dd>衬衫</dd> <dd>裤子</dd> <dt>女装</dt> <dd>卫衣</dd> <dd>裙子</dd></dl>
  • <dt><dd>都必须放在<dl>标签内部之间使用
  • dd是对dt的解释
    • <dl>是用来创建一个普通列表
    • <dt>是用来创建列表中的上层项目
    • <dd>用来创建列表中最下层的项目

表单

  • 表单标签
    • <form> 表单是一个包含表单元素的区域,包含起来的都是表单的内容 <form><input type="text"/></form>
    • <form> 表单标签
  • 关于<input>标签
    • <input type=" " name= " " value=" " />
    • type="text" 单行文本输入框
    • type="password" 密码 (maxlength=" "
    • type="radio" 单项选择(checked="checked"
    • type="checkbox"多项选择
    • type="button" 按钮
    • type="submit" 提交 type="image" 图片提交
    • type="file" 上传文件
    • type="reset" 重置
    • type="hidden"隐藏
  • textarea 没有默认值
  • <label>标签的使用
    • <label></label> 标签的 for属性应当与相关元素的id属性相同
    • 举个例子 <p>单选</p><label for="boy">男 <label> <input type="radio" name="sex" id="boy"/><label for="girl">女 <label> <input type="radio" name="sex" checked="check"/>
  • <textarea> 文本标签
    • <textarea></textarea> 标签,可以在其中插入一段文字内容,它有两个经常使用的属性 rowscols
    • rows 表示这个文本域有多少行
    • cols 表示这个文本域有多少列
  • <select> 标签的掌握

表格

  • <table></table> 表格标签 用于定义一个表格
    • <tr></tr> 定义表格中的行,一个 <tr></tr>表示一行
    • <td></td> 定义表格中的单元格, 一个<td></td>表示一个单元格
    • 举个例子 <table border="1"><tr> <td>姓名</td> <td>年龄</td></tr><tr> <td>姓名</td> <td>年龄</td></tr></table> ■ border-cellspacing 属性 用来设置是否将表格的边框折叠为单一边框 ■ colspan 左右合并 ■ rowspan 上下合并

结束语

很多时候,我们不缺方法,缺的是一往无前的决心和魄力。不要在事情开始的时候畏首畏尾, 不要在事情进行的时候瞻前顾后,唯有如此,一切才皆有可能。


原文发布于微信公众号 - 大数据钻研(bigdata118)

原文发表时间:2016-12-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

5599
来自专栏Material Design组件

Material Design —Tabs

38210
来自专栏极乐技术社区

wxss学习《五》所有以a,b开头的属性

整理下小程序里所有的css属性吧,这样也能好查询,按照字母表列举: a 共有15个属性:其中9个为动画animation的属性。详情如下: ? ? 1.addi...

2328
来自专栏韩东吉的Unity杂货铺

零基础入门 8: Canvas和EventSystem

UGUI是新版Unity自带的原生UI系统,组件也在不断的增加扩展,基本的贴图,文本,按钮等还是可以用的。接下来的几篇内容会以UGUI展开分享。

1413
来自专栏三木的博客

HTML概要

HTML CSS Javascript 的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 CSS...

3199
来自专栏非著名程序员

基础篇章:关于 React Native 之 ToolbarAndroid 组件的讲解

组件已经讲了不少了,相信大家对React Native都已经有了很多了解和自己的理解了,相信聪明的开发者已经发现了,这些组件的用法和我们原生开发中控件都是类似的...

23710
来自专栏CaiRui

Html再学

1.  Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字、图片、视频等。 2.  CSS样式是展现。就像网页的外衣。比如,标题...

2856
来自专栏Micro_awake web

谈谈html中一些比较"偏门"的知识(map&area;iframe;label)

说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象。也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素。 常见的有:<br>...

2476
来自专栏Material Design组件

Material Design — 菜单(Menus)

42410
来自专栏互联网软件技术

本地多图上传预览

2272

扫码关注云+社区

领取腾讯云代金券