小学期web实训笔记（1）-html【菜狗级】

原创已于 2022-10-27 19:08:19 修改 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #dreamweaver #javascript

于 2022-10-27 19:02:49 首次发布

22夏季小学期前端实训专栏收录该内容

3 篇文章

订阅专栏

博客介绍了HTML相关知识，指出HTML无运算功能，以标签组织页面内容，格式较枯燥，而CSS可让内容展示更丰富。还详细阐述了HTML标签，包括杂项、分类，单双标签特点，以及表格、列表、表单等组合标签。

HTML

<a href="http://www.4399.com">4399小游戏</a>
<!-- 超链接标签，可以带上其他网站 -->
<!--新窗口打开连接 target设置页面打开方式
        _self 替换  
        _blank 新建空白页打开  
        _parent html中存在双重嵌套  iframe frameset(基本废弃)
-->
<a href="http://www.baidu.com" target="_blank">百度</a>

<img src="img/ntt.png" width="200px" height="200px">
<!-- 图片标签，可以在网页内插入图片，修改大小 -->

<hr >  <!-- 一条横线 -->
<br >  <!-- 网页内换行 -->
<b>加粗</b>   <strong></strong>  <!--加粗标签-->
<i>斜体</i>   <em></em><!--斜体标签 -->

<sup></sup> <!--上角标标签 upup-->
n<sup>2</sup>
<sub></sub> <!--下角标标签 bottom-->
H<sub>2</sub>O

<span></span> <!--span标签 无显示 仅配合css进行布局-->

组合标签

表格

<!--表格-->
        <h1>表格</h1>
        <table border="1" cellspacing="0" cellpadding="10"width="90%">  
            <!--表格最外层标签  边框的宽度为1 边框颜色  边框大小-->
            <caption></caption>
            <tr>    <!--表格的一个行  t row    t h表格的一表头，加粗居中-->
                <td>第一行第一个单元格</td>
                <td>第一行第二个单元格</td>
                <td>第一行第三个单元格</td>
            </tr>
            <tr>
                <td>第二行第一个单元格</td>
                <td>第二行第二个单元格</td>
                <td>第二行第三个单元格</td>
            </tr>   
            <tr>
                <td>第三行第一个单元格</td>
                <td>第三行第二个单元格</td>
                <td>第三行第三个单元格</td>
            </tr>

列表

<!--列表-->
            <h1>有序列表</h1>
                <ol> order list
                    <li>第一项</li>  list item
                    <li>第二项</li>
                    <li>第三项</li>
                </ol>
            <h1>无序列表</h1>   <!--使用最多 可应用于css控制排列方式-->
                <ul>
                    <li>第一项</li>  
                    <li>第二项</li>
                    <li>第三项</li>
                </ul>
            <!--自定义列表 define list  基本上不用了-->    
            <h1>自定义列表</h1>
                <dl>
                    <dt>标题</dt><!--标题--><dd>内容</dd><!--内容-->
                    <dt>标题</dt><dd>内容</dd>
                    <dt>标题</dt><dd>内容</dd>
                    <dt>标题</dt><dd>内容</dd>
                </dl>

表单

<!--表单-->
        <form action="表单数据提交的地址，服务器能接受表单数据的页面" method="设置HTTP请求方式，get/post">   
            <!--method传输协议-->   
            <!--表单元素 可放在form内 并可以向服务器提交数据的标签-->
            <input type="input类型" name="提交时数据的名字，参数名" placeholder="输入框的提示信息" value="默认值"/> <!--默认值或者对应值-->
            <!--input类型  
            text 文本输入框
            password 密码输入框
            -->
            
        </form>
        
        <form action="" method="get">
            账号：
            <input type="text" name="username" placeholder="请输入账号" value=""/>
            <br >
            密码：
            <input type="password" name="password" placeholder="请输入密码" value=""/>
            <br />
            体重：
            <input type="number" name="weight" placeholder="请输入体重" value=""/>
            <br />
            邮箱：
            <input type="email" name="email" placeholder="请输入邮箱" value=""/>
            <br />
            照片：
            <input type="file" name="photo" placeholder="请上传照片" value=""/>
            <br />
            性别：<!-- 单选按钮 -->
            <input type="radio" name="sex" value="男" checked/>男  
            <!--凭name都叫sex,自动组成组    checked使默认选中-->
            <input type="radio" name="sex" value="女"/>女
            <br>
            爱好：<!-- 复选按钮 -->
            <input type="checkbox" name="hobby" value="吃饭"/>吃饭
            <input type="checkbox" name="hobby" value="睡觉"/>睡觉
            <input type="checkbox" name="hobby" value="打豆豆" checked/>打豆豆
            <br />
            班级：<!--下拉列表-->
            <select name="clazz">
                <option value="BD01">软工01</option>
                <option value="BD02" selected>软工02</option>
                <option value="BD03">软工03</option>
                <option value="BD04">软工04</option>
                <option value="BDcx">软工创新</option>
            </select>
            <br>
            个人信息：<!-- 多行文本域 -->
            <textarea name="" id="" cols="50" rows="5"></textarea>
            <br>
            
            
            <!-- 按钮1： -->
            <input type="submit" value="立即提交"/>
            <!-- <br /> -->
            <!-- 按钮2: -->
            <input type="reset" value="重新填写"/>
            <br />
            
            <!-- 按钮3 button双标签可以嵌套图片 input按钮不行-->
            <button></button>
            
            
        </form>