HTML语法and使用

最新推荐文章于 2021-06-25 01:49:54 发布
最新推荐文章于 2021-06-25 01:49:54 发布
阅读量1.1k 收藏 6
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cricket_7/article/details/84098801
版权

 1，HTML的简单介绍：

    goole 在6.0之后把apche 里面的技术砍掉全部用goole的

    [0]由w3c组织研发

    [1]什么是html

     [1.1]HTML 指的是超文本标记语言 (Hyper Text Markup Language)

     [1.2]HTML 不是一种编程语言，而是一种标记语言 (markup language) 没有逻辑可言

     [1.3]标记语言是一套标记标签 (markup tag)

     [1.4]HTML 使用标记标签来描述网页用来显示数据的

    [2]html与xml的区别，xml标签都是自定义的 html中的标签都是预定义好的不能更改 一但更改一定报错

    [3]html中的标签不用成对出现.比如:<br/>        

    [4]html格式

     <html>     

     <body>        body 里面的内容就是网页的里面的内容

     <h1>My First Heading</h1>

               <p>标签</p>

     </body>

     </html>

 

2，HTML基本标签

[1]字体

font 代表字体，size代表字体的大小，size的范围是从1~7,如果大于7也按7显示

color 代表颜色      16进制的颜色 6位前2位代表的R，中间2位代表的G 后面两位代表的B

    RGB red green blue 三原色

<html>

    <body>

        <font size ="9" color="#aabbcc">王炸<font>

    </body>

</html>

 

[2]标题 加粗 H1~H6 越小越大

<html>

    <body>

        <h1>家有五宝</h1>

        <h2>家有五宝</h2>

        <h3>家有五宝</h3>

        <h4>家有五宝</h4>

        <hr>

        <h5>家有五宝</h5>

        <h6>家有五宝</h6>

    </body>

</html>

[3]水平线

<hr/>

 

[4]注释 和XML相似 HTML在源代码里面可以看到

<!-- -->

[5]特殊的字符

空格:&nbsp;

<html>

    <body>

        <h1>家有五&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp宝</h1>

        <!-- 老头子-->

    </body>

</html>

[6]head 可以放标题还可以放meta name 信息提供查找信息

<html>

    <body>

        <h1>家有五&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp宝</h1>

        <!-- 老头子-->

        <head>

            <title>家有五宝</title>        更改标题

        </head>

    </body>

</html>

    

 

[7]图片标签

img 图片标签

src 图片地址

width:宽度

height:高度

border:边框

alt: 图片的描述

<img src="c.jdp" white="400" height ="400" border=2 alt ="王炸">

[8]超连接

a 超连接

href 连接地址

target _self 自身

_blank 新的

        <a href="#" target="_self">家有五宝</a>

<a href="#" target="_blank">家有五宝</a>  <!== 家有五宝只是一个连接 可以改成任何超链接的形式==>

 

3，HTML列表标签

[1]自定义列表

dl 定义列表

dt 上层内容

dd 下层内容

<html>

    <body>

        <dl>

            <dt>三国演义</dt>

            <dd>大乔</dd>

            <dd>小乔</dd>

            <dd>貂蝉</dd>

        </dl>

    </body>

</html>

[2]无序列表

ul type="circle"圆 type="square"方块 里面放 li

<ul type = "square">

            <li>大乔</li>

            <li>小乔</li>

            <li>貂蝉</li>

[3]有序列表 多了一个序号

ol type="a" type="i" 里面放 li

<ol type ="a">

            <li>大乔</li>

            <li>小乔</li>

            <li>貂蝉</li>

有序和无序表示不用。有序用符号来表示。无序没有符号

 

4，HTML表格标签

[1]table

border -->边框

bodrercolor -->边框颜色

cellspacing -->单元格之间的距离

cellpadding -->单元格与内容之间的距离

[2]tr        表示行

align

[3]td        表示列

 

 

单元格合并 是在td上进行操作的

 

小技巧：先数表格一共有多少行。在数每行有多少列

colspan 跨列

rowspan 跨行

 

 

跨行不包括自己

 

5，HTML表单标签

[0]form -->可以把控件上面的数据提交到服务器不写在form里面数据无法发送

method

name 属性 ：action 提交的时候就会把这个值带过去，如果有显示需要添加value值来确定

get 以拼装的形式把数据提交给服务器、采用键值对的形式、数据都显示在地址栏上面 不安全、数据大小有限制 最大不能超过1kb(浏览器规定) 4kb(http协议规定)

post 以请求体的形式把数据提交给服务器 对数据大小没有限制

action

提交的地址

get的形式

 

[1]普通文本

<input type="text" />

[2]密码输入框

<input type="password" />

[3]普通按钮

<input type="button" value="登录"/>

[4]单选按钮

<input type="radio" name="sex" value=""/>

注意：加上一个name属性 要求name属性的值相同

[5]复选框  

checkbox 添加复选框

checked 选中

<input type="checkbox" checked="checked" name="" value=""/>

[6]隐藏项

<input type="hidden"/>

[7]文件输入项

<input type="file"/>

[8]下拉选择框

<select nmae="">

<option value="">1990<option>

<option value="">1991<option>

<option selected="selected" value="">1992<option>

</select>

[9]文本域

<textarea rows=10 cols=5>

<textared>

[10]提交重置按钮

<input type="submit" value="登录"/>        

<input type="reset"/>

6，其他标签

[1]pre 原样输出 里面写什么就原样输出什么

[2]p 段落

[3]s 内容带中划线

[4]u 内容带下划线

[5]b 内容加粗

[6]i 内容斜体

[7]div 块元素 ----会自动换行

[8]span 行内元素 ----不会自动换行

 

div

 

HTML案例

 

<html>

    <body>

        <from action = "#" method = "get">

        <table>

            <tr>

                <td>注册邮箱：</td>

                <td><input type ="text"></td>

            </tr>

            <tr>

                <td></td>

                <td>你还可以使用<a href ="#">帐号</a>注册或者<a href = "#">手机号</a>注册</td>

            </tr>

            <tr>

                <td>创建密码：</td>

                <td><input type ="password"></td>

            </tr>

            <tr>

                <td>真实姓名：</td>

                <td><input type ="text"></td>

            </tr>

            <tr>

                <td>性别：</td>

                <td><input type ="radio" name = "sex" value = "nan"/>男<input type ="radio" name = "sex" value = "nv"/>女</td>

            </tr>

            <tr>

                <td>生日：</td>

                <td>

                    <select>

                        <option>1993</option>

                        <option>1994</option>

                        <option>1996</option>

                    

                    </select>年

                    <select>

                        <option>12</option>

                        <option>1</option>

                        <option>2</option>

                    </select>月

                    <select>

                        <option>23</option>

                        <option>24</option>

                        <option>25</option>

                    </select>日

                </td>

            </tr>

            <tr>

                <td>我现在：</td>

                <td>

                    <select>

                        <option>在上课</option>

                        <option>在打游戏</option>

                        <option>在神游</option>

                    

                    </select>

 

                </td>

            </tr>

            <tr>

                <td></td>

                <td>

                    <img src="verycode.gif"/>

                    <a href = "#">看不清楚换一张</a>

                </td>

            </tr>

            <tr>

                <td>验证码</td>

                            

                <td><input type = "text"></td>

            

            </tr>        

            <tr>

                <td></td>                            

                <td><input type = "image" src ="but_reg.gif"></td>            

            </tr>    

        </table>

        </from>

    </body>

</html>

 

 

 

 

 

兴帅_
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html 运算符输入,逻辑运算符&& || ！的使用
weixin_39590868的博客
06-08 4245
所谓逻辑运算符就是与&&、或||、非! 三种，逻辑运算符又叫条件运算符，即运算的结果只有两种，真(true)或假(false)。在进行逻辑运算学习前，我们先复习一下非Boolean类型转换为Boolean的规则：使用Boolean()函数(1)数字 --> 布尔除了0和NaN，其余都是true(2)字符串 --> 布尔除了空字符串，其余都是true(3)null和und...
HTML&CSS的语法与使用
yequan634299391的博客
09-04 802
互联网原理 互联网原理：上网即请求数据 HTML：制作网页文件 上网时，用户通过客户端发送http请求到服务器，服务器端将对应请求找到后，通过http响应传给本地计算机，计算机加载网页 上网过程由实际的物理文件的传输 http协议 浏览过程 输入URL→DNS域名解析（浏览器无法直接通过域名发起请求，需要将域名解析为IP地址）→建立TCP链接→发送HTTP Request→Web服务器Nginx反向代理→应用服务器Servlet处理请求→关闭TCP链接→渲染响应页面 纯文本和超文本区别 定义：纯文本只包含文
html使用条件判断and,IF函数还可以这样用！IF(AND)(OR)混合多条件判断
weixin_33549115的博客
06-04 1562
IF函数的用法大家都很熟悉了，但是IF\AND\OR 混合使用，效果会更快捷方便。比如下图学生成绩表，需要找出四种学生类型：数学及格的、三科都及格、任意一科及格，男生任意一科及格的学生。使用函数名称如下：数学及格：IF()三科都及格： IF(AND())任意一科及格：IF(OR())男生任意一科及格：IF(AND(OR()))首先，我们把数学及格的学生用“是”显示标注。IF函数的第一个参数是判断条...
html中and怎么写,HTML and URLs
weixin_42164931的博客
06-03 306
Every HTML document which is accessible via the web, is located at some URL.The word URL is short for Uniform Resource Locator. The URL is the "address"on the web of the HTML document.URLs as Addresse...
一些html中的特殊符号表示
keduosou的专栏
02-05 709
空格：  小于号（<大于号（>）： >and符号（&）： &单引号（）： '双引号（"）： "
超实用的JavaScript代码段 Item7 -- “&&”和“||”操作符总结
小平果的欢乐谷
07-18 5356
1、||（逻辑或）,从字面上来说，只有前后都是false的时候才返回false，否则返回true。alert(true||false); // true alert(false||true); // true alert(true||true); // true alert(false||false); // false这个傻子都知道~~ 但是，从深层意义上来说的话
html语法
return_min的博客
10-17 1523
HTML HTML简介 HTML是用来制作网页的语言 HTML:HyperText MarkUp Language 超文本标记语言 超文本：超：超链接 包含超链接的文本 标记语言： 标记：标签 语言：制作网页的语言 一个网页是有多个标签组成的 语法介绍 html是由浏览器来解析，所以不需要安装任何编译环境 Html文档的基本结构： <!DOCTYPE html> ...
简单整理HTML5的基本特性和语法
09-28
10. **拖放（Drag and Drop）**：使网页元素可以被拖动并放置到其他位置，提高了用户的交互体验。 HTML5的语法相较于HTML4和XHTML更加宽松和灵活，例如： - **标签名大小写不敏感**：HTML5允许标签名使用大写或...
HTML语法大全
09-23
### HTML语法概览 #### 1. 批注（Comment） - **语法**：`<!-- 这是批注内容 -->` - **用途**：用于添加不会在浏览器中显示的注释或备注。 #### 2. 跑马灯（Marquee） - **语法**： ``` |scroll|alternate" ...
HTML and CSS and JavaScript
12-20
在PDF教程中，通常会有对这些基础知识的详细解释，包括语法、示例和实践项目。教程可能还包含了截图，以帮助初学者更直观地理解每个概念。对于零基础的学习者来说，这样的资源是十分宝贵的，因为它提供了一条系统化...
html-and-css-practice
02-18
通过"html-and-css-practice"，学习者不仅能够掌握基础的HTML和CSS语法，还能了解到如何将它们结合起来，创建出具有吸引力且功能完善的网页。实践是最好的老师，动手编写和修改代码将加深对这些概念的理解，从而为...
html中and是字符串,将< and >符号替换为HTML字符串中的<和>符号
weixin_32259697的博客
06-25 494
我想用正则表达式代替符号由& lt;和& gt;在HTML文本中，并作为有效的XML。将< and >符号替换为HTML字符串中的符号示例串：His career spanned the development of cinema, from silent film, through early experiments in Technicolor to filmmak...
Web前端 ---HTML语言表格（day002）
qq_23998145的博客
10-20 524
表格 网页中的表格也能由HTML语言来实现 表格的基本构成标签 table标签：表格标签 tr标签：表格中的行 th标签：表格的表头 td标签：表格单元格 用法： <table> <!-- 第一行从这里开始 --> <tr> <!-- 第一行第一列 --> <th> 单元格所填内容 </th> <!-- 第一行第二列 --> <th> 单
HTML and CSS（一）——开始认识HTML
一条没有梦想的咸鱼
03-13 245
HTML-HyperText Markup Language 超文本标记语言HTML语言将告诉浏览器如何展示你写的页面，如果你的网页写得足够好，那么它就一定可以很好地展示在不同的设备上，比如手机、移动设备，甚至可以展示在视觉障碍者使用的语音浏览器和屏幕放大器上。一、Web服务器是做什么的？可以把Web服务器理解为一天24小时等待着你提出请求的仆人…aha.                     ...
HTML and CSS
just1done的博客
03-31 156
HTML CSS JavaScript HTML 本周主要讲讲一个网页的制作。一个网页的制作很简单，只需通过不同的标签，在不同定义的标签中输入对应的内容便可以得到一个简陋的网页，没错，是一个很简陋的网页。就比如我需要写一段话在网页中: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta...
HTML and CSS
one_zero_one的博客
07-16 128
一HTML 1什么是HTML HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。HTML文档也叫做 web 页面。<div>这是成对出现的标签</div>...
HTML5元素and属性和格式化—元素
qq_40171918的博客
06-06 201
1.HTML 元素HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。开始标签元素内容结束标签&lt;p&gt;This is a paragraph&lt;/p&gt;&lt;a href="default.htm" &gt;This is a link&lt;/a&gt;&lt;br /&gt;  注释：开始标签常被称为开放标签（opening tag）...
毕业设计，基于SpringBoot+Vue+MySQL开发的纺织品企业财务管理系统，源码+数据库+毕业论文+视频演示
最新发布
08-21
毕业设计，基于SpringBoot+Vue+MySQL开发的纺织品企业财务管理系统，源码+数据库+毕业论文+视频演示 在如今社会上，关于信息上面的处理，没有任何一个企业或者个人会忽视，如何让信息急速传递，并且归档储存查询，采用之前的纸张记录模式已经不符合当前使用要求了。所以，对纺织品企业财务信息管理的提升，也为了对纺织品企业财务信息进行更好的维护，纺织品企业财务管理系统的出现就变得水到渠成不可缺少。通过对纺织品企业财务管理系统的开发，不仅仅可以学以致用，让学到的知识变成成果出现，也强化了知识记忆，扩大了知识储备，是提升自我的一种很好的方法。通过具体的开发，对整个软件开发的过程熟练掌握，不论是前期的设计，还是后续的编码测试，都有了很深刻的认知。 纺织品企业财务管理系统通过MySQL数据库与Spring Boot框架进行开发，纺织品企业财务管理系统能够实现对财务人员，员工，收费信息，支出信息，薪资信息，留言信息，报销信息等信息的管理。 通过纺织品企业财务管理系统对相关信息的处理，让信息处理变的更加的系统，更加的规范，这是一个必然的结果。已经处理好的信息，不管是用来查找，还是分析，在效率上都会成倍的提高，让计算机变得更加符合生产需要，变成人们不可缺少的一种信息处理工具，实现了绿色办公，节省社会资源，为环境保护也做了力所能及的贡献。 关键字：纺织品企业财务管理系统，薪资信息，报销信息；SpringBoot
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

兴帅_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值