首页 > 其他分享 >认识HTML

认识HTML

时间:2022-10-20 19:33:16浏览次数:58  
标签:序列表 认识 标签 列表 HTML 如图 定义

一、HTML基础

  • HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言

(一)标题

  • HTML 标题是通过<h1> - <h6> 标签来定义的。
<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>

(二)段落

  • HTML段落是通过标签<p>来定义的。
<p>这是一个段落</p>

(三)链接

  • HTML 链接是通过标签 <a> 来定义的。
<a>这是通往百度的链接</a>
<a href="https://www.baidu.com">这是通往百度的链接</a>

(四)图像

  • HTML 图像是通过标签 <img> 来定义的。
<img src="/images/logo.png" width="200" height="100" />
<img src="image/1.jpg">

二、HTML属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"。
属性 描述
id id它是唯一的
class class可以同时存在多个

(一)HTML文本格式化

<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字

(二)HTML样式

1、背景颜色

<h1 style="background-color: #ff359b">这是一个标题</h1>
<p style="background-color: #00d2ff">这是一个段落</p>

2、字体样式

<h1 style="font-family: KaiTi">这是一个标题</h1>
  • 通用:宋体 SimSun

  • 黑体 SimHei

  • 微软雅黑 Microsoft YaHei

  • 微软正黑体 Microsoft JhengHei

  • 新宋体 NSimSun

  • 新细明体 PMingLiU

  • 细明体 MingLiU

  • 标楷体 DFKai-SB

  • 仿宋 FangSong

  • 楷体 KaiTi

  • 仿宋_GB2312 FangSong_GB2312

  • 楷体_GB2312 KaiTi_GB2312

3、字体颜色

<h1 style="color:red">这是标题。</h1>

 

4、字体大小

<p style="font-size: 18px">这是一个段落</p>

  • 同时修改样式,颜色,大小
<p style="font-family: KaiTi;color:red;font-size: 18px">这是一个段落</p>

5、文本对齐

  • 使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式。
 <h1 style="text-align: center">这是一个标题</h1>

三、HTML表格

  • 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。
  • 字母 td 指表格数据(table data),即数据单元格的内容。

(一)表格实例

<h1>一列:</h1>
    <table border="5">
      <tr>
        <td>100</td>
      </tr>
    </table>

<h1>一行三列:</h1>
    <table border="5">
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
    </table>

<h1>两行三列:</h1>
    <table border="5">
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
      </tr>
</table>

如图:

(二)表格表头

  • 表格的表头使用 <th> 标签进行定义。
<h1>个人兴趣爱好</h1>
<table border="4">
    <caption style="font-size: 150%;font-family: KAITI;color: red">全民制作人</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>唱歌</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>跳舞</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>男</td>
        <td>rap</td>
    </tr>
</table>

 如图:

四、HTML列表

  • HTML 支持有序、无序列表

(一)有序列表

  • 有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
  • 列表项使用数字来标记。
<h3>有序列表</h3>
    <ol>
        <li>有序列表第一行</li>
        <li>有序列表第二行</li>
        <li>有序列表第三行</li>
        <li>有序列表第四行</li>
    </ol>

如图:

(二)无序列表

  • 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

    无序列表使用 <ul> 标签。

<h3>无序列表</h3>
    <ul>
        <li>无序列表第一行</li>
        <li>无序列表第二行</li>
        <li>无序列表第三行</li>
        <li>无序列表第四行</li>
    </ul>

如图:

五、HTML区块

  • HTML 可以通过 <div> 和 <span>将元素组合起来。
<div style="width: 500px">
    <div style="background-color: #ff359b;width: 500px;height: 50px"><h1 style="text-align: center">这是我当前的标题</h1></div>
    <div style="background-color: darkorange;height: 250px;width: 100px;float: left;">
        <b style="font-size: 20px">语文成绩</b><br>
        <b style="font-size: 20px">数学成绩</b><br>
        <b style="font-size: 20px">英语成绩</b><br>
        <b style="font-size: 20px">政治成绩</b><br>
        <b style="font-size: 20px">历史成绩</b><br>
        <b style="font-size: 20px">地理成绩</b><br>
        <b style="font-size: 20px">物理成绩</b><br>
        <b style="font-size: 20px">化学成绩</b><br>
        <b style="font-size: 20px">生物成绩</b><br>
    </div>
    <div style="background-color: #666666;height: 250px; width: 400px;float: left"></div>
    <div style="background-color: #ff305a;height: 30px; width: 500px;text-align: center;float:left">欢迎下次光临</div>
</div>

如图:

六、表单和输入

  • HTML 表单用于收集用户的输入信息。

  • HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。
  • 实例
<form action="">
    请输入账号: <input type="text" name="user"><br>
    请输入密码: <input type="password" name="password">
</form>
  • 注意表单本身并不可见。

如图:

(一)提交和登录

1、提交

  • <input type="submit"> 定义了提交按钮。
  • 当用户单击确认按钮时,表单的内容会被传送到服务器.
<form>
  Username:<input type="text" name="user">
  <input type="submit" value="提交">
</form>

如图:

2、登录

  • button
<button class="but" type="submit">登录</button> 
<div style="background-color: #fff1e8;width: 200px;height: 200px;margin:0 auto; margin-top:200px;">
    请输入账号:<input type="text"><br>
    请输入密码:<input type="password">
    <button class="but" type="submit">登录</button> 
</div>

如图:

(二)实现登录页

 <style>
        input{
             margin: auto 0;
             width: 300px;
            /*间隔*/
             margin-bottom: 10px;
            /*空间*/
             padding: 10px;
             font-size: 15px;
            /*拐角*/
             border-radius: 4px;
        }
        .but{
            width: 150px;
            padding: 10px;
            background-color: aquamarine;

        }
</style>
<div style="background-color: #fffd87;width: 400px;height: 300px;margin: 0 auto;margin-top:200px;text-align: center">

    <h1 style="text-align: center">Login</h1>
    <input type="text" placeholder="用户名"><br>
    <input type="password" placeholder="密码">
    <button class="but" type="submit">登陆</button>
    <button class="but" type="submit">注册</button>


</div>

如图:

 

标签:序列表,认识,标签,列表,HTML,如图,定义
From: https://www.cnblogs.com/LoLong/p/16810992.html

相关文章

  • html项目引入element-ui和vue【转载】
    本地引用element-ui和vue<linkrel="stylesheet"type="text/css"href="./element.css"><scriptsrc="./js/vue.js"></script><scriptsrc="./js/element.js"></scrip......
  • java爬虫之HtmlUnit介绍
    前端有时候会遇到项目临时需要网上收集数据的情况,什么方案是简单易懂、长期可用的呢,当然是用浏览器终端测试单元做爬虫是最方便的啦,将平时工作中的测试程序进行简单的修改......
  • HTML标签-文本标签1和HTML标签-文本标签2
    HTML标签-文本标签1文本标签:和文本有关的标签注释:<!-- 注释内容 --><h1>to<h6>:标题标签h1~h6:字体大小逐渐递减<p>:段落标签<br>:换行标签<hr>:......
  • 前端笔记-html-引用-20221020
    HTML引用1.<q>标签:用于短的引用。浏览器通常会为<q>元素包围引号。<p>WWF的<q>目标是构建人与自然和谐共处的世界</q></p> 2.<blockquote>标签:长引用。浏览器......
  • 581HTML标签_块标签 and 582 HTML标签_语义化标签
     语义化标签:html5中为了提高程序的可读性,提供了一些标签。      1.<header>:页眉      2.<footer>:页脚<!--页眉--><divid="header"><!--标题标签--......
  • HTML5和CSS3的新特性
    HTML5的新特性1.用于绘画的canvas元素;2.用于媒介回放的video和audio;3.本地离线存储;4.新标签:header,footer,nav,section,article5.新的表单控件:date,time,email,url,cale......
  • HTML语义化标签和表格标签
    7.语义化标签:html5中为了提高程序的可读性,提供了一些标签。 1.<header>:页眉 2.<footer>:页脚8.表格标签: *table:定义表格 *width:宽度 ......
  • HTML快速入门和HTML标签-文件标签
    HTML快速入门快速入门:语法:1.html文档后缀名.html或者.htm2.标签分为1.围堵标签:有开始标签和结束标签。如<html> </html>2.自闭和标......
  • HTML链接标签和div和span
    5.链接标签: *a:定义一个超链接 *属性: *href:指定访问资源的URL(统一资源定位符) *target:指定打开资源的方式 ......
  • 576 HTML标签_文本标签2 and 577 练习
    HTML标签_文本标签2文本标签和文本有关系的标签<center>:文本居中<b>:字体加粗<i>:字体倾斜<font>:字体标签color:颜色  size:大小  ......