HTML学习笔记

最新推荐文章于 2024-07-26 00:30:42 发布

+ran

最新推荐文章于 2024-07-26 00:30:42 发布

阅读量36

点赞数 1

文章标签： html 学习笔记

本文链接：https://blog.csdn.net/2301_79729136/article/details/134535365

版权

HTML，全称HyperText Markup Language，是创建网页的基础语言。本文记录为期两天的HTML学习笔记。

HTML文档结构

一个基本的HTML文档包括头部(<head>)和主体(<body>)，所有的这些内容都包裹在<html>标签中。

<!DOCTYPE html>
<html>

<head>
    <!-- 页面的元数据，如标题，链接到的CSS样式表等 -->
</head>

<body>
    <!-- 页面的主体内容 -->
</body>

</html>

HTML元素

HTML元素由开始标签，内容和结束标签组成。
常用的HTML元素如下：
<h1></h1> - <h6></h6>标题标签
<p></p>段落标签
<br/>换行标签（单标签）
<a>超链接标签
<img>图像标签
<div></div>'大盒子’标签
<span></span>'小盒子’标签

文本格式化标签
常用文本格式化标签

尝试表单设计

HTML表单用于收集用户输入。下面呈现一个简单的注册页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>个人信息</h1>
    <table width="500">
        <tr>
            <td>性别</td>
            <td><input type="radio" name="sex" id="nan"><label for="nan"><img
                        src="C:\Users\jiara\Desktop\python全栈\pink前端基础带资料\基础部分\02-前端基础第二天-HTML5基础\案例\images\man.jpg"></label>男
                <input type="radio" name="sex" id="nv"><label for="nv"><img
                        src="C:\Users\jiara\Desktop\python全栈\pink前端基础带资料\基础部分\02-前端基础第二天-HTML5基础\案例\images\women.jpg"></label>女
            </td>
        </tr>
        <tr>
            <td>生日：</td>
            <td>
                <select>
                    <option>请选择年</option>
                    <option>2005</option>
                    <option>2006</option>
                    <option>2007</option>
                </select>
                <select name="" id="">
                    <option value="">请选择月</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select name="" id="">
                    <option>请输入日</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                </select>
            </td>
        <tr>
            <td>所在地区：</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td><input type="radio" name="wed" value="qq">未婚<input type="radio" name="wed" value="qq">已婚</td>
        </tr>
        <tr>
            <td>
                学历：
            </td>
            <td><input type="text"></td>
        </tr>
    </table>



    <table>
        <td>自我介绍：</td>
        <td><textarea name="" id="" cols="30" rows="10"></textarea></td>

    </table>
    <hr>
    <input type="button" value="免费注册"><br>
    <input type="radio">我同意条款<br>
    <a href="https://www1.szu.edu.cn/">我是会员，立即登录</a><br>
    </form>
    <ul>
        <li>
            <h1>我承诺</h1>
        </li>
        <li>年满18</li>
        <li>爱党</li>
        <li>爱国</li>
    </ul>
</body>

</html>

在此页面中，主要使用以下标签：
<tr> 标签：用于定义表格中的行。
<td> 标签：用于定义表格中的单元格。
<select> 和 <option> 标签：用于创建下拉选择框。
<form> 标签：用于创建HTML表单以收集用户输入。
<input> 标签：用于创建输入字段。
<button> 标签：用于创建提交按钮。