HTML基基基基基础

最新推荐文章于 2024-09-23 17:12:42 发布
最新推荐文章于 2024-09-23 17:12:42 发布
阅读量801 收藏 16
点赞数 22
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kiuiju/article/details/135089140
版权

W3C ：万维网联盟

W3C标准包括

结构化标准语言（HTML、XML)

表现标准语言（CSS)

行为标准（DOM、ECMAScript)

基本信息

注释： 

<!--规范默认是html可以不屑-->
<!DOCTYPE html>
<html lang="en">
<!--head代表网络头部-->
<head>
<!--meta描述标签 描述网站信息-->
    <meta charset="UTF-8">
    <meta name="me"  content="学习JAVA">
<!--网页标题-->
    <title>第一个网页</title>
</head>
<!--body网页主体-->
<body> 
Hi!JAVA!!
</body>
</html>
标题标签
<h1>一级标题</h1>
<h2>二级标题</h>
 ············
换行标签
水平线标签
字体样式标签
注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本结构</title>
</head>
<body>
<!--标题-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!--水平线标签-->
<hr/>
花间一壶酒，独酌无相亲。
举杯邀明月，对影成三人。
月既不解饮，影徒随我身。
暂伴月将影，行乐须及春。
我歌月徘徊，我舞影零乱。
醒时相交欢，醉后各分散。
永结无情游，相期邈云汉。
<hr/>
<!--段落标签-->
<p>花间一壶酒，独酌无相亲。</p>
<p>举杯邀明月，对影成三人。</p>
<p>月既不解饮，影徒随我身。</p>
<p>暂伴月将影，行乐须及春。</p>
<p>我歌月徘徊，我舞影零乱。</p>
<p>醒时相交欢，醉后各分散。</p>
<p>永结无情游，相期邈云汉。</p>
<hr/>
<!--换行-->
花间一壶酒，独酌无相亲。</br>
举杯邀明月，对影成三人。</br>
月既不解饮，影徒随我身。</br>
暂伴月将影，行乐须及春。</br>
我歌月徘徊，我舞影零乱。</br>
醒时相交欢，醉后各分散。</br>
永结无情游，相期邈云汉。</br>
<hr/>
<!--字体样式-->
粗体:<strong>i love java</strong><br/>
斜体:<em>i love english</em><br/>
空格：我&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你



</body>
</html>
图像标签
<img src="../DATA/image/1.png" alt="机甲" title="悬停文字" width="500" height="350">
超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳转超链接</title>
</head>
<body>
<a name="point">  </a>
<!--href跳转到那（必填）
    target在哪个窗口打开//默认当前窗口
    _blank另外一个窗口
    _self当前窗口打开
-->
<a href="图像标签.html" target="_blank">点击看美女</a>
<a href="https:/www.baidu.com" target="_self">点击搜索</a><br/>
<a href="https:/www.baidu.com">
    <img src="../DATA/image/1.png" alt="机甲" title="悬停文字" width="500" height="350">
</a>
<p>花间一壶酒，独酌无相亲。</p>
<p>举杯邀明月，对影成三人。</p>
<p>月既不解饮，影徒随我身。</p>
<p>暂伴月将影，行乐须及春。</p>
<p>我歌月徘徊，我舞影零乱。</p>
<p>醒时相交欢，醉后各分散。</p>
<p>永结无情游，相期邈云汉。</p>
<hr/>
<p>花间一壶酒，独酌无相亲。</p>
<p>举杯邀明月，对影成三人。</p>
<p>月既不解饮，影徒随我身。</p>
<p>暂伴月将影，行乐须及春。</p>
<p>我歌月徘徊，我舞影零乱。</p>
<p>醒时相交欢，醉后各分散。</p>
<p>永结无情游，相期邈云汉。</p>
<hr/><p>花间一壶酒，独酌无相亲。</p>
<p>举杯邀明月，对影成三人。</p>
<p>月既不解饮，影徒随我身。</p>
<p>暂伴月将影，行乐须及春。</p>
<p>我歌月徘徊，我舞影零乱。</p>
<p>醒时相交欢，醉后各分散。</p>
<p>永结无情游，相期邈云汉。</p>
<hr/><p>花间一壶酒，独酌无相亲。</p>
<p>举杯邀明月，对影成三人。</p>
<p>月既不解饮，影徒随我身。</p>
<p>暂伴月将影，行乐须及春。</p>
<p>我歌月徘徊，我舞影零乱。</p>
<p>醒时相交欢，醉后各分散。</p>
<p>永结无情游，相期邈云汉。</p><br/>
<!--功能性链接-->
<!--邮件链接-->
<a href="mailto:2773804730@qq.com">点击联系</a>
<hr/>
<!--锚链接-->
<a href="#point">点击回到顶部</a><br/>
<a name="down">  </a>
</body>
</html>
块元素

会新起一行的元素//

行内元素

再行内撑开宽度//

列表
有序列表
无序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
  <li>花间一壶酒，独酌无相亲。</li>
  <li>举杯邀明月，对影成三人。</li>
  <li>月既不解饮，影徒随我身。</li>
  <li>暂伴月将影，行乐须及春。</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>花间一壶酒，独酌无相亲。</li>
    <li>举杯邀明月，对影成三人。</li>
    <li>月既不解饮，影徒随我身。</li>
    <li>暂伴月将影，行乐须及春。</li>
</ul>
<hr/>
<!--自定义列表-->
<!--
dt:列表名称
-->
<dl>
    <dt>学科</dt>

    <dd>语文</dd>
    <dd>数学</dd>
    <dd>外语</dd>
    <dd>体育</dd>
    <dt>美食</dt>

    <dd>冰糖葫芦</dd>
    <dd>火锅</dd>
    <dd>烧烤</dd>
    <dd>猪肉</dd>
</dl>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--
table 表格
tr  行
td  列
border  设置行列间距
colspan 跨列
rowspan 跨行
-->
<table border="1px">
  <tr>
    <td colspan="2">1-1</td>
    <td>1-2</td>
    <td>1-3</td>
  </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
</body>
</html>
媒体元素
视频元素
音频元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体</title>
</head>
<body>
<!--
video       视频
controls    控制条
autoplay    自动播放
-->
<video src="../DATA/video/2.mp4" controls autoplay> </video>
<br/>
<!--
audio        音频
controls    控制条
autoplay    自动播放
-->
<audio src="../DATA/audio/a.m4a" controls  autoplay ></audio>
</body>
</html>

页面结构分析

header 头部

footer 脚部

section 独立区域

article 独立文章内容

aside 相关内容（常用于侧边栏）

nav 导航类辅助内容

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--
iframe 内联框架
src  地址里边需要放什么，可以写也可以不写 用超链接跳转到这个界面，用这个界面打开超链接的内容，src=href
name  框架的名字
width height 宽高
-->
<iframe src="" name="MV" width="500" height="800"> </iframe><br/>
<a href="../DATA/video/2.mp4" target="MV">点击</a>
</body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--
form                    表单
action                  提交到哪里
method                  提交方式
get：不看全在url可以看见，但高效
post：安全 传输大文件
input type="text"       文本框
input type="password"    密码框
input type="submit"        提交
input type="reset"          重置
-->
<form action="内联框架.html" method="get">
  <p>用户名：<input type="text" name="账号"></p>
  <p>用户名：<input type="password" name="密码"></p>
  <p>
      <input type="submit">
      <input type="reset">
  </p>

</form>
</body>
</html>
表单语法

type :指定元素类型，text、password、checkbox、radio（单选框）、submit、reset、file、hidden、image、button、默认为text

name :表单元素名称

value：元素初始值、radio必须有初始值

size ：初始宽度，当type 为text、password时，以字符为单位，其它类型以像素为单位

maxlength：当type 为text、password时，输入最大字符数

checked：type为radio或着checkbox，指定按钮是否被选中

readonly:只读

disabled:禁用

hidden:隐藏

checkded、selected：默认

placeholder:提示

required:非空判断

pattern:正则表达式

<!--增强鼠标可用性-->  
    <p>
        <label for="m">点击</label>
            <input type="text" id="m">
    </p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单语法</title>
</head>
<body>

<!--
type="radio"        单选     同一组name相同的，单选一个
type="checkbox"     多选      同一组name相同的多选
type="button"       按钮
type="image"        图片按钮
type="submit"       提交按钮
type="reset"        重置按钮
 type="file"        上传文件
 select             下拉框
 textarea           文本域   cols="50" rows="20"宽高
type="email"        邮箱
type="url"          URL
type="range"        滑块
type="number"       数字
type="search"       搜索
-->
<form action="内联框架.html" method="get">
    <p>用户名：<input type="text" name="账号"></p>
    <p>用户名：<input type="password" name="密码"></p>
    <p>性别： <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女</p>
    <p>爱好：
        <input type="checkbox" value="look" name="1">看美女
        <input type="checkbox" value="sleep" name="1">睡觉
        <input type="checkbox" value="study" name="1">学习
        <input type="checkbox" value="eat" name="1">吃饭
    </p>
    <p>按钮：
        <input type="button" value="点击长高" name="butt1">
        <input type="image" src="../DATA/image/1.png" width="20" height="20">
    </p>

    <p>下拉框
<!--selected默认-->
        <select name="国家">
            <option value="china" selected>中国</option>
            <option value="us">美国</option>
            <option value="eg">俄国</option>
        </select>
    </p>
    <p>文本域
        <textarea name="textArea" cols="50" rows="20">内容:</textarea>
    </p>
    <p>邮箱：
        <input type="email" name="em">
    </p>
    <p>URL:
        <input type="url" name="ur">
    </p>
    <p>滑块:
        <input type="range" name="voice" max="100" min="0" step="1">
    </p>
    <p>数字:
        <input type="number" name="num" max="50" min="0" step="2">
    </p>
    <p>搜索:
        <input type="search" name="ser">
    </p>




    <p>
        <input type="file" name="files">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>
</body>
</html>
大春66
关注
HTML基基基础学习
qq_46333857的博客
11-19 405
HTML基础学习什么是HTMLHTML书写规范HTML基本标签 什么是HTML HTML是超文本标记语言 1.超文本：页面内可以包含图片，连接，甚至是音乐，程序等非文字元素 2.标记：标签，不同的标签实现不同的功能 3.语言：人与计算机的交互工具 HTML通过使用标签，标记描述网页，展示信息显示给用户 HTML书写规范 * HTML标签是以尖号包含的关键字 * HTML标签通常是成对出现，有开始就有结束 * HTML通常都有属性，格式：属性=“属性值”（多个属性之间用空格隔开） * HTML
vue非常详细基基基基基础
weixin_45985175的博客
07-26 340
1、el挂载点和data Vue会管理el选项命中的元素及其内部的后代元素，可以使用其他的选择器，但是建议使用id选择器 Vue中用到的数据定义到data中，data中可以写复杂类型的数据，渲染复杂类型数据时，遵守js的语法就可以 <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app">
浅浅浅学 Spring 基基基础
m0_55679301的博客
03-17 102
Spring基基基基础学习，回顾，总结重点知识。
nginx基基基础
qq_35010942的博客
08-24 123
windiw: 启动： start nginx 停止： nginx -s stop 重启： nginx -s reload 查看配置文件是否修改正确： nginx -t -c /nginx-1.15.2/conf/nginx.conf 负载均衡相关配置： 负载均衡策略： 循环（默认） weight，值越大次数越多。 ip_hash，同一ip访问同一服务器，解决了session共享问题。 ...
（一）Mybatis基基基础
weixin_30522095的博客
07-12 57
每个MyBatis的应用程序都以一个SqlSessionFactory对象的实例为核心。 SqlSessionFactoryBuild提供了多个Build方法构建SqlSessionFactory。其实真正的只有三种。 1.通过Reader、String（environment）、Properties（properties） 2.通过InputStream、String（environ...
浅浅浅学 Nginx 基基基础（较为完整）
m0_55679301的博客
04-03 360
在这篇 CSDN 文章中，我们将为您介绍 Nginx 这一高性能、可扩展且安全的 Web 服务器软件。作为一款广泛应用于各种 Web 应用程序的服务器，Nginx 已成为许多开发者和系统管理员的首选。 我们将简要介绍 Nginx 的主要特性，包括其轻量级架构、高并发性能以及反向代理和负载均衡等功能。
学习python的第10天距离大师100天还差90（爬虫基基基础小知识）
ZiXiaoAo的博客
07-04 181
爬虫（网络数据采集）按照程序员的想法，由程序员自定义规则编写程序批量的爬取数据（图片、视频、音频、数据等）1.解析HTML页面2.根据前端的语法或者正则表达式提取数据3.保存数据常用的工具：requests、urllib、selenium、playwariterrequests:通过网址向服务器发送请求，等待服务器的响应结果（python中常用的工具）pip install requests status_code:状态码 -->判断服务器和网页状态200:表示程序和服务器正常通信403：表示服务器理
webpack基础学习-入门篇
badmoonc的博客
01-23 506
本文对webpack做个基础的学习了解，后续会陆续推出相关的进阶文章，希望大家可以通过文章能够对wbpack有个全新的认识。 本文demo地址：https://github.com/BadMooncc/webpack-demo.git 1、背景 由于现代浏览器到目前为止不支持js的模块化，但随着项目越来越大模块化无疑更易于项目的管理和维护。那么我们需要用但浏览器不支持，怎么办呢。webpack由此诞生。由于webpack基于node平台，所以…你要稍微会一点node。 2、webpack是什么？ we
可隐藏选项卡html,用js控制选项卡的隐藏与显示
weixin_30689519的博客
06-03 324
通过使用ul和div来，借助于jquery来实现选项卡的显示与隐藏基基基基本本本本信信信信息息息息哈哈哈哈$(document).ready(function (e) {$(‘.tab‘).each(function (e) {if (e == 0)$(this).show();//首次加载的时候默认显示第一个else$(this).hide();});})//给每一个atab绑定单击事件$(‘....
HTML基基基础学习.docx
11-22
HTML的基础学习主要涵盖以下几个方面： 1. 结构标签：HTML中的标签是用来描述网页内容和结构的，如`<p>`代表段落，`<h1>`至`<h6>`代表不同级别的标题，`<img>`用于插入图片，`<a>`定义超链接等。这些标签组合起来，...
delphi代码格式化
05-15
Delphi是一种基于Object Pascal语言的集成开发环境（IDE），用于创建Windows、macOS、iOS和Android平台的应用程序。代码格式化是编程过程中非常重要的一环，它有助于提高代码的可读性和可维护性，使得团队成员之间的...
机器学习里面的基函数_机器学习技法 之 径向基函数网络（RBF Network）
weixin_39983404的博客
12-29 390
径向基函数网络(Radial Basis Function Network)：就是将基假设函数进行线性聚合。html径向基函数网络假设函数(RBF Network Hypothesis)先回顾一下高斯支持向量机(Gaussian SVM)：webgsvm(x)=sign⁡(∑SVαnynexp⁡(−γ∥x−xn∥2)+b)g _ { \mathrm { svm } } ( \mathbf { x ...
实现用户注册和登录
热门推荐
weixin_44275663的博客
01-09 2万+
本文主要介绍一下实现用户登录和注册功能 最近一段学习了java web当中的一些知识，利用所学知识，实现了用户注册和登录功能，为了以后学习，写在这保存一下，方便以后用，也方便大家学习交流。 1.数据库设计 首先 根据需要，因为本次编程实现用户注册界面，本次需要访问数据库，建立shopping数据库，在数据库里面创建表users,代码如下： DROP TABLE IF EXISTS `user...
html实现黑白棋
woshiyaozhenyang的博客
09-23 526
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>黑白棋</title> <style> body { display: flex; flex-direction: column; align-items: center;
web基础：域名、网页、HTML、web版本
最新发布
shyuu的博客
09-23 1382
web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
HTML中的表单（超详细）
qq_63946637的博客
09-20 1793
本文旨在帮助大家学习HTML中有关表单的知识
html,js,react三种方法编写helloworld理解virtual dom
09-23 485
学习任何一个新语言，好像都从helloworld开始。：）。
html，css基础知识点笔记（二）
Zwwxd666的博客
09-18 1084
本文主要教列表的样式设计。
无砟轨道路基基床动态特性研究：非线性影响与防排水关键
本文主要探讨了"无砟轨道路基基床的动态特性"这一主题，针对2010年的研究成果，作者蒋关鲁、孔祥辉、孟利吉和王智猛利用了无砟轨道路基基床模型和现场试验相结合的方法。他们的研究目标是深入理解路基在分级静载和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值