HTML入门学习 -- HTML基础知识

时间:2022-01-24 14:01:38

 打算按照 HTML -> CSS –> JavaScript –> jQuery –> HTML5 –> WebGL 的顺序,简略学习一下Web前端技术。

    因为不是搞Web的,只需要大概过一下有个印象就行,每一项花费3天到一周时间走马观花的看看。

编辑器就选择Sublime Text 2,非常舒服的一编辑器。除了C#、VB等用Visual Studio占有绝对优势的语言,其它的Sublime Text 2基本上都算非常好的选择了。尤其是Fortran这样科学计算比较冷门的语言,我目前尝试的只有Vim和Sublime Text 2加上插件后比较舒服,Vim的适应时间则比较长。 

     http://www.w3school.com.cn/  是一个非常好的Web前端技术学习平台,以及它的新版

http://w3schools.com/

1. 基础知识 

HTML入门学习 -- HTML基础知识
<html>
<head>
    <title>标题栏题目:杨韬HTML学习1 2012.11.10</title>
    <!-- 内部样式表 -->
    <style type="text/css">
        h1{background: red}
    </style>  
</head>
<body>
    <h1>一级标题</h1>
    <h4 align="center">通过属性居中</h1>
    <p>段落</p>
    <!-- 内联样式表 -->
    <p style="color:red; background:blue" >body内为可见内容</p>
    <a href="http://www.baidu.com"  target="_blank">target新的窗口打开超链接</a>
    <a href="1.html">在当前目录下超链接</a>
    嵌套图像连接
    <a href="http://www.baidu.com">    
        <img src="http://www.baidu.com/img/baidu_sylogo1.gif"/>
    </a>
    <a href="#biaoqian">跳转到当前页的标签处</a>
    <p><a name="biaoqian">标签锚定处</a></p>
    <p>
        图像<img src="http://www.baidu.com/img/baidu_sylogo1.gif">
        限定尺寸图像<img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="100" height="50">
    </p>

    <b>粗体</b>    
    <sub>下标</sub> <sup>上标</sup>
    <b><i>斜体</i></b> <!-- 字体可以嵌套 -->
    <big>大号字体</big> 
    <em>斜体</em>
    <del>删除线</del>
    <ins>下划线</ins>

    <div>节</div>
    <hr/><!-- 水平线 -->
    <table border="1">
        <tr>
            <th colspan="2">表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
        </tr>
    </table>

    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

    <ol>
        <li>有序列表</li><!-- order次序 -->
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

    <dl>
        <dt>定义列表</dt>
            <dd>列表项</dd>
            <dd>内部可以使用段落、换行符、图片、链接以及其他列表</dd>
            <dd>列表项</dd>
        <dt>定义列表</dt>
            <dd>列表项</dd>
            <dd>列表项</dd>
            <dd>列表项</dd>
    </dl>
</body>
</html>
HTML入门学习 -- HTML基础知识

 

2.布局 

HTML入门学习 -- HTML基础知识
<html>
<head>
    <title>HTML学习2 布局 杨韬 2012.11.10</title>
    <!-- 添加样式 -->
    <style type="text/css"> 
        /*布局颜色*/
        div#head {background-color: #99bbaa;}/*背景色*/
        div#menu {background-color: blue; 
            height: 200px; 
            width: 100px; 
            float: left;    /*float位置*/
            /*text-align: center;/*文字居中*/*/
            }    
        div#constent {background-color: yellow; height: 200px;width: 400px; float: left;}
        div#footer {background: green; 
            clear:both;/*有这一行才能在下边显示*/
            text-align:center;}/*文字居中*/

        /*项目边框*/
        h1 {margin-bottom: 0;}/*h1底部间距=0各个块才能没有空隙*/
    </style>    
</head>

<body>
    <div id="head">        <!-- 添加4个分块 id可自己命名-->
        <h1>头部</h1>        
    </div>
    <div id="menu">
        <h1 align="center">菜单</h1><!-- 文字居中显示 -->
        <ul><!-- 无序列表 -->
            <li>标题1</li>
            <li>标题1</li>
            <li>标题1</li>
        </ul>
    </div>
    <div id="constent">
        <h1>内容</h1>
    </div>
    <div id="footer">
        <h1>底部</h1>
    </div>
</body>
</html>
HTML入门学习 -- HTML基础知识

 

3. 表单

HTML入门学习 -- HTML基础知识
<html>
<head>
    <title>HTML学习3 杨韬</title>
</head>
<body>
    <form> <!-- 表单 包含表单元素的区域-->
        <fieldset><!-- 外边框 -->
        <legend>边框文字</legend>
        文本框
        <input type="text" name="" value="" placeholder="">
        </fieldset>

        <br/><!-- 换行 -->
        <input type="button" name="" value="按钮">
        <br/>
        <input type="radio" name="sex" value="" placeholder="****"><!-- placeholder占位符 -->
        <input type="radio" name="sex" value="" placeholder="">
    </form>

    <textarea>文本域 输入大量文本</textarea>
    <button>按钮 比input的button提供更多功能</button>
    <select name="下拉菜单" multiple>
        <option value="">下拉菜单1</option>
        <option value="">下拉菜单2</option>
        <option value="">下拉菜单3</option>
        option
    </select>
</body>
</html>