Html初步认识及使用

首先在虚拟环境里面安装Webstorm,HTML是一种用来描述网页的标记性语言。

Html结构
<!--****************    1. <!DOCTYPE> 是HTML5声明      *************-->
    <!--,<!DOCTYPE> 必须是 HTML 文档的第一行,位于 <html> 标签之前。
    <!DOCTYPE>是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。-->
<!DOCTYPE html>
<html lang="en">
<!--************************    2. head标签       *************************-->
    <!-- head标签是所有头部元素的容器。head标签内的元素可包含脚本、样式表和提供页面的元信息等等。
    以下标签都可以添加到 head 部分:title、base、link、meta、script 以及style。
    头部的内容不会显示在浏览器的。 -->
<head>
<!--***********************     3. 设置字符集    ***********************    -->
    <!-- 设置字符集,如果字符集不对,可能导致乱码。一般建议utf-8国际编码 -->
    <!--<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />-->
    <meta charset="UTF-8">
<!--**************************  4.SEO标签     *****************************    -->
    <!-- SEO相关标签,title定义文档的标题,百度建议一般不要超过32位,
         meta定义页面关键词和页面的描述-->
    <title>个人博客</title>
    <meta name="keywords" content="python程序员,技术博客,个人博客">
    <meta name="description" content="博客是一个优秀的个人技术博客。博客记录了Linux学习,
    python开发与编程,Web前端开发,MySQL学习和教程,NoSQL数据库教程以及个人的人生经历和观点。">
    <!--关联其他让页面更加美化的css和javascripts-->
    <link rel="stylesheet" type="text/css", href="main.css"/>
    <script type="text/javascripts" src="main.js"></script>
</head>
<!--************************    5. 正文部分 ************************-->
<!-- 正文部分,所有在浏览器上可见的内容必须写在body标签内部 -->
<body>
this is a first html page!
hello world
</body>

</html>

Html常用标签

<!--**************      1. div标签    **********************-->
<!--<div> 可定义文档中的分区或节(division/section)。-->
<!--<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符-->
<!--<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
    如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。-->
<!--<div class="test">hello</div>-->
<!--<div class="test">world</div>-->
<!--<div id="navfirst">-->
<!--<ul id="menu">-->
<!--<li id="h"><a href="/h.asp" title="html教程">html教程</a></li>-->
<!--<li id="x"><a href="/x.asp" title="XML教程">XML教程</a></li>-->
<!--<li id="b"><a href="/b.asp" title="浏览器脚本">浏览器脚本</a></li>-->
<!--<li id="s"><a href="/s.asp" title="服务器脚本">服务器脚本</a></li>-->
<!--<li id="d"><a href="/d.asp" title="dot net教程">dot net教程</a></li>-->
<!--<li id="m"><a href="/m.asp" title="多媒体教程">多媒体教程</a></li>-->
<!--<li id="w"><a href="/w.asp" title="建站手册">建站手册</a></li>-->
<!--</ul>-->
<!--</div>-->
<!--**************      2. aside标签    **********************-->
    <!--<aside> 标签是 HTML 5 的新标签。-->
    <!--aside标签的内容可用作文章的侧栏,<span style="color: #ff0000;">html5新增标签</span>。-->
<!--<p>Me and my family visited The Epcot center this summer.</p>-->
<!--<aside>-->
<!--<h4>Epcot Center</h4>-->
<!--The Epcot Center is a theme park in Disney World, Florida.-->
<!--</aside>-->

<!--**************      3. header标签    **********************-->
    <!--header标签定义页面的头部(介绍信息),<span style="color: #ff0000;">html5新增标签</span>。-->
<!--<header> hello world </header>-->

<!--**************      4. section标签    **********************-->
    <!--section标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分,<span style="color: #ff0000;">html5新增标签</span>。-->

<!--<section>-->
  <!--<h1>PRC</h1>-->
  <!--<p>The People's Republic of China was born in 1949...</p>-->
<!--</section>--

<!--**************      5. footer 标签    **********************-->
    <!--footer 标签定义文档或节的页脚,通常包含文档的作者、版权信息、使用条款链接、联系信息等等,<span style="color: #ff0000;">html5新增标签</span>。-->

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-表格标签</title>
</head>
<body>
<h2> 案例1: 学生信息标签</h2>
<table width="500" cellpadding="8" cellspacing="5"  border="'1">

    <caption>学生信息表格</caption>
    <tr bgcolor="antiquewhite">
        <th>姓名</th>
        <th>地址</th>
    </tr>
    <tr>
        <td>学生1</td>
        <td>地址1</td>
    </tr>
    <tr>
        <td>学生2</td>
        <td>地址2</td>
    </tr>
    <tr>
        <td>学生3</td>
        <td>地址3</td>
    </tr>
    <tr>
        <td>主机4</td>
        <td>IP4</td>
    </tr>
</table>
<h2>案例2:合并列单元</h2>
<table border="1" cellpadding="10" width="500">
    <caption>主机信息表格</caption>
    <tr>
        <th>主机名</th>
        <th colspan="2">IP地址</th>
    </tr>
    <tr>
        <td>主机1</td>
        <td>IP1</td>
        <td>IP1</td>
    </tr>
    <tr>
        <td>主机2</td>
        <td>IP2</td>
        <td>IP2</td>
    </tr>
    <tr>
        <td>主机3</td>
        <td>IP3</td>
        <td>IP3</td>
    </tr>
    <tr>
        <td>主机4</td>
        <td>IP4</td>
        <td>IP4</td>
    </tr>
</table>
</body>

</html>


超链接标签

<h1><a name="C1">案例1:创建超级链接</a></h1>
<a href="http://www.baidu.com">不创建新窗口-百度一下</a>
<br/>
<a href="http://www.baidu.com" target="_blank">创建新窗口-百度一下</a>

<h2><a name="C2">案例2: 将图像作为链接</a></h2>
<a href="http://www.westos.org/" target="_blank"><img src="westosLogo.png"></a>

序列化标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-序列化</title>
</head>
<body>
<h2>无序列表</h2>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascripts</li>
</ul>
<h2>无序列表</h2>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascripts</li>
</ol>
<h2>嵌套列表</h2>
<dl>
    <dt>HTML</dt>
    <dd>h1-h6</dd>
    <dd>span</dd>
    <dd>div</dd>
    <dd>hr</dd>
    <dt>CSS</dt>
    <dd>CSS-1</dd>
    <dd>CSS-2</dd>
    <dd>CSS-3</dd>
</dl>
</body>

</html>


表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-表单标签</title>
</head>
<body>
<h2>用户注册</h2>
<from action="#" method="get">
    <span>用户名:</span><input type="text"><br/>
    <span>密码:</span><input type="password"><br/>
    <span>确认密码:</span><input type="password"><br/>
    <span>个人简介:</span><input type="password"><br/>
    <textarea></textarea>
    <br/>
    <span>性别:</span>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女<br/>
    <span>邮箱:</span><input type="text"><br/>
    <span>出生日期:</span><input type="text"><br/>
    <span>籍贯:</span>
    <select name="籍贯">
        <option value="python">Python</option>
        <option value="java">JAVA</option>
        <option value="python">Python</option>
        <option value="c">C</option>
        <option value="c++">C++</option>
    </select>
    <input type="submit" value="注册">
    <input type="reset" value="重置"》
</from>
</body>

</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值