HTML基础

最新推荐文章于 2024-12-16 16:52:23 发布
最新推荐文章于 2024-12-16 16:52:23 发布
阅读量4.2k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Javaweb 文章标签： java html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43752912/article/details/124338915

HTML介绍

客户端和服务端

在这里插入图片描述

基础标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个网页</title>
</head>
<body>
Hello World<br>你好
<p>这是第一个段落</p>
<p>这是第二个段落</p>

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

<ol type="A" start="1">
    <li>医生</li>
    <li>护士</li>
    <li>教师</li>
    <li>警察</li>
</ol>

<ul type="circle">
    <li>医生</li>
    <li>护士</li>
    <li>教师</li>
    <li>警察</li>
</ul>

你是<b><i><u>喜欢</u></i></b>是<b>甜</b>月饼还是<i>咸</i><u>月饼</u>?<br/>

水分子的化学式:H<sub>2</sub>O<br/>
氧气的化学式:O<sup>2</sup><br/>

<a href="www.baidu.com" target="_blank" >百度一下</a>

</body>
</html>

<!--
1.html语言是解释型语言，不是编译型，浏览器是容错的

2.html页面中由一对标签组成
title 网页标题
    可以在meta标签中设置编码方式
<br/>表示换行
    br标签是一个单标签。单标签：开始标签和结束标签是同一个
p 段落标签
img 图片标签
    src 图片文件的路径
        路径：相对路径
             绝对路径
    width,height 图片的大小
    alt 图片的提示
h1-h6 标签标题
ol 有序列表
    start 表示开始序号
    type 表示显示类型：A a I i 1(default)
ul 无序列表
    type disc(default), circle, square
span 不换行的块标记
a 超链接
    href 链接的地址
    target
        _self 在本窗口打开
        _blank 在一个新窗口打开
        _parent 在父窗口打开
        _top 在顶层窗口打开
div 层
-->

在这里插入图片描述

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <table border="1" width="600" cellspacing="0" cellpadding="4">
        <tr align="center">
            <th>姓名</th>
            <th>学号</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr align="center">
            <td rowspan="2">2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr align="center">
            <td>总计</td>
            <td colspan="3">5</td>
        </tr>
    </table>
    <hr/>

</body>
</html>

<!--
表格 table
    行 tr
    列 td
    表头列 th

    table中有如下属性（虽然已经淘汰，但是最好了解一下)
        - border:表格边框的粗细
        - width:表格的宽度
        - cellspacing:单元格间距
        - cellpadding:单元格填充
    tr中有一个属性:align -> center , left , right

    rowspan :行合并
    colspan :列合并
-->

在这里插入图片描述

表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <form action="html01.html" method="post">
        昵称: <input type="text" name="nickName" value="请输入你的昵称"/><br/>
        密码: <input type="password" name="pwd"/><br/>
        性别: <input type="radio" name="gender" value="male" checked/>男
             <input type="radio" name="gender" value="female"/>女<br/>
        爱好: <input type="checkbox" name="hobby" value="basketball"/>篮球
             <input type="checkbox" name="hobby" value="football"/>足球
             <input type="checkbox" name="hobby" value="earth"/>地球<br/>
        星座: <select name="star">
                <option value="1">白羊</option>
                <option value="2">金牛</option>
                <option value="3">双子</option>
                <option value="4">天秤</option>
             </select><br/>
        备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
        <input type="submit" value=" 注 册 "/>
        <input type="reset" value=" 重 置 "/>
        <input type="submit" value=" 这是一个普通按钮 "/>
    </form>
</body>
</html>

<!--
input type="text”表示文本框，其中 name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
input type="password”表示密码框
input type="radio”表示单选按钮。需要注意的是，name属性值保持一致，这样才会有互斥的效果;可以通过checked属性设置默认选中的项
input type="checkbox”表示复选框。name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
select表示下拉列表。每一个选项是option，其中value属性是发送给服务器的值, selected表示默认选中的项
textarea表示多行文本框（或者称之为文本域),它的value值就是开始结束标签之间的内容
input type="submit”表示提交按钮
input type="reset”表示重置按钮
input type="button”表示普通按钮
-->

在这里插入图片描述

frameset-iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<frameset rows="20%,*" frameborder="no">
    <frame src="frames/top.html"/>
    <frameset cols="15%,*">
        <frame src="frames/left.html"/>
        <frameset rows="80%,*">
            <frame src="frames/main.html"/>
            <frame src="frames/bottom.html"/>
        </frameset>
    </frameset>
</frameset>

</html>

<!--
frameset表示页面框架﹐这个标签已经淘汰，了解，不需要掌握frame表示框架中的具体页面引用
iframe在一个页面嵌入一个子页面
-->

在这里插入图片描述

HTML 从 0 到 1：小白也能轻松入门的超详细指南
yuhang_17的博客
06-10 1120
本文系统讲解HTML入门知识。HTML作为超文本标记语言，是网页开发的基础，用于搭建网页骨架。文中详解HTML标签、属性及嵌套规则，介绍文档基本结构，包括<!DOCTYPE html>声明、<html>根标签、<head>元信息区和<body>内容区。列举标题、段落、列表、链接等常用标签用法，演示从0编写简单网页的步骤，包括工具准备、代码编写、保存预览。最后总结核心要点，建议结合CSS、JavaScript深入学习，强调实践与参考官方资源的重要性，助初学者迈出网页开发第一步。
HTML入门02
最新发布
weixin_41468241的博客
01-19 3357
a>2、双标签：h1-h6、div、文本颜色、p段落、a、ul li。5、锚点？如：div、ol、ul、li、dl、dt、dd、h1-h6。4、
html笔记
jsjbdjhd的博客
11-30 1万+
你喜欢的食物：<input type="checkbox" name="sex" id="" value="鱼">鱼。<input type="text" value="username" id="" name="元素的名称"><input type="radio" name="sex" id="" value="女">女 <br>性别：<input type="radio" name="sex" id="" value="男">男。同一个页面，可以存在多个class值相同的标签-->
html
weixin_49308607的博客
11-25 2471
HTML 第一个html程序 <!-- DOCTYPE:告诉浏览器我们要使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head标签代表网页头部 --> <head> <!-- meta描述性标签，它用来描述我们网站的一些信息 --> <!-- meta一般用来做SEO --> <meta charset="UTF-8"> &
HTML 注册案例 学习 制作
CodeDoraemon的博客
01-25 459
案例目标 2. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
html全局属性
十三阿哥的博客
05-25 1637
【代码】html全局属性。
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2880
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML基础知识入门大全
HTDiiii的博客
08-20 3582
HTML 什么是 HTML HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。 HTML 标签/元素 HTML 属性 第一个 HTML <!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
html基础知识选择题,HTML笔试题目(附答案)HTML基础知识笔试题目(附答案).pdf
weixin_39877805的博客
06-04 2619
1、{HTML 题目 } 在 HTML页面中制作一个图像，想要在鼠标指向这个图像时浮出一条提示信息，应该使用的参数是 :( C ) ( 选择 1 项 )A) POP B) SRC C) ALT D) MSG2、{HTML题目 } 在页面中看不见的表单元素是那种？ ( C ) (选择 1 项)A) B )C) D )3、(HT...
HTML零基础入门教学
小白成长之路
12-16 6987
此篇为零基础的小伙伴介绍HTML。干货满满，快来看看吧！！！
html基础
weixin_45951689的博客
09-17 1926
<!DOCTYPE html><!--约束，声明--> <html lang="zh_CN"> <!--html标签表示html的开始 lang="en"表示英文，lang="zh_CN"表示中文--> <head> <!--表示头部信息，一般包含三部分，title标签，css样式，js代码--> <meta charset="UTF-8"> <!--表示当前页面使用UTF-8字符集-->
HTML基础--CSS样式表（一）
m0_50315078的博客
08-04 4558
HTML基础之CSS样式表（一）
web---HTML基础知识
Allure泽宇的博客
06-11 6003
HTML基础知识内容总结
HTML5基础知识点总结（一）
张超的博客
01-12 2647
HTML5基础知识（一） HTML是一个超文本标记语言，它不属于一种编程语言， 基本框架如下： <!-- 声明该文档为HTML类型 --> <!DOCTYPE html> <!-- <html></html>指定了html语句的范围，lang="en"指的是语言为英文，中文为"zh" --> <html lang="en"> <!-- <head></head>规定了一些基本属性 --> <he
html 基础
dong_vip的博客
02-04 660
HTML 基础 // 网页配置 标题 网页内容 <> DTD: 文档类型声明Doc Type Declaration 一共有7种, 3中html4.0.1, 3种XHTML1.0的,1种HTML5 三个小种 : strict transtitional frame
前端——html（基础）
老赖的小弟的博客
03-29 2056
双标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1&gt
好看实用的六个html登录页面
ss810540895的博客
07-15 13万+
原文1.效果图： 代码： 2.效果图： 源码： 3.效果图：源码： 4.效果图：源码： 5.效果图： 源码： 6.效果图：源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty
热门推荐
u014497548的博客
06-03 61万+
Title img,div,body{margin: 0;padding: 0;} .orgindiv {width: 200px;height: 200px;position: relative;float: left;margin-left: 100px;} .orgindiv img{width: 100%;height: 100%;}
HTML基础打造个人主页教程
HTML基础结构 一个基本的HTML文档包含以下几个部分： - `<!DOCTYPE html>`：声明文档类型，告诉浏览器这是HTML5文档。 - `<html>`：包裹整个HTML文档的根元素。 - `<head>`：包含文档的元数据，如标题、链接到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值