陈沫沫-初识HTML之基础篇

2016-12-25 本文已影响356人陈沫沫

前端认知

** 一、公司开发流程**
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> 表单是一个包含表单元素的区域，包含起来的都是表单的内容

<form>
<input type="text"/>
</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> 标签，可以在其中插入一段文字内容，它有两个经常使用的属性 rows 和 cols
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 上下合并

结束语

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

陈沫沫-初识HTML之基础篇

前端认知

HTML的基本结构

img标签的用法

关于列表的用法

表单

表格

结束语

猜你喜欢

热点阅读