HTML5基本元素的使用。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gfd54gd5f46/article/details/54562476

HTML5基本元素的使用。

HTML5:

  • 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)

HTML 编辑器推荐:

Notepad++:https://notepad-plus-plus.org/
Sublime Text:http://www.sublimetext.com/
HBuilder:http://www.dcloud.io/
WebStorm:https://www.jetbrains.com/webstorm/

个人推荐使用:WebStorm

  • 有很强的代码提示功能跟调试功能

HTML是由众多标签组成的,所以掌握了标签你就掌握了网页开发的的基础

  • 接下来只演示常用的一些标签,目的是为了能让初学者快速制作一个网页
<!--    -->     注释
<title>         标题
<a href=””>     网页连接
<from>          from表单
<input>标签


帐号:  <input type="text" name="username" id="username">
密码:  <input type="password" name="password" dir="password">

type:指定一个类型

1


HTML 标题(Heading)是通过<h1 > - <h6> 标签来定义的.


<h1>this is my page</h1>
<h2>this is my page</h2>
<h3>this is my page</h3>
<h4>this is my page</h4>
<h5>this is my page</h5>
<h6>this is my page</h6>

2


<br>        换行
<p>         换段
<b>         加粗


<div>   盒子

实例:文档中的一个区域将显示为蓝色:

    <div style="color:#0000FF"> 
        <h3>这是一个在 div 元素中的标题。</h3>
        <p>这是一个在 div 元素中的文本。</p> 
    </div>


多行文本框

<textarer cols="" rows=""> 

cols : 列
rows:  行

3


锚:

  • 设置锚:
<a name="mao1">
  • 链接锚:
<a href="#mao1">第一个锚</a><br>

图像链接

<img src="图片url或者觉得路径" alt=""> 
  • 通过获取网络图片的方式显示图片:
<img src="http://img.taopic.com/uploads/allimg/140513/235059-14051310145412.jpg" alt="小企鹅">
  • 通过绝对路径的方式显示图片:
<img  src="235059-14051310145412.jpg" alt="大企鹅">

4


background =”img.jpg” 背景图片

  • 给刚刚的多行文本框设置一个背景图片:
<textarea style="background: url('235059-14051310145412.jpg') " name="textarea" id="textarea" cols="20" rows="10" size="14"></textarea>

5

效果图:

6

表格标签

<table> 表格标签
<th>    标题
<tr><td>    列   


----------


<table width="500px" border="1" bgcolor="aqua" >
    <caption><h2>学生信息表</h2></caption>
    <tr bgcolor="#a52a2a">
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr >
        <td>1001</td>
        <td>张三</td>
        <td></td>
    </tr>
    <tr>
        <td>1002</td>
        <td>李四</td>
        <td></td>
    </tr>
</table>

7


没有更多推荐了,返回首页