HTML基础

已于 2022-10-25 13:59:40 修改
阅读量139 收藏
点赞数
文章标签： html 前端
于 2022-10-25 13:36:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56127990/article/details/127511717
版权

01.Web基础

C/S：客户端/服务器

B/S：浏览器/服务器

0.2HTML结构

<!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>demo</title>
</head>
<body>
</body>
</html>

2.1框架标签

  • <!DOMTYPE html>定义文档类型

  • <html>定义HTML文档

  • <head> 定义头部文件 <head>中的元素可以引用脚本，指示浏览器在哪里可以找到样式表和提供元信息等等。 在head部分中可以使用的标签<base>,<link>,<meta>,<scripe>,<style>,<title>

  • <body> 定义文档主体

base标签

meta标签

2.2 body区域常用标签

  • body定义文档主体

  • body元素包含文档所有内容(表格，列表，文本，超链接，图像)

文本标签

标题标签

<h1~6><h1~6>标签等级分为1-6级，默认字体大小依次减小

字体标签

<b></b>,<strong></strong> 加粗

<sup></sup> 上标上标

<sub></sub>下标下标

<s></s>删除线 删除线

<u></u>下划线

<i></i>,<em></em> 斜体

<code></code> public void main() //显示代码

<cite></cite>引用

格式化标签

<P></P>段落标签

换行标签

<hr/>分割线标签

<pre></pre>预格式化标签，可以随意展示文本的样式和空格，但是要注意预格式化标签不适合用tab键

连接标签

<a></a>

href属性可以存放：图片路径，文本路径，网址和锚点

target属性可以随意赋值：self：本页面跳转；bank:打开新的页面；[name]:在指定名字的标签上打开，一般配合iframe标签使用

图片标签

<img></img>

src属性是用于设置图片的地址

alt属性是失效代替

列表标签

  • 无序列表（在工作中最常用的列表，"ul"是定义无序列表的标签,"li"是具体的列表项）

    type属性： circle(空心圆)/disk(实心圆)/square(方形)

    也可以使用样式表对标签进行设置

  • 有序列表（可以再列表项前标记序号，"ol"是定义有序列表的标签,"li"是具体的列表项）

    type属性：1/i/I/a/A（默认排序12345/i~iii/I~III/a~b~c/A~B~C）

    也可以使用样式表对标签的type进行设置

  • 自定义列表（可以设置标题，对数据进行描述，"dl"是定义有序列表的标签，"dt"可以设置标题，"dd"是具体的列表项）

表格标签

  • 表格标签用于编制表格，"table"用于定义表格，"tr"定义表格行，"td"定义单元格,"th"定义单元格的同时默认单元格中的内容居中加粗

  • "th/td"大多数属性可以在样式表中定义，目前只需要了解"colspan"跨列属性和"rowspawn"的跨行属性

表单标签

  • 表单标签 侧重于与后端发送数据

  • 主要是以"input"文本标签为主，以"name"属性为辅，通过"form"表单向后端发送数据

  • 除了"input"标签以外还有大文本标签"textarea";下拉菜单标签"select"

  • input文本标签属性

    • type :text（文本）,count（总计）,date（日期）,botton（按钮）,radio（单选框）,checkbox（复选框）,hidden（隐藏）,submit（提交），reset（重置）

    • name :name设置的值必须要和后端接受前端数据的参数一致

    • value :显示在页面上的值。除了 type='hidden' 的除外，因为 type='hidden'为隐藏标签

iframe标签

  • iframe标签用于在一个页面中嵌入另一个页面

  • 配合'a'标签使用的时候，可以用'a'标签指定'iframe'指向的页面

    <a href="http://www.baidu.com" traget="iframe-test">显示百度</a>
<iframe name = 'iframe-test' width='1000' height='1000'></iframe>

div&span标签

  • div和span可以说是html文档中最重要的容器标签

  • div是块状容器，独占一行，主要用于搭建网页布局，页面整体布局就靠它

  • span是行级容器，其大小自适应与包裹的对象

Tournesol-xwx
关注
html基础教程之HTML 标题
html基础教程
02-03 4514
HTML标题 在 HTML 文档中，标题很重要。 HTML 标题 标题（Heading）是通过 <h1> – <h6> 标签进行定义的. <h1> 定义最大的标题。 <h6> 定义最小的标题。 实例 <h1>这是一个标题。</h1> <h2>这是一个标题。</h2> <h3>这...
HTML基础知识点总结
weixin_64704029的博客
07-28 2178
html知识点
HTML基础标签
weixin_45348240的博客
03-23 6099
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
HTML基础知识
xuan971130的博客
03-02 2944
一、基础知识： 1.网站：许多网页的集合。 2.HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。不是一种变编程语言，而是一种标记语言。 3.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面。 4.Web标准的组成 ...
前端-HTML基础知识详解
qq_52262831的博客
12-23 4982
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
HTML基础框架
Black_Ball的博客
01-01 3328
目录 HTML显示文本 HTML显示图片 HTML播放音乐 HTML询问用户 HTML布局 HTML显示文本 HTML显示图片 HTML播放音乐 HTML询问用户 HTML布局
HTML初识——网页设计html基础
qq_45864756的博客
08-29 5522
html初识
【HTML基础】HTML的基本结构
ebb29bbe的博客
09-13 6635
HTML基本结构包含html标记，head标记，body标记...
WEB安全 HTML基础
weixin_63289925的博客
04-03 3450
1.HTML页面架构： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html> 2.HTML常见标签： <1>meta标签 META标签是HTML标记HEAD区...
HTML基础模板
qq_61690596的博客
07-18 2105
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">
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4835
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML基础网页布局代码写法
m0_51826406的博客
03-07 8830
W3C标准 W3C World Wide Web Consortium 万维网联盟 中立性技术标准机构 W3C标准包括 结构化标准语言（HTML XML） 表现标准语言（CSS） 行为标准（DOM ECMAScript） 在idea创建一个工程 开始学习HTML基础 <!--注释 DOCTYPE：告诉浏览器我们使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head代表网页头部 --> <hea
【移动端】Viewport 视口
小秀的博客
10-04 1483
（视口）是指浏览器中用户可见的那部分网页内容的区域，简单来说，它是用户当前看到的网页的“窗口”区域。在不同的设备上，Viewport 的大小会有所不同。
React 插入不转义的html
最新发布
y523648的博客
10-08 134
在 React 中，字符串作为内容插入到 JSX 中，默认会被转义。这是为了防止 执行恶意代码，XSS（跨站脚本攻击）等安全问题。如果想要 HTML 不被转义，可以使用dangerouslySetInnerHTML属性。
XHTML 简介
wjs2024的博客
10-04 493
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
HTML的修饰(CSS) -- 第三课
ZxVSaccount的博客
10-01 1046
前面我们已经了解了html的一些基本使用方法,我们再写html代码的时候不可避免的会改变其中的一些样式,而这就有一种专门的方式用来修饰html编写的网页的样式,它就是css!本节主要介绍了css 的基本用法和属性,内容较多,多多练习,熟能生巧!
HTML基础入门：从结构到应用详解
本资源是一份针对初学者的HTML基础教程，通过PPT形式结合实际代码，系统地介绍了网页开发中最基础的HTML语言。HTML（HyperText Markup Language）是一种标记语言，用于创建和设计网页结构。学习内容主要包括以下几个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值