资讯详情

【HTML 基础】

【HTML 基础】

一、 HTML 介绍及快速入门

  1. 新文本文件的后缀名称改为 .html
  2. 编写 HTML 结构标签
  3. 在 <body> 中定义文字
<!DOCTYPE html> <!-- HTML5 标识 --> <html lang="en"> <head>     <meta charset="UTF-8">     <!-- 页面字符集 -->     <title>HTML 快速入门</title> </head> <body> 乾坤未定，你我都是黑马。 <font color="red">乾坤未定，你我都是黑马。</font> </body> </html>

总结：

  1. HTML 文件以 .htm 或者 .html 为扩展名
  2. HTML 结构标签：
标签 描述
<HTML> 定义 HTML 文档
<head> 定义文档信息
<title> 定义文档标题
<body> 定义文档的主体
  1. HTML 标签不区分大小写
  2. HTML 单双引标签属性值
  3. HTML 语法松散

二、 基础标签

标签 描述
<h1> ~ <h6> 定义标题，h1 最大，h6 最小
<font> 定义字体、字体大小、字体颜色
<b> 定义粗体文本
<i> 定义斜体文本
<u> 下划线定义文本
<center&g; 定义水平居中
<p> 定义段落
<br> 定义拆行
<hr> 定义水平线

HTML 表示颜色：

  1. 英文单词：red、pink、blue…
  2. rgb(值1,值2,值3)：值的取值范围：0 ~ 255 例如：rgb(255,0,0) ，为红色
  3. #值1值2值3 值范围：00 ~ FF（十六进制）
HTML 原代码 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&amp; & 可用于显示其他特殊字符
&quot; " 引号
&reg; ® 已注册
&copy; © 版权
&trade; ™ 商标
&nbsp; 不断行的空白

三、 图片、音频、视频标签

标签 描述
<img> 定义图片
<audio> 定义音频
<video> 定义视频
  • img ：定义图片
    • src ：规定显示图像的 URL（统一资源定位符）
    • height ：定义图像的高度
    • width ：定义图像的宽度
  • audio ：定义音频，支持的音频格式 MP3，WAV，OGG
    • src ：规定音频的 URL
    • controls ：显示播放控件
  • video ：定义视频，支持的视频格式 MP4，WebM，OGG
    • src ：规定视频的 URL
    • controls ：显示播放控件

资源路径：

  1. 绝对路径：完整路径
  2. 相对路径：相对位置关系

尺寸单位：

  1. px ：像素
  2. 百分比

四、 超链接标签

标签 描述
<a> 定义超链接，用于链接到另一个资源
  • href ：指定访问资源的 URL
  • target ：指定打开资源的方式：
    • _self ：默认值，在当前页面打开
    • _blank ：在空白页面打开

五、 列表标签

标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
  • type ：设置项目符号

六、 表格标签

标签 描述
<table> 定义表格
<tr> 定义行
<td> 定义单元格
<th> 定义表头单元格
  • table ：定义表格
    • border ：规定表格边框的宽度
    • width ：规定表格的宽度
    • cellspacing ：规定单元格之间的空白
  • tr ：定义行
    • align ：定义表格行的内容对齐方式
  • td ：定义单元格
    • rowspan ：规定单元格可横跨的行数
    • colspan ：规定单元格可横跨的列数

七、 布局标签

标签 描述
<div> 定义 HTML 文档中的一个区域部分，经常与 CSS 一起使用，用来布局页面
<span> 定义组合行内的元素

八、 表单标签

  • 表单：在网页中主要负责数据的采集功能，使用 <form> 标签定义表单
  • 表单项（元素）：不同类型的 input 元素，下拉列表、文本域等
标签 描述
<form> 定义表单
<input> 定义表单项，通过 type 属性控制输入格式
<label> 为表单项定义标注
<select> 定义下拉列表
<option> 定义下拉列表的列表项
<textarea> 定义文本域

  • form ：定义表单

    • action ：规定当提交表单时向何处发送表单数据，指定 URL，表单项数据要想被提交，则必须指定其 name 属性
    • method ：规定用于发送表单数据的方式
      • get ：浏览器会将数据直接附在（拼接）表单的 action URL 之后，大小有限制（URL 的长度大约限制在 4kb）
      • post ：浏览器会将数据放到 http 请求消息体中，大小无限制

  • <input> ：表单项，通过 type 属性控制输入形式

  • <select> ：定义下拉列表，<option> 定义列表项

  • <textarea> ：文本域

type 取值 描述
text 默认值，定义单行的输入字段
password 定义密码字段
radio 定义单选按钮
checkbox 定义复选框
file 定义文件上传按钮
hidden 定义隐藏的输入字段
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
reset 定义重置按钮，重置按钮会清除表单中的所有数据
button 定义可点击按钮

九、 测试使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础标签</title>
</head>
<body>
    <h1>标题标签一级</h1>
    <h2>二级</h2>
    <h3>三级</h3>
    <h4>四级</h4>
    <h5>五级</h5>
    <h6>六级</h6>

    <p>段落标签</p>
    <br/>换行标签  单标签 强制换行

    文本格式化标签
    <label>加粗</label>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>

    盒子标签 没有语义
    <div>大盒子   分割分区  一行只能放一个</div>
    <span>小盒子   跨度跨距   一行可以放多个 显示多个</span>

    图像标签和路径
    <h4>图像标签的使用</h4>
    <img src="示例图片.png"/>
    <h4>alt 替换文本 图像显示不出来的时候用文字替换：</h4>
    <img src="示例图片 故意改错.png" alt="示例图片"/>
    <h4>title 提示文本 鼠标放到图像上，提示的文字：</h4>
    <img src="示例图片.png" alt="示例图片" title="示例图片"/>

    <h4>width 给图像设定宽度：</h4>设定一个高度或宽度另一方面自动等比例调节
    <img src="示例图片.png" alt="示例图片" title="示例图片" width="500"/>
    <h4>height 给图像设定高度：</h4>设定一个高度或宽度另一方面自动等比例调节
    <img src="示例图片.png" alt="示例图片" title="示例图片" height="100"/>
    <h4>width 给图像设定边框：</h4>
    <img src="示例图片.png" alt="示例图片" title="示例图片" width="500" border="15"/>
    
    表格标签的基本使用
    <table>
        <tr>
            <td>单元格内的文字</td>
        </tr>
    </table>
    <!-- <table></table>是用于定义表格的标签。 <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中 <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中 字母td指表格数据（table data），即数据单元格的内容。 -->
            <table>
                <tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
                <tr><td>刘某某</td><td>男</td><td>56</td></tr>
                <tr><td>张某某</td><td>男</td><td>58</td></tr>
                <tr><td>郭某某</td><td>男</td><td>54</td></tr>
                <tr><td>黎某</td><td>男</td><td>56</td></tr>
            </table>

            表头单元格标签
            <!-- <th>标签表示HTML表格的表头部分（table head 的缩写 加粗居中显示 -->
                <table>
                    <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
                </table>
                表格属性
                属性名            属性值              描述
                align            left  center right  规定表格相对周围元素的对齐方式
                border           1或""               规定表格单元是否拥有边框，默认为""，没有边框
                cellpadding      像素值              规定单元格边沿与其内容之间的空白，默认1像素
                cellspacing      像素值              规定单元格之间的空白，默认2像素
                width            像素值或百分比       规定表格的宽度
                height           像素值或百分比       规定表格的高度
                <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="250" >
                    <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
                </table>

                表格结构标签
                <!-- <thead>标签 表格的头部区域，<tbody>标签 表格的主体区域 -->
                <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" heigth="100">
                <thead>
                        <tr>
                            <th>排名</th>
                            <th>关键词</th>
                            <th>趋势</th>
                            <th>进入搜索</th>
                            <th>最近七日</th>
                            <th>相关链接</th>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                            <td>1</td>
                            <td>xxxx</td>
                            <td>趋平</td>
                            <td>640350</td>
                            <td>640350</td>
                            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>xxxx</td>
                            <td>下降</td>
                            <td>623003</td>
                            <td>623003</td>
                            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>xxxx</td>
                            <td>上涨</td>
                            <td>507270</td>
                            <td>507270</td>
                            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>xxxx</td>
                            <td>趋平</td>
                            <td>433165</td>
                            <td>433165</td>
                            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
                        
        标签： tvb25sl传感器
 
锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台