您的位置：首页 > Web前端 > HTML5

h5入门基本标签的认识和掌握

2016-09-27 19:10 387 查看
Day1:

H5深入学习课程

-HTML+CSS3 -->简单，杂而多，多测试多项目

-JS/JQ -->原生Js ->JQ ->项目

-Ajax -->PHP/原生Ajax+JQ-Ajax->项目

-H5 –>移动端（IOS，Android，WebApp，微信）->移动端项目

h5中标签的分类主要有 （JS中称为结点也称为元素）

块标签：骨架

内联标签（行内标签）：填充骨架

<></>

H5：标签

JS：节点、元素

主用atom编程，其中使用的快捷输入来自github插件安装到atom

H5版本声明

<!DOCTYPE html>

中文编码

<meta charset="UTF-8">

搜索引擎优化

Meta标签中的name设置 keywords description

img 专门用于显示图片 ,img可是设置宽高 。

可替换标签：显示的内容不是由标签内的内容决定的，

而是由其属性决定的。e.g：img,video...

特征：1.可设置宽高

Form表单

Action里面写的是后台文件名

前后台文件放到服务器文件上（www）127.0.0.1

<!-- 设置浏览器兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">


<!-- Html标签分为两种-->

<!--

1.块标签

a。独占一行

b。可以设置宽高

-->

<!--

1.div：无语义标签->通俗点，什么都可以显示->一般用于做容器

-->

<div style="background:red;height:100px;width:100px;">i am div</div>test

<!-- h1-h6 -->

<!-- h${我是标题$}*6 -->

<h1 style="background:red;">我是标题1</h1>

<h2>我是标题2</h2>

<h3>我是标题3</h3>

<h4>我是标题4</h4>

<h5>我是标题5</h5>

<h6>我是标题6</h6>

<!--ordered list-->

<!-- ol>li*3 -->

<ol style="background:red;">

<li>1</li>

<li>2</li>

<li>3</li>

</ol>

<!--unordered list -->

<ul style="background:red;">

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<!--ul/ol/li 都是块标签 -->

<!--define list -->

<dl style="background:red;">

<!--define title -->

<dt>台风鲇鱼</dt>

<!--defien description -->

<dd>今年国庆</dd>

</dl>

<!--dl/dt/dd 都是块标签 -->

<!--Lorem10 随机十个单词 -->

<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, accusamus. -->

<!-- table -->

<!-- table是由行构成的，行是由列构成的->二维结构 -->

<table border="1">

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

</table>

<!--段落标签 -->

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, rerum?</p>

<p style="text-indent:2em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, omnis.</p>

<!--换行标签 -->

<br>

<br />

<!--行内标签，在一行内显示

a。在一行内显示

b。不能设置宽高

-->

<!--span 无语义行内标签，一般作为容器,内容撑开宽高，换行会增加间距-->

<span>我是span</span>test<span>666</span>

<!--行内元素的对齐方式？ -->

<!-- 链接 -->

<!--

target属性:

_blank ： 在新窗口中打开链接

_parent ： 在父窗体中打开链接

_self ： 在当前窗体打开链接,此为默认值

_top ： 在当前窗体打开链接，并替换当前的整个窗体(框架页)

-->

<!--title 链接说明 -->

<a href="http://www.baidu.com" title="百度一下" target="_blank">百度</a>

<!--页面内跳转，锚点 -->

<a href="">H5+css</a>

<a href="#js">js</a>

<a href="">php</a>

<a href="">移动端</a>

<div id="js">锚点</div>

<div></div>

<div></div>

<!--img 专门用于显示图片 ,img可是设置宽高 。

可替换标签：显示的内容不是由标签内的内容决定的，

而是由其属性决定的。e.g：img,video...

特征：1.可设置宽高

-->

<!--‘.’ 表示当前路径 -->

<!--‘..’ 表示根路径 -->

<!--alt 图片加载失败后的说明 title 图片的提示 -->

<img src="" alt="" title="" style="width:100px;height:100px;">

<!--var，strong，em 表示强调 -->

<!--倾斜 -->

<var>我是强调</var>

<!--加粗 -->

<strong>我是强调</strong>

<!--倾斜 -->

<em>我是强调</em>

<!--var、strong、em:一般情况下会被降级使用span -->

<!--i，b h5新增标签 -->

<i>斜体</i>

<b>加粗</b>

<!--表单：一般用于向服务器提交信息 -->

<!--method:get/post -->

<!--form块标签，input行内标签 内部基本是行内标签-->

<!--input 可替换行内标签，可设置宽高 -->

<form action="index.php" method="post">

用户名：<input type="text" name="username" style="width：100px;height:50px;">

密码：<input type="password" name="pwd">

<input type="submit" value="登陆">

<!--文件浏览 -->

<input type="file">

<!--单选框 -->

<input type="radio" name="sex">男

<input type="radio" name="sex">女

<!--多选框 -->

<input type="checkbox">HTML

<input type="checkbox">JS

<input type="checkbox">JQ

<input type="button" value="按钮"> <br>

<input type="submit" value="登陆"> <br>

<input type="reset" value="重置">

<!--文本域 cols 列 rows 行 -->

<textarea cols="5" rows="40"></textarea>

<!--下拉列表 -->

<select>

<option value="">北京</option>

<option value="">上海</option>

<option value="">广州</option>

<option value="">深圳</option>

</select>

</form>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  h5 标签
相关文章推荐
新的分享
章节导航