Web前端学习笔记①-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52430605/article/details/132298958

本文介绍了Web前端开发的基础知识，包括Web标准的构成（HTML、CSS和JavaScript），HTML文件的基本结构，常见的网页标签如标题、段落、图片、音频、视频、超链接等，以及SEO优化和表单的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web前端学习笔记①

1.Web标准的构成

Web标准由三部分组成，分别是HTML，CSS和JavaScript

构成	语言	说明
结构	HTML	页面元素和内容，比如图片、文字、音频、视频
表现	CSS	网页元素的外观和位置等页面样式，比如颜色、大小、排列方式
行为	JavaScript	网页模型的定义与页面交互，比如动画、实时变化的数值

2.html文件基本结构

<!-- 文档类型声明：告诉浏览器以html5标准渲染页面 -->
<!DOCTYPE html> 
<!-- 页面的编写语言为英文en -->
<html lang="en">
<!-- 页面头部 -->
<head>
    <!-- 页面编码设置：utf-8 万国码 该编码方式可以支持全球所有的语言 -->
    <meta charset="UTF-8">
    <!-- IE浏览器兼容处理：将当前IE浏览器按照 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动端界面适配： -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题 -->
    <title>(*´▽｀)ノノ</title>
    <!-- SEO优化：提高页面的搜索排名概率，keywords关键字 -->
    <meta name="keywords" content="">
</head>
<!-- 页面内容/身体 -->
<body>
    <!-- 具体的网页内容 -->
</body>
</html>

3.网页中的常见标签

3.1 h1：标题

< h1 >,< h2 >,< h3 >分别代表一级标题，二级标题，三级标题，数字越大，字体大小越小

<!-- <h1>标题 -->
    <h1>Hello World!</h1>

3.2 p：段落文本

<!-- <p>段落文本 -->
    <p>你好啊，世界。Hi~ o(*￣▽￣*)ブ</p>

3.3 br：换行

<!-- <br>换行 -->
    <br>

3.4 hr：水平线

<!-- <hr>水平线 -->
    <hr>

3.5 img：图片

<!-- 
	<img>图片标签
    src=""路径：文件的存放位置
    绝对路径：从根盘符开始的路径
    相对路径：相对于当前文件所在位置的路径
-->
    <img src="https://img0.baidu.com/it/u=3713100074,2342145755&fm=253&fmt=auto&app=120&f=JPEG?w=456&h=285" alt="">

3.6 audio：音频

<!-- <audio>音频标签 -->
    <audio src="audio/music.mp3" controls loop autoplay></audio>

3.7 video：视频

<!-- <video>视频标签，谷歌浏览器中需要配合muted实现静音播放 -->
    <video src="video/video.mp4" width="300" height="300" controls loop autoplay></video>

3.8 a：超链接

<!-- <a>超连接标签 -->
    <a href="www.baidu.com">调转到百度</a>

3.9 列表

3.9.1 ul：无序列表

<!-- 
        <ul>无序列表
        常用于新闻标题
    -->
    <ul>
        <!-- <li>无序列表的每一项 -->
        <li>头部1</li>
        <li>身体1</li>
        <li>尾部1</li>
    </ul>

3.9.2 ol：有序列表

<!-- 
        <ol>有序列表 
        常用于排行榜
    -->
    <ol>
        <!-- <li>有序列表的每一项 -->
        <li>头部2</li>
        <li>身体3</li>
        <li>尾部3</li>
    </ol>

3.9.3 dl：自定义列表

<!-- 
        <dl>自定义列表
        常用于网页的底部导航栏中
    -->
    <dl>
        <!-- <dt>自定义列表的主题 -->
        <dt>自定义主题1</dt>
        <!-- <dd>自定义列表的针对主题的每一项内容 -->
        <dd>自定义内容1</dd>
    </dl>

3.10 table：表格

<!-- <table>表格，可用于包裹<tr>标签 -->
	<!-- 表格样例1 -->
    <table  border="1px" style="height: 100px; width: 200px; font-size: large; text-align: center;">
        <!-- <caption>标签：表格整体大标题，默认顶部居中 -->
        <caption>课程表</caption>
        <!-- <tr>表格的每一行，可用于包裹<td>标签 -->
        <tr>
            <!-- <td>表格单元格，可用于包裹内容 -->
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <!-- <th>表头单元格 -->
        <th></th>
        <tr>
            <!-- 横行竖列 -->
            <!-- rowspan="2",横跨2列 -->
            <td rowspan="2">化<br>学</td>
            <td>物理</td>
            <td>生物</td>
        </tr>
        <tr>
            <!-- colspan="2",横跨2行 -->
            <td colspan="2">体育</td>
        </tr>
    </table>

    <!-- 表格样例2 -->
    <table border="5px">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真漂亮</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
        </tr>
    </table>

3.11 form：表单

<!-- 
        <form>表单：用于收集用户信息 
            action：提交表单的地址
            method：提交方式 ————常用的提交方式 get。post
    -->
    <form action="" method="">
        <!-- <input>输入框，有多种类型可以选择 -->
        <!-- 
            text：文本框 
                placeholder：占位符，提示用户输入内容的文本
                value：默认输入值
                maxlength：最大输入长度
                minlength：最小输入长度
        -->
        用户名：<input 
                type="text" 
                placeholder="请输入用户名称" 
                value="123"
                name="user_name"
                maxlength="16"
                minlength="8"
                />
        <!-- 密码框 -->
        密码：<input type="password">
        <!-- 提交按钮 -->
        提交：<input type="submit">
        <!-- 重置按钮 -->
        重置：<input type="reset">
        <!-- 单选框 -->
        性别：<input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女">女
        <!-- 下拉菜单 -->
        <select name="local" id="lo1">
            <option value="北京" selected>北京</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select>
        <!-- 多选框 -->
        爱好：<input type="checkbox" name="hobbit" value="跑步">跑步
        <input type="checkbox" name="hobbit" value="走路">走路
        <input type="checkbox" name="hobbit" value="爬行">爬行
        <!-- 文件选择 -->
        文件选择：<input type="file">
        <!-- 普通按钮 -->
        普通按钮：<input type="button">
        <!-- <textarea>多行输入框 -->
        自我介绍：<textarea name="" id="" cols="30" rows="10"></textarea>
    </form>

4.常用的行内样式设置

<!-- 
        color: 文字颜色
        font-size: 字体大小
        font-weight: 字体是否加粗
        font-style: 字体是否斜体
        text-align: 文本位置
        text-decoration: 文本效果
        text-shadow: 字体阴影
        text-indent: 文本缩进
     -->
    <!-- 标题 -->
    <h1 style="color: pink; font-size: 50px; font-weight: normal; text-align: center; text-decoration: underline; text-shadow: 50px; text-indent: 50px;">Hello World!</h1>