系列文章目录

第一章 初识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组成

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

  1. name（用在表单控件中传数据给后端）
  2. class：给css使用
  3. 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>

● 注意

  1. 一定得起name值，起接收作用；value：默认值作用,当用户不能手动输入时采用
  2. 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版本

  1. date
  2. datetime
  3. number
  4. tel
  5. 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型框架页例子

  1. 不能与body共存
  2. 做后台管理系统
  3. 不利于搜索引擎收录
//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>

总结

HTML的基础入门，快来看看吧~相关推荐

  1. 快上车 全套Python零基础入门教程免费分享 ！

    前言 随着近年来Python的兴起,数学建模的语言不仅限于c.c++和matlab,python由于本身自带的科学计算库以及一些图形可视化库,python也成为数学建模的常用编程语言之一. 我们都知道 ...

  2. 小白兔快开门，我是你爸爸。WEB安全基础入门—访问控制漏洞和权限提升

    欢迎关注订阅专栏! WEB安全系列包括如下三个专栏: <WEB安全基础-服务器端漏洞> <WEB安全基础-客户端漏洞> <WEB安全高级-综合利用> 知识点全面细致 ...

  3. 「建模调参」之零基础入门数据挖掘

    Datawhale 作者:徐韬 ,Datawhale优秀学习者 摘要:对于数据挖掘项目,本文将学习如何建模调参?从简单的模型开始,如何去建立一个模型:如何进行交叉验证:如何调节参数优化等. 建模调参: ...

  4. 叮！您收到一份超值Java基础入门资料！

    摘要:Java语言有什么特点?如何最大效率的学习?深浅拷贝到底有何区别?阿里巴巴高级开发工程师为大家带来Java系统解读,带你掌握Java技术要领,突破重点难点,入门面向对象编程,以详细示例带领大家J ...

  5. Python编程语言基础入门教程

    Python编程语言是最近几年发展趋势较火的语言,也是针对新手友好的语言,入门简单上手快.再加上AI人工智能和数据分析的加持,让Python成为关注度最高的编程语言,现在不会Python都不好意思说自 ...

  6. FreeMarker中文帮助手册API文档,基础入门学习文档

    FreeMarker中文帮助手册API文档,基础入门学习文档 分类: 编程技术 发布: bywei 浏览: 7 日期: 2011年5月28日 分享到: QQ空间 新浪微博 腾讯微博 人人网 什么是Fr ...

  7. python怎么输出浮点数_python 零基础入门教程第 2 章：基本数据类型 (一)

    一.什么是数据类型 编程语言通过一些复杂的计算机物理底层机制,创造不同类型的数据,用来表示现实世界中的不同信息,以便于计算机更好的存储和计算. 每种编程语言都会有一些基本的数据类型用来表示现实世界中的 ...

  8. Oracle数据库基础入门《二》Oracle内存结构

    Oracle数据库基础入门<二>Oracle内存结构 Oracle 的内存由系统全局区(System Global Area,简称 SGA)和程序全局区(Program Global Ar ...

  9. python编程零基础-如何零基础入门Python编程？

    Python目前已经成为最受欢迎的编程语言之一,吸引了一大批粉丝,但是很多人在要跨入的时候犹豫了,原因竟然是觉得零基础学习Python太难了,真的是这样吗?零基础入门Python编程学习有什么好的技巧 ...

  10. python零基础能学吗 知乎-如何零基础入门 Python？

    从17年6月入门Python到今天有大半年了,总结一下这半年来自学Python的路径. 本人只在两年前接触过HTML和CSS,但严格来说这两门只能算是标记语言而非编程语言,而且开始学Python的时候 ...

最新文章

  1. php开发 linux作用是什么,linux有什么用？
  2. python使用方法视频-Python读取视频的两种方法（imageio和cv2）
  3. Spring中对于WebApplicationInitializer的理解
  4. 【评论】为什么我的工资最低！
  5. labview圆环里实物动画图形_有趣的图形教案
  6. DLL/OCX文件的注册与数据执行保护DEP
  7. 黑客勒索遭遇霸气回应：不怕，我们有备份
  8. 使命召唤12服务器系统,《使命召唤12》平衡技能系统 排位赛有专属服务器
  9. matlab 删除cell 中的 0 元素
  10. atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerException
  11. 一句话可以改变人的一生
  12. Redis操作工具类——RedisUtil
  13. LinkedIn高级分析师王益：大数据时代的理想主义和现实主义
  14. Camtasia v2021.18汉化屏幕录像软件教程分享
  15. 牛顿法和高斯牛顿法对比
  16. 读《阿里铁军》有感【4000字】
  17. 在数据库中使用关键字作为字段名
  18. eclipse导入idea项目
  19. Graphql中我们应该用什么姿势来实现Resolver?
  20. python将json文件转换为csv文件

热门文章

  1. 邮件传输过程,MUA,MTA,MDA的概念
  2. Vue计算属性和函数的区别
  3. Centos安装MegaCli
  4. 一分钟搞明白什么是维度，什么是事实，什么是度量，什么是粒度
  5. Spring MVC : HandlerMappingIntrospector
  6. C++位操作与、或、非、异或、取反详解
  7. 大疆无人机 MobileSDK（遥控器/手机端）开发 v4版＜2＞
  8. 统计成绩java最高成绩_从键盘输入本次 Java 考试五位学生的成绩,求考试成绩最高分。_学小易找答案...
  9. 我有罪我用了1下午时间终于无师自学用C#开发了俺的领先个Android 浏览器APP我对不起java 社区
  10. icpc2018南京站B题 tournament