HTML基础

最新推荐文章于 2025-08-03 17:02:33 发布

◆dear

最新推荐文章于 2025-08-03 17:02:33 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/weixin_67794975/article/details/132105212

HTML基础

1.结构示例

<!DOCTYPE html>
<html>

<head>
    <title>文档标题</title>
    
    <!-- 图标 -->
    <link rel="Shortcut Icon" href="img/favicon.ico" />
    <link rel="Bookmark" href="img/favicon.ico" />
    
    <!-- 元数据 -->
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><!-- 解析字符集 -->
    <meta name="robots" content="none" /><!-- 页面不被检索 -->
    <meta name="keywords" content="xxx" /><!-- 关键词 -->
    <meta name="description" content="xxx" /><!-- 网站描述 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><!-- 页面自适应 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!-- IE兼容 -->
    <meta name="renderer" content="webkit|ie-comp|ie-stand"><!-- 国产浏览器高速模式 -->
    
    <!-- 外部CSS -->
    <link rel="stylesheet" href="css/demo.css" type="text/css"/>
    
    <!-- 内部CSS -->
    <style>
        ...
    </style>
</head>

<body>
	<!-- 各类网页标记 -->
    <header>
        网站顶部
    </header>
    
	<div>
        主体部分，也可以使用或嵌套其他语义化标签，如<article>、<section>
    </div>
    
	<footer>
        网站底部
    </footer>
    
	<!-- 外部JS -->
	<script type="text/javascript" src="js/demo.js"></script>
    
    <!-- 内部JS -->
    <script type="text/javascript">
        ...
    </script>
</body>

</html>

2.网页注释

<!--注释内容-->

3.HTML标签

按格式划分，HTML中的标签可以分为单标签和双标签（有无对应标签结尾）

3.1 div 和 span

div, 一人占一行。【块级标签】
span，自己多大占多少。【行内标签、内联标签】

3.2 超链接

<a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转</a>

<a href="/get/news" target="_blank">点击跳转</a>		# 新的Tab页面打开

3.3 图片

<img src="image.jpg" alt="暂无图片"/>

常见属性：

资源路径：src=“图像路径”

缺失文本：alt=“图片缺失时的提示文本”

3.4 表格

<table>
    <thead>
    	<tr>  <th>ID</th>  <th>姓名</th>   <th>年龄</th>  </tr>
    </thead>
    <tbody>
    	<tr>  <td>10</td>  <td>武沛齐</td>  <td>19</td>   </tr>
        <tr>  <td>11</td>  <td>吴阳军</td>  <td>19</td>   </tr>
        <tr>  <td>12</td>  <td>刘东</td>  <td>19</td>    </tr>
        <tr>  <td>13</td>  <td>郭智</td>  <td>19</td>    </tr>
        <tr>  <td>14</td>  <td>电摩</td>  <td>19</td>    </tr>
    </tbody>
</table>

3.5 input系列

<input type="text" />
<input type="password">    
<input type="file"> 

<input type="radio" name="n1">男
<input type="radio" name="n1">女

<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球

<input type="button" value="提交">  -->普通的按钮
<input type="submit" value="提交">  -->提交表单

input表单控件

文本框：<input type="text" name="" value="" maxlength="60" readonly="readonly" disabled="disabled"/>
密码框：<input type="password" name=""/>

单选框：<input type="radio" name="" value="" checked="checked"/>
复选框：<input type="checkbox" name="" value="" />

提交按钮：<input type="submit" value="提交"/>
重置按钮：<input type="reset" value="重置"/>
普通按钮：<input type="button" value="按钮"/>

隐藏域：<input type="hidden" name="" value="">
文件域：<input type="file" name="">

3.6 下拉框

<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

3.7 多行文本

<textarea>内容</textarea>

3.8 提交表单

表单二要素：

form元素，它相当于一个容器，用于存放各类表单控件
表单控件，也称作表单元素，表单元素都是被放置在标记中的

同时表单中一般都至少有一个提交按钮，

<form action="URL" method="post|get"></form>