HTML的基础入门，快来看看吧~

阿白白白白白白

已于 2022-07-15 20:19:10 修改

阅读量297

点赞数 1

文章标签： html java 前端

于 2022-07-15 20:17:58 首次发布

本文链接：https://blog.csdn.net/weixin_45905080/article/details/125811506

版权

系列文章目录

第一章初识HTML

文章目录

系列文章目录
第一章初识HTML
@[TOC](文章目录)

前言
HTML的简单入门，快来一起看看吧
初始HTML
概述
HTML组成
标签分类
常用属性
表单控件
软件架构

分类
h4版本

h5版本

T型框架页

总结

前言

HTML的简单入门，快来一起看看吧

HTML（决定页面有什么）——CSS（美化）——JavaScript（动态）

								HTML							CSS					js
名称							超文本标记语言				层叠样式表	
作用							决定页面有什么				页面美化	
特定属性（作为标记）				name(表单控件中)				class					id

初始HTML

用微软浏览器最佳！——>W3cschool

超文本标记语言
记录文字、视频、声音、图片

概述

● 解释型语言【java：编译性语言】
● 作用：决定页面有啥
● 基本结构

<!DOCTYPE html>  <!-- //相当于类名，表示html5版本——>更适配手机端，更好向下兼容 -->
<html lang="en">  <!-- 相当于大括号，即英文页面，会自动翻译 -->
<head>
    <meta charset="UTF-8"> <!-- 指定编码集 -->
    <title></title>  <!-- 写标题 -->
</head>
  <body>
   hello<!-- 这里写内容-->
  </body>
</html>

解析：
● ：该行不删除，则google打开会默认成英文并自动翻译
○ “zh-cn”：就不会自动翻译了
● open with live server：打开相对路径【常用】——>找到盘符路径
open in default browser：打开绝对路径

HTML组成

标签
● 标签均小写；属性均用双引号括起来
● 一般成对出现，少量单个出现；
● 必有属性：

name（用在表单控件中传数据给后端）
class：给css使用
id：给js使用

<meta charset="UTF-8">  <!-- 闭合标签，即单标签-->
<body> </body><!-- 成对标签，即双标签-->

● 特定标签间可以相互嵌套——>包含的标签和父标签可以同类型，也可以不同类型——>就近原则

标签分类

● 标题标签：

<h1></h1>

● 段落标签：

<p></p>，有段落间距

● title：页面标题
● 一条线标签：

一条线标签：<hr>

● 换行标签：

<br/>

● 空格标签：&nbsp；——>4个表示一个汉字，8个
● 加粗标签：

<b></b>

● 斜体线标签：

<I></I>

● 加下划线标签：

<u><b><i>章鱼</i></b></u>

常用标签：

● 字体属性标签：

 <font> </font>

○ size：指定字体大小
○ color:指定字体颜色【取色器】

<font size="20" color="blue/#ssss98">无边落木萧萧下，不尽长江滚滚来</font> <!-- size：指定字体大小->

● 图片标签：
○ width=100%：占父类的100%
○ alt：该属性赋值后，当搜“高考”会被网站收录图片

<!--图片标签；./:在当前目录下寻找；../:在上一级目录显示-->
<img src="./images/scenery1.jpg"> <!--写相对路径，方便交互；./表示当前路径；../表示绝对路径-->
  <img src="../光影1.jpg">
<img src="./img/bg.jpeg" width="300" height="200" alt="高考" > 
  <!--alt：改属性赋值后，当搜“高考”会被网站收录图片--> 
  ```
  
●  居中标签
既是属性，也是标签 
```html
<center><img src="./images/scenery1.jpg" width="300" height="400"></center> <!--作为标签->
<h1 align="center"> 一届精彩、非凡、卓越的奥运盛会</h1>  <!-- 作为属性->

● 立标签/无序列表

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

● 超链接标签：【最常用】
○ href地址属性
○ target属性：
■ _self:跳转到自身
■ _blank:跳转新页面

<a href="https://www.w3cschool.cn/" target="_blank">点我</a>  <!--herf：写地址，eg：http://www. ->

● 页面布局标签
屏幕留白——>适应不同电脑的分辨率
● 表格：table——>tr:行，td：列 ——>列在行中

<!--colspan="3"---->三列合并成一列

● border边框：一定要加
○ 0：去掉边框
○ 1：存在边框

<table border="0" width="1000" height="700" align="center">

● bgcolor：背景色
● colspan：合并列

  <td colspan="3" bgcolor="#f2f2f2">

● aria-rowspan=“3”：3行合并成1行

常用属性

一个标签里可以写多个属性
● 路径属性：src——>./表示当前路径；…/表示父类路径–>
● 长宽高属性：px：屏幕中的长度距离
● 对齐属性：align

 <h1 align="center/left/right"> 一届精彩、非凡、卓越的奥运盛会</h1>

<!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>Document</title>
</head>
<body>
    <table border="0" width="1000" height="700" align="center">
        <tr height="75" > <!-- 表示行 -->
            <td colspan="3" bgcolor="#f2f2f2">   <!--colspan="3"——>三列合并成一列; -->
                <img src="../潇湘晚报.jpeg">
                &nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;
             <a href="https://author.baidu.com/home?from=bjh_article&app_id=1606863438588053" target="_blank"> <font size="20"><b>潇湘晨报</b></font></a> 
                <p> <font size="2" color="#939393">2022-05-31 12:45潇湘晨报官方百家号</font></p>
            </td>  
        </tr>
        <tr  height="75">
            <td colspan="3"><img src=../搜索栏.png width="100%"></td> <!--占父类的100% -->
        </tr>
        <tr  height="100">
            <td colspan="3"><center><h1><b>“第八届全国大众冰雪季”甘肃省冰雪运动知识网络竞赛6月1日启动</b></h1></center></td> 
        </tr>
        <tr aria-rowspan="3">
            <td width="18%" ><img src=../二维码.png width="100%"></td>  <!-- 25%:占父类即1300的25% -->
            <td align="center">“第八届全国大众冰雪季”甘肃省冰雪运动知识网络竞赛明日启动
                <br>
                <img src="../光影1.jpg" width="100%">
                <br>
                <p>每日甘肃网5月31日讯据兰州晚报报道 为巩固和扩大“带动三亿人参与冰雪运动发展成果”，在后冬奥时代推广普及冰雪运动知识，传播冰雪运动文化，甘肃省冬季运动管理中心、甘肃省冰雪运动协会委托甘肃美伦文化传媒有限公司将于6月1日-7日组织开展“第八届全国大众冰雪季”甘肃省冰雪运动知识网络竞赛，省内社会各界朋友均可参与。
                </p>
                <p>本次活动将通过线上方式进行有奖竞答。活动期间每人每天均可参与答题，每次答题80分以上视为合格，合格后可参与随机抽奖，获得0.3元至2元不等的微信红包（甘肃美伦文化传媒有限公司提供）；累计合格达3次以上者，即可获得参与抽取终极大奖机会。</p>
            </td>
            <td width="18%" >热点新闻</td>
        </tr>
       
       
    </table>
</body>
</html>

表单控件

先有表单，后有表单控件（想向服务器传数据，eg：评论区、下拉框、搜索框、搜索栏）

人机交互的接口
url:统一资源定位符

软件架构

● C/S架构
● B/S架构：依赖网络

分类

h4版本

一、html4的form表单及表单项

<form action="提交地址" method="提交方法post|get">

1.文本框 type=“text”
2.密码框 type=“password”
3.单选按钮 type=“radio”
4.多选按钮 type=“checkbox”
5.上传域 type=“file”
6.提交按钮 type=“submit”
7.重置按钮 type=“reset”：

  <input type="reset" name="delete2" id="" value="删除"> <!-- 将按钮名字改为删除-->

8.图片提交按钮 type=“image”
9.普通按钮 type=“button”
10.异常域 type=“hidden”
11.文本域
12.下拉列表

<select>
  <option value="0">java</option>
                    <option value="1" selected>大数据</option>
                    <option value="2" >人工智能</option>
</select>
</form>

● 注意

一定得起name值，起接收作用；value：默认值作用,当用户不能手动输入时采用
table快捷键： table>tr5>td2

<body>
    <!-- 表单 -->
    <!-- action：提交地址，将数据提交到另一个页面；
        method：提交方式——>get:默认，地址栏显示,传输快，最多传输8kb；
        post：地址栏隐藏，传输不限量，传输慢 -->
   <!-- 有密码等信息应该采用post方式 -->
    <form action="./success.html" method="post">
      <!-- 所有表单控件都要写在表单form中 -->
        <!-- h4 version -->
        <!-- 文本框 -->
       <!-- size:控制表单项的长度；maxlength：控制输入字符的长度 -->
        昵称：<input type="text" name="name" id="" placeholder="昵称" autofocus  maxlength="5">
        <!-- 密码框 -->
        密码：<input type="password" name="password" id="">   
         <!--单选按钮；name相同则互斥 男和女只能传一个；name是标记，value是传入的数据内容-->
       <!-- 单选按钮的name值必须使用同一个值，起互斥作用；因不能手动输入，则设默认值将其传输到后台；1/0起简便作用 -->
                <!--  checked:起默认值作用；若属性值与属性名同，则属性值可以不写 -->
        性别：<input type="radio" name="sex" id="" value="男"> 男 
             <input type="radio" name="sex" id="" value="女"  > 女
             <br>
             <!--多选按钮： 传入数据时多个选择一同传入 -->
          <!-- 此处name值一致，可以看成 一个键有多个值：传输过程hobby=0,1,2 -->
        爱好：<input type="checkbox" name="hobby" id="" value="篮球">篮球
        <input type="checkbox" name="hobby" id="" value="足球">足球
        <input type="checkbox" name="hobby" id="" value="羽毛球">羽毛球
        <!-- 上传域：将文件(字节流形式)传到后台服务器 -->
        上传域：<input type="file" name="file" id="">
        <br>
        <hr>
        <!-- 提交按钮:将全部数据传到后台；得写在form里 -->
        提交：<input type="submit" value="提交：">
        <!-- 重置：将全部清空 -->
        重置：<input type="reset" value="重置">
        <!-- 图片提交按钮：先指定一个指定的图片；即提交按钮作用 -->
        图片提交按钮：<input type="image" src="../images/scenery1.jpg">
        <!-- 普通按钮：配合js使用 -->
        普通按钮：<input type="button" value="普通按钮">
        <!--隐藏框:背着用户偷传数据；最好别用 -->
        隐藏框：<input type="hidden" value="隐藏">
        <!-- 文本域：可多行输入;设置行数和列数 -->
        <textarea rows="10" cols="10" placeholder="隐藏提示" ></textarea>
        <!-- 下拉列表:用户不用输入则需要指定value -->
        <select name="lang">
            <!-- 此处selected起默认指定作用；当没有selected时，则默认显示第一个 -->
            <option value="java">java</option>
            <option value="html"  selected>html</option>
            <option value="phy">phy</option>
        </select>
      personal introduction
      <!-- textarea限制字数的文本域:限制横向输入10，竖向输入10；此处可手动输入，则不应该加value值-->
       <textarea name="userDesc" cols="10" rows="10"></textarea>
        <!-- h5 version 新属性 -->
        <!-- placeholder:隐藏提示 -->
        <!-- cols: -->
        <!-- autoforcus:自动获取焦点;当属性只有一个值，就可以不写值-->
        <!-- required：必填——>提示必须填写 -->
        <!-- maxlength:限制最大的字数 -->
    </form>
</body>

h5版本

date
datetime
number
tel
email

<body>
   <form action="../day01初识.html">
    <table border="1" width="1000" align="center">
        <!-- 属性：placeorder:提示语；required：必填项:autofocus:自动获取焦点-->
        <tr>  邮箱
            <td>email box</td>
            <td><input type="email"name=" " id="email" autofocus="autofocus" ></td>
        </tr>
        <tr>  提交按钮
            <td>submit</td>
            <td><input type="submit" name="" id=""></td>
        </tr>
        <tr> 数字
            <td>number</td>
            <td><input type="number" name="number" id="" max="100" min="10" step="10"></td>
        </tr>
        <tr>  调色板
            <td>color</td>
            <td><input type="color" name="color" id=""></td>
        </tr>
        <tr>  时间（年月日）
            <td>time</td>
            <td><input type="date" name="date" id=""></td>
        </tr>
        <tr>
            <td>爆炸时间</td>
            <!-- 有时分秒 -->
            <td><input type="datetime-local" name="" id=""></td>
        </tr>
        <tr>  返回年月
            <td>month</td>
            <td><input type="month" name="month" id=""></td>
        </tr>
        <tr>
            <td>滑动块</td>
            <!-- step:规定每次滑动的步长 -->
            <td><input type="range" name="range" id="" step="10"></td>
        </tr>
        <tr> 搜索框
            <td>search box</td>
            <td>
                <input type="search" name="search" id="" placeholder="输入数字">
            </td>
        </tr>
        <tr>
            <td>phone number</td>
            <td>
                <!-- 手机号配合正则表达式使用:[]表示范围， -->
                <input type="tel" name="tel" id=""pattern="1[358]\d{9}"required >
            </td>
        </tr>
        <tr>   返回第几周
            <td>week</td>
            <td>
                <input type="week" name="week" id="" >
            </td>
        </tr>
        <tr>   返回网站
            <td>website</td>
            <td>
                <input type="url" name="url" id="" >
            </td>
        </tr>
        <tr>
            <td>upload file</td>
            <td>
                <!-- mutiple:选择多个文件 -->
                <input type="file" name="file" id=" multiple">
            </td>
        </tr>
      <tr>
      <!-- 输入网址格式：https://*******——>https：保密性更好 -->
        <!-- url:统一资源定位符； -->
        网址<input type="url" name="url" id="">
      </tr>
    </table>
   </form>
</body>

正则表达式

T型框架页

——一般后台管理系统

T型框架页例子

不能与body共存
做后台管理系统
不利于搜索引擎收录

//main.html
<!-- T型框架页：<frameset>不能与<body>共存 -->
    <!--rows：对页面进行上下排序：*——>通配符；cols：进行左右排版 -->
    <!-- noresize:不能挪动布局 -->
    <frameset rows="20,*" noresize>
        <frame src="./top.html"></frame>
        <frameset cols="20,*">
            <frame src="./left.html" name="left"></frame>
            <frame src="./right.html" name="right"></frame>
        </frameset>
    </frameset>
//top.html
<body>
    <!-- href="要显示的页面.html" target="目的页面的name" -->
    <h4><a href="./娱乐.html" target="left">娱乐</a></h4>
    <h4><a href="./体育.html" target="left">体育</a></h4>
</body>
//left.html
<body>
    <h4>左</h4>
</body>
//right.html
<body>
    <h4>右页面</h4>
</body>
//体育.html
<body>
    <p><a href="跑步.html" target="right">跑步</a></p>
    <p><a href="羽毛球.html" target="right">羽毛球</a></p>
</body>