认识 HTML

首页 > 代码库 > 认识 HTML

2024-09-15 06:20:14 221人阅读

定义：

超文本标记语言，标准通用标记语言下的一个应用。（“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素）,通过标记符号来标记要显示的网页中的各个部分。
英文名：Heyper Text Markup Language.
超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

语言特点：

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：级文本标记语言可以使用在广泛的平台上
通用性：HTML是网络的通用语言,一种简单、通用的全置标记语言

HTML文本基础结构：

<!DOCTYPE html>    //文档定义类型
<html>    //开始标记
<head lang="en">   //元信息，这是一个单标记，有头无尾
    <meta charset="UTF-8">   //定义字符编码集 （UTF-8 万国码/GBK 中文编辑码）
    <title></title>  //标题，页面标签的命名，独一无二
</head>
<body>
//存放的内容展示给用户
</body>
</html>   //结束标记

<head> 定义文档的头部。<title>、<script>、 <style>、<link>、 <meta>等标签
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>、<div>、<span>、<form>、<table>、<input>等网页内容标签，在网页上要展示的页面内容放在放在body标签里。

HTML标签：

<h>标签：标题标签（h1-h6）

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

展示如下：字体逐渐变小

技术分享

<p>标签： <p>段落文本</p>
<span>标签： <span>文本</span> <span>标签无具体语义，为文字设置单独样式。

<p> 这是  <span style="color: red"> 一个</span>标记</p>

<em><strong>标签：需要强调的文本在浏览器中<em> 斜体表示，<strong> 用粗体表示。（<i>斜体 /<b>粗体）
<q>标签 <q>引用文本</q> 短文本引用，浏览器对q标签自动添加双引号。
<blockquote>标签大段文本引用
<br/>标签文本换行
<hr/>标签文本添加水平横线
<address>标签为网页加入地址信息

<pre>标签预格式化的文本， pre 元素中的文本通常会保留空格和换行符。

<pre>这是一个    预格式文本，
    文档中的内容可以根据自己更改，空格，换行等
        </pre>

技术分享

<ul><li> 无序列表标签

<ul>
    <li>这是一个无序列表标签</li>
    <li>这是一个无序列表标签</li>
    <li>>这是一个无序列表标签</li>
</ul>

技术分享

<ol><li> 有序列表标签

<ol>
    <li>这是一个无序列表标签</li>
    <li>这是一个无序列表标签</li>
    <li>这是一个无序列表标签</li>
</ol>

技术分享

<a>标签超链接
<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。<a href="http://www.mamicode.com/目标网址" target="_blank">click here!</a>

<a href="目标网站">链接显示的文本</a>

<img> 标签插入图片

<img src="../img/picter/10-140P323040K23.jpg" alt="图片"/>        //src=http://www.mamicode.com/图片路径

HTML常用重要标签：

<table>标签表格创建表格的四个元素：table、tbody、tr、th、td

<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
<tbody>…</tbody>：表格内容
<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
<td>…</td>：表格的一个单元格
<th>…</th>：表格的头部的一个单元格，表格表头。

<table border="2px">
    <tbody>
    <caption>制作一个本月工资单</caption>    //表头信息
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>日期</td>
        <td>备注</td>

    </tr>
    </tbody>

</table>

技术分享

<table border="1">
    <tobdy>
        <conption>这是一个工资单</conption>
        <tr>
            <!-- 列/竖-->
           
            <td colspan="2">1-1</td>      //colspan 横向合并单元格
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
          
            <td rowspan="2">2-1</td>    //  rowspan 纵向合并单元格
            <td>2-2</td>
            <td>3-3</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
        </tr>

    </tobdy>

</table>

技术分享

<form> 表单标签表单实现浏览者输入数据与服务器端的交互 <form method="传送方式" action="服务器文件">
post适合提交数据量大安全性高的用户信息，如注册，修改，上传功能等。

method：数据的传送方式(get/post) get适合提交数据量不大安全性不高的数据。
文本框、密码输入框 <input type="text/password" name="名称" value="文本" /

type="text" 输入框位文本框 type="password" 输入框位密码输入框
name:为文本框命名，以备后台程序ASP,PHP使用。
value：为文本框输入默认值。

3.提交按钮 <input type="submit"value="注册"/> value：按钮上显示的字

4.单选框、复选框 <input type="radio/checkbox" value="http://www.mamicode.com/值" name="名称" checked="checked"/>

type:当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框

注意:同一组的单选按钮，name 取值一定要一致

5.增加用户交互使用的设置（id的值必须与for后面的值一致）

<label for="conten">男生</label>
<input type="radio"name="sex"id="conten"/>
<label for="text">女生</label>
<input type="radio"name="sex"id="text"/>

6.多行文本框 <textarea name="" id="" cols="30" rows="10"body style="overflow: scroll"></textarea>

注：body style="overflow: scroll" 文本框滚动条

6.下拉文本框

 <select name="" id="">
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="日本">日本</option>
        <option value="韩国">韩国</option>

    </select>

展示一个完整的form表单如下：

<form action="post">
    <input type="text"placeholder="请输入账号"name="username"/>
    <input type="password"placeholder="请输入密码"maxlength="6" name="userpassword"/>
    <br/>
    <br/>
    <input type="submit"value="注册"/>
    <button>按钮</button>
    <input type="button"value="登录"/>
    <br/>
    <br/>
    <input type="radio"name="sex"/>男生
    <input type="radio"name="sex"/>女生
    <br/>
    <br/>
    <input type="checkbox"/>面条
    <input type="checkbox"/>稀饭
    <input type="checkbox"/>干饭
    <input type="checkbox"/>面包
    <br/>
    <br/>
    <label for="conten">男生</label>
    <input type="radio"name="sex"id="conten"/>
    <label for="text">女生</label>
    <input type="radio"name="sex"id="text"/>
    <br/>
    <br/>
    <textarea name="" id="" cols="30" rows="10"body style="overflow: scroll"></textarea>
    <br/>
    <input type="email"/>
    <input type="range"/>
    <input type="color"/>
    <input type="date"/>
    <br/>

    <select name="" id="">
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="日本">日本</option>
        <option value="韩国">韩国</option>

    </select>

</form>

技术分享

<div>标签把一些独立的逻辑部分划分出来，放在一个<div>标签中，div当于一个容器,可以放很多元素在里面。

（div里面想要展示的内容效果可以用CSS来实现）

认识 HTML

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 认识 HTML

认识 HTML

看完仍有疑问？有类似问题直接问程序猿