专栏首页大数据钻研初识HTML之基础篇

初识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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 认识html元素

    前端现在越来越火,可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础,但是想转到前端的人”一点帮助。 认识一个html文档的基...

    用户1667431
  • 能用HTML/CSS解决的问题就不要使用JS

    为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例...

    用户1667431
  • HTML 入门笔记 - 初识HTML

    基础框架 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/ht...

    用户1667431
  • HTML学习

    当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。

    Cloud-Cloudys
  • python爬虫常用库之BeautifulSoup详解

    这是日常学python的第16篇原创文章 经过了前面几篇文章的学习,估计你已经会爬不少中小型网站了。但是有人说,前面的正则很难唉,学不好。正则的确很难,有人说...

    sergiojune
  • 这些HTML标签你知道吗?

    包含有序列表 <ol></ol> and 无序列表 <ul></ul>,列表项由<li></li>显示,其中有序列表的列表项以数字开头,无序列表的列表项...

    佛系编程人
  • c# (nop中)下拉列表(有外键)

    1.在操作的界面Model中建立public List<SelectListItem> xxx(取名){ get; set; }

    wfaceboss
  • 产品经理如何让程序员放下手中的刀?

    众所周知,产品经理跟程序员属于死对头岗位,程序员跟产品经理因为需求打起来的新闻更是屡见不鲜,甚至还出现过程序员暴力砍人的事件,因此一干产品甚至开玩笑说产品这个行...

    Fundebug
  • 业界 | 苹果将在年底推出专职网站,处理全球执法机构数据请求

    互联网巨头正在遭受前所未有的监管压力,尤其是在数据所有权方面。苹果正在率先采取应对措施。

    大数据文摘
  • 【干货】机器学习知识体系思维导图,一图让你理解所有概念

    机器学习 思维导图 / 速查表 思维导图集从数据分析到深度学习来汇总机器学习概念 Overview 机器学习是计算机科学的一个子领域,使计算机不需要明确的编程步...

    WZEARW

扫码关注云+社区

领取腾讯云代金券