【HTML】基础

维他命C++

已于 2022-12-16 15:02:03 修改

阅读量108

点赞数 2

分类专栏： web前端文章标签： html css 前端

于 2022-12-16 14:12:54 首次发布

本文链接：https://blog.csdn.net/weixin_61901599/article/details/128342119

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

两种标签：一般标签 & 自闭合标签（无结束符号）
两种元素：块元素（独占一行）& 行内元素

<!DOCTYPE HTML>

01 head

<title>	定义网页标题
<meta>	定义网页的基本信息（供搜索引擎）
<style>	定义CSS样式
<link>	链接外部CSS文件或脚本文件
<script>	定义脚本语言
<base>	定义页面所有链接的基础定位

02 body

2.1 段落与文字

标签语义对照表

<h1>~<h6>	header	标题
<p>	paragraph	段落
<br>	break	换行
<hr>	horizontal rule	水平线
<div>	division	分割
<span>	span	区域

<strong>	strong	加粗
<em>	emphasized	斜体
<cite>	cite	斜体
<sup>	superscripted	上标
<sub>	subscripted	下标

2.2 列表

列表type属性

<!-- 有序列表 -->
<ol type="列表项符号">
    <li>有序列表项</li>
    <li>有序列表项</li>
    <li>有序列表项</li>
</ol>

<ul type="列表项符号">
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul>

<dl>
    <dt>定义名词</dt>
    <dd>定义描述</dd>
    <dd>定义描述</dd>
</dl>

2.3 表格

<!-- 表格完整结构 -->
<table>
    <!-- 表格标题 -->
    <caption>Hello Hell</caption>

    <!-- 表头 -->
    <thead>
        <th><strong>header1</strong></th>
        <th><strong>header2</strong></th>
    </thead>

    <!-- 表身 -->
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
         </tr>
    </tbody>

    <!-- 表脚 -->
    <tfoot>
         <tr>
            <td>1</td>
            <td>2</td>
         </tr>
    </tfoot>
</table>

<!-- 合并列 -->
<table>
  <!-- 表格标题 -->
  <caption>Hello Hell</caption>
    
    <!-- 表头 -->
  <thead>
      <th colspan="2"><strong>header1</strong></th>
    </thead>
    
    <!-- 表身 -->
    <tbody>
        <tr>
            <td rowspan="2">(1,1)</td>
            <td>(1,2)</td>
        </tr>
        <tr>
            <td>(2,1)</td>
        </tr>
    </tbody>
</table>

<table>	table	表格
<tr>	table row	行
<td>	table data cell	表格单元格

<thead>	table head	标头
<tbody>	table body	表身
<tfoot>	table foot	表教
<th>	table header	表头单元格

2.4 图像

<img src="图片地址" alt="图片描述" title="图片描述">

src	图片的文件地址
alt	图片显示不出来时的提示文字
title	鼠标移到图片上的提示文字

.JPG	可以很好处理大面积色调的图像，如相片、网页一般的图片。
.PNG	格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
.GIF	图片图像效果很差，但是可以制作动画。

2.5 链接

<!--<a href="链接地址" target="目标窗口打开方式">-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div>
      <a href="#music" target="_blank">Music</a><br />
      <a href="#movie" target="_blank">Movie</a><br />
      <a href="#article" target="_self">Article</a><br />
    </div>
    <br />
    <div id="music">
      <h1>My Music</h1>
      <ul>
        <li>To the moon</li>
        <li>GRIS</li>
      </ul>
    </div>
    <br />
    <div id="movie">
      <h1>My Movie</h1>
      <ul>
        <li>Kill Bill</li>
        <li>Circle of life</li>
      </ul>
    </div>
    <br />
    <div id="article">
      <h1>Article</h1>
      <ul>
        <li>《stm32》</li>
        <li>《电子技术》</li>
      </ul>
    </div>
  </body>
</html>

_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白窗口中打开链接

2.6 表单

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Sign In</title>
  </head>
  <body>
    昵称：<input type="text" name="name"/>

    <div>
      密码：<input type="password" name="pwd"/>
    </div>

    邮箱：<input type="text" name="mail"/>
    <select type="multiple" size="1">
      <option value="1">@qq.com</option>
      <option value="2">@163.com</option>
      <option value="3">jQuery</option>
      <option value="4">Java</option>
      <option value="5">Ajax</option>
      <option value="6">JavaScript</option>
      <option value="7">C++</option>
      <option value="8">Python</option>
    </select>

    <div>
      性别：
      <input type="radio" name="sex" value="male" checked="checked"/>male
      <input type="radio" name="sex" value="female"/>female
    </div>

    兴趣：
    <input type="checkbox" value="1"/>旅游
    <input type="checkbox" value="2"/>摄影
    <input type="checkbox" value="3"/>运动
    
    <div>
      个人介绍：<br />
      <textarea rows="6" cols="43" name="intro">More power!</textarea>
    </div>

    <div style="text-align: center;width: 8cm;">
      <!--注册-->
      <input type="button" value="注册" id="sign"/>
      <br />
    </div>

    上传个人照片：<br />
    <input type="file" value="选择照片"/>
  </body>
</html>

text	单行文本框
password	密码文本框
button	按钮
reset	重置按钮
image	图像形式的提交按钮
radio	单选按钮
checkbox	复选框
hidden	隐藏字段
file	文件上传