HTML学习笔记

小小爱1990

已于 2024-02-01 14:08:29 修改

阅读量198

点赞数

分类专栏： Web开发文章标签： html

于 2021-05-23 23:31:05 首次发布

本文链接：https://blog.csdn.net/c39660570/article/details/117200644

版权

Web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了HTML5的基本结构和元素，包括标题、段落、链接、图片、表格、无序和有序列表、自定义列表以及表单元素的用法。此外，还展示了如何使用JavaScript进行简单的交互，如改变文本内容和样式。通过实例，读者可以快速掌握HTML5的基础知识。

摘要由CSDN通过智能技术生成

<!--
HTML：超文本标记语言
后缀为 .html 或 .htm
标签推荐使用小写
 -->

<!DOCTYPE html>  <!-- 声明为 HTML5，不区分大小写 -->
<html lang="zh"> <!-- 根元素 -->

<head> <!-- 头 -->
    <meta charset="utf-8">  <!-- 元数据，编码格式 -->
    <title>学习笔记</title>  <!-- 页面标题 -->
</head>

<body> <!-- 可见的页面内容 -->

<h1>我的第一个标题，h1到h6</h1>
<p>我的第一个段落。</p>
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->

<a href="https://www.csdn.net">这是一个链接 www.csdn.net</a>
<br><br>

<img loading="lazy"
     src="https://img.pconline.com.cn/images/upload/upc/tx/photoblog/1107/19/c2/8373140_8373140_1311046320283.jpg"
     width="258" height="200" alt="这是一个图片"/>
<br><br>

<!--
属性：
- class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
- id	定义元素的唯一id
- style	规定元素的行内样式（inline style）
- title	描述了元素的额外信息 (作为工具条使用)
 -->

<h4>表格:</h4>
<table>
    <caption>My Table</caption>
    <tr>
        <th>first</th>
        <th>second</th>
        <th>third</th>
    </tr>
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
    <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
    </tr>
</table>

<h4>无序列表:</h4>
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

<h4>有序列表:</h4>
<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

<h4>自定义列表:</h4>
<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

<h4>表单:</h4>
<form name="input" action="html_form_action.php" method="get">
    <fieldset>
        <legend>Personal information:</legend>
        <label>
            First name: <input type="text" name="firstname">
        </label>
        <br>
        <label>
            Last name: <input type="text" name="lastname">
        </label>
        <br>
        <label>
            Password: <input type="password" name="password">
        </label>
        <br>
        <label>
            <input type="radio" name="sex" value="male"> Male
        </label>
        <br>
        <label>
            <input type="radio" name="sex" value="female"> Female
        </label>
        <br>
        <label>
            <input type="checkbox" name="vehicle" value="Bike">I have a bike
        </label>
        <br>
        <label>
            <input type="checkbox" name="vehicle" value="Car">I have a car
        </label>
        <br>
        <label>
            <select name="cars">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat" selected>Fiat</option>
                <option value="audi">Audi</option>
            </select>
        </label>
        <br>
        <label>
            <textarea name="desc" rows="5" cols="30">我是一个文本框。</textarea>
        </label>
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </fieldset>
</form>
<br>

<h4>脚本:</h4>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

<script>
    document.write("Hello World!");
</script>
<br>

<p id="demo"> JavaScript 可以触发事件，就像按钮点击。 </p>

<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    }

    function myFunction2() {
        x = document.getElementById("demo"); // 找到元素
        x.style.color = "#ff0000";          // 改变样式
    }
</script>

<br>

<button type="button" onclick="myFunction()">点我</button>
<button type="button" onclick="myFunction2()">点击这里</button>

</body>
</html>