码迷,mamicode.com
首页 > Web开发 > 详细

web前端开发入门HTML5知识点

时间:2019-10-22 10:33:03      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:格式化   建立   storm   定义   内容   input   pass   一个   开发环境   

1、首先我们先了解一下什么是前端,简单说,就是我们平常所浏览的网页啊,以及app首页和小程序。

2、我们经常访问浏览器的时候,经常会输入网址,又可称为域名http://www...com.
有时候是http有时候又是https,二者的区别在于后者更加安全些,有秘钥。www就是万维网,后缀com、org、edu、cn以及DNS称为域名。

3、web开发设计的基础之一是html。html基本框架有以下几部分组成:
结构
<html>
<!DOCTYPE html> .//声明网页类型
lang="en" // 语言 en ch
<meta charset="UTF-8"> //信息标签 charset="UTF-8" 网页的编码类型 utf-8
<head>
<title>标题</title>
</head>
<body>
内容
</body>
</html>
以上标签都是带结尾的闭合,当然也有自闭和。

3、了解过html的结构,下面我们配置开发环境,我所用的软件是JetBrains WebStorm10.这个软件是要钱的,然后登录后首先进入File-setting-font-color 或者alt+ctrl+s设置字体大小和颜色。然后在file-new-dicrectory新建一个目录,然后在这目录下建html5文件 即file-new-html5 file.

4、创建完一个文件后,了解基本用法和相关标签
alt+F2 浏览或右上角也可快速浏览
按alt键+鼠标单击,可以在不同地方输入相同文字
在每一行的末尾ctrl+D 进行行复制
输入lorem按tab键,可以添加测试文本
p*数字 按tab键,可以输入多行标签P

5、建立一个网页
在body下编辑内容,设计网页常用标签

a)超链接
<a href="链接的目标地址" target="打开目标窗口"></a>
target: _blank 在新窗口打开
_parent 在源窗口打开锚记:

1、跳转到同一个页面的不同位置
在跳转位置处添加一个锚记,<a name="名称"></a>
创建链接 <a href=“#锚记名称”>点击内容</a>

2、跳转到不同页面的不同位置
在跳转位置处添加一个锚记,<a name="名称"></a>
创建链接 <a href=“文件名#锚记名称”>点击内容</a>

b)发送邮件:mailto:邮箱地址
c)路径:
绝对路径 :从根目录开始
相对路径 :从当前目录开始
d)常用标签
水平线 <hr width="宽度" color="颜色" size="线粗细"/>
html注释 <!--注释文本--> ctrl+shift+/
换行 <br/>
空格:   全角状态下空格
标题 h1~h6
<pre></pre> 预格式化
<em></em>斜体 <i></i>
<b></b>加粗 <strong></strong>
<big></big>字体放大 <small></small>
<code></code>放置代码
<del></del>删除线
<sub></sub>下标
<sup></sup>上标
单位: 像素( px) 百分比(%) em rem

图片插入所用标签:
<img src="图片路径" alt="信息提示" title=“图片描述” width=“图片宽度”height=“图片高度”/>

e)表格
<table border="边框线" cellspacing="边框单元格间距" cellpadding="单元格填充" width="表格宽度">
<caption>表头</caption>
<tr>
<th>标题行</th>
</tr>
<tr align="对方方式">
<td>单元格</td>
</tr>
</table>
跨行跨列
rowspan colspan

f)列表
无序列表
<ul type="">
<li></li>
</ul>
type:disc(默认实心圆) square 方块 circle 空心圆
有序列表
<ol type="" start="">
<li></li>
</ol>
type:1 a A i I start:起始位置
自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
g)表单
文本框 <input type="text"/>
密码框 <input type="password"/>
单选按钮 <input type="radio"/>
复选框 <input type="checkbox"/>
文件域 <input type="file"/>
按钮 <input type="submit"/> 提交
<input type="reset"/> 重置
<input type="button" value="值"/>
<button></button>
下拉列表
<select>
<option></option>
<option selected></option>
</select>
文本域
<textarea rows="行数" cols="列数"></textarea>

h)表单分组
<fieldset>
<legend></legend>
name:~~
</fieldset>
label 标签

web前端开发入门HTML5知识点

标签:格式化   建立   storm   定义   内容   input   pass   一个   开发环境   

原文地址:https://blog.51cto.com/14584021/2444288

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!