初识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图片标签与路径
- 常用的图片格式
jpgpnggif gif(只支持全透明的)Jpeg/jpgpng(半透明/全透明都支持)
- 常用的图片格式
- 图片四要素
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>标签，可以在其中插入一段文字内容，它有两个经常使用的属性rows和colsrows表示这个文本域有多少行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上下合并
结束语
很多时候，我们不缺方法，缺的是一往无前的决心和魄力。不要在事情开始的时候畏首畏尾， 不要在事情进行的时候瞻前顾后，唯有如此，一切才皆有可能。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2016-12-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读