HTML~

HTML

HTML是一门语言,所有的网页都是用HTML这门语言编写出来的HTML(HyperText Markup Language):超文本标记语言

超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容

标记语言:由标签构成的语言

HTML运行在浏览器上,HTML标签由浏览器来解析

HTML标签都是预定义好的。例如:使用<img>展示图片

W3C标准:网页主要由三部分组成

结构:HTML

表现:CSS

行为:JavaScript

1,HTML入门

1.新建文本文件,后缀名改为.html

2.编写HTML结构标签

3.在<body>中定义文字

<html><head><title>html 快速入门</title></head><body><font color="red">乾坤未定,你我皆是黑马~</font></body>
</html>

HTML结构标签:

标签描述
<HTML>定义HTML文档
<head>定义关于文档的信息
<title>定义文档的标题
<body>定义文档的主题

HTML标签不区分大小写

HTML标签属性值单双引皆可

HTML语法松散

 2,基础标签

标签描述
<h1> ~ <h6>定义标题,h1最大,h6最小
<font>定义文本的字体、字体尺寸、字体颜色
<b>定义粗体文本
<i>定义斜体文本
<u>定义文本下划线
<center>定义文本居中
<p>定义段落
<br>定义折行
<hr>定义水平线
html表示颜色:1.英文单词: red , pink , blue . . .2. rgb(值1,值2,值3):值的取值范围:0~255 rgb(255,0,0)3.#值1值2值3:值的范围:00~FF

 转义字符:

HTML源代码显示结果描述
&lt;<小于号或显示标记
&gt;>大于号或显示标记
&amp;&可用于显示其它特殊字符
&quot;"引号
&reg;®已注册
&copy;© 版权
&trade; ™商标
&nbsp;不断行的空白

3,图片,音频,视频标签

标签描述
<img>定义图片
<audio>定义音频
<video>定义视频

img:定义图片

        src:规定显示图像的URL(统一资源定位符)

        height:定义图像的高度

        width:定义图像的宽度

audio:定义音频。支持的音频格式:MP3、WAV、OGG

        src:规定音频的URL

        controls:显示播放控件

video:定义视频。支持的音频格式:MP4, WebM、OGG

        src:规定视频的URL

        controls:显示播放控件

尺寸单位:px和%

 资源路径:

        1.绝对路径:完整路径

        2.相对路径:相对位置关系

4,超链接标签

标签描述
<a>定义超链接,用于链接到另一个资源

href:指定访问资源的URL

target:指定打开资源的方式

        _self:默认值,在当前页面打开

        _blank:在空白页面打开

<a href="http://www.itcast.cn" target="_blank">点我有惊喜</a>

5,列表标签

标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项

type:设置项目符号

    <ol><li>咖啡</li><li>牛奶</li><li>茶</li></ol><ul><li>咖啡</li><li>牛奶</li><li>茶</li></ul>

6,表格标签

标签描述
<table>定义表格
<tr>定义行
<td>定义单元格
<th>定义表头单元格

table:定义表格

        border:规定表格边框的宽度

        width :规定表格的宽度

        cellspacing:规定单元格之间的空白

tr:定义行

        align:定义表格行的内容对齐方式

td:定义单元格

        rowspan:规定单元格可横跨的行数

        colspan:规定单元格可横跨的列数

    <table border="1" cellspacing="0" width="500"><tr><th>序号</th><th>品牌</th><th>品牌名称</th><th>企业名称</th></tr><tr align="center"><td>010</td><td>a</td><td>三只松鼠</td><td>三只松鼠</td></tr><tr align="center"><td>009</td><td>b</td><td>优衣库</td><td>优衣库</td></tr><tr align="center"><td>008</td><td>c</td><td>小米</td><td>小米科技有限公司</td></tr></table>

 7,布局标签

标签描述
<div>定义HTML文档中的一个区域部分,经常与cSS一起使用,用来布局网页
<span>用于组合行内元素

8,表单标签

表单:在网页中主要负责数据采集功能,使用<form>标签定义表单

表单项(元素):不同类型的input元素、下拉列表、文本域等

(1)表单

标签描述
<form>定义表单
<input>定义表单项,通过type属性控制输入形式
<label>为表单项定义标注
<select>定义下拉列表
<option>定义下拉列表的列表项
<textarea>定义文本域

(1)form:定义表单

1)action:规定当提交表单时向何处发送表单数据,URL

                #表单项数据要想被提交,则必须指定其name属性

3)method :规定用于发送表单数据的方式

【1】get:浏览器会将数据直接附在表单的action URI之后。大小有限制

                        请求参数会拼接在url后面

                        url长度有限制 4KB

【2】post:浏览器会将数据放到http请求消息体中。大小无限制

                        请求参数会在http请求协议的请求体中

(2)表单项

<input>:表单项,通过type属性控制输入形式

<select>:定义下拉列表,<option>定义列表项

<textarea>︰文本域

type取值描述
text默认值,定义单行的输入字段
password定义密码字段              
radio定义单选按钮                
checkbox定义复选框                
file定义文件上传按钮                
hidden定义隐藏的输入字段
submit定义提交按钮,提交按钮会把表单数据发送到服务器
reset定义重置按钮,重置按钮会清除表单中的所有数据
button定义可点击按钮                
    <form action="#" method="post"><input type="hidden" name="id" value="123"><label for="username">用户名:</label><input type="text" name="username" id="username"><br><label for="password">密码:</label>密码:<input type="text" name="password" id="password"><br>性别:<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label><input type="radio" name="gender" value="2" id="female"> <label for="female">女</label><br>爱好:<input type="checkbox" name="hobby" value="1" id="trip"> <label for="trip">旅游</label><input type="checkbox" name="hobby" value="2" id="movie"> <label for="movie">电影</label><input type="checkbox" name="hobby" value="3" id="game"> <label for="game">游戏</label><br>头像:<input type="file"><br>城市:<select name="city"><option>北京</option><option>上海</option><option>深圳</option></select><br>个人描述:<textarea cols="20" rows="5"></textarea><br><br><input type="submit" value="免费注册"><input type="reset" value="重置"><input type="button" value="一个按钮"></form>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/506497.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

下载github项目到pycharm

一、下载git 1.下载git链接 https://git-scm.com/ 2.一路点击next&#xff0c;最后finish 二、使用git 1.安装成功后在开始菜单栏会找到如下内容&#xff0c;其中常用的是Git Bash 2.点击Git Bash 3.这里就可以克隆github上的代码了 点击复制&#xff0c;在命令行输入…

【Linux常用命令——基础命令】

1.基础命令 pwd&#xff1a;显示当前位置下的绝对路径 man&#xff1a;帮助文档&#xff0c;退出方式是键盘输入q cd&#xff1a;cd 路径——表示切换到某路径下 .一个点是当前文件…代表上一层文件 任何时候&#xff0c;cd ~都会回到家目录 想要不停的在两个最近去过的两…

大数据与云计算、物联网、人工智能

云计算 云计算的概念 云计算的概念 通过网络、以服务的方式&#xff0c;为千家万户提供非常廉价的IT资源&#xff0c;一种商业模式。云计算是一种模型&#xff0c;用户可以方便地通过网络按需访问一个可配置计算资源&#xff08;如网络、服务器、存储、应用和服务&#xff0…

sizeof 和 strlen的区别

sizeof sizeof是单目操作符,sizeof计算变量所栈内存空间大小,单位是字节,如果操作数是类型的话,会计算类型所占大小,sizeof指在乎占用内存空间大小不在乎内容是什么. int main() {int a 0;printf("%zd\n", sizeof(a));printf("%zd\n", sizeof a );printf…

走进SQL审计视图——《OceanBase诊断系列》之二

1. 前言 在SQL性能诊断上&#xff0c;OceanBase有一个非常实用的功能 —— SQL审计视图(gv$sql_audit)。在OceanBase 4.0.0及更高版本中&#xff0c;该功能是 gv$ob_sql_audit。它可以使开发和运维人员更方便地排查在OceanBase上运行过的任意一条SQL&#xff0c;无论这些SQL是成…

Redis【4】—— Hash类型

Redis【4】—— Hash类型 四、各类型指令介绍&#xff08;二&#xff09;Hash类型1. 基础指令2. 内部编码 四、各类型指令介绍 &#xff08;二&#xff09;Hash类型 1. 基础指令 hset k1 f1 v1 hget k1 f1hset k2 f2 v2 f3 v3 hget k2 f2 f3 # error&#xff0c;一次只能返回…

面试笔记系列六之redis+kafka+zookeeper基础知识点整理及常见面试题

目录 Redis redis持久化机制&#xff1a;RDB和AOF Redis 持久化 RDB的优点 RDB的缺点 AOF 优点 AOF 缺点 4.X版本的整合策略 Redis做分布式锁用什么命令&#xff1f; Redis做分布式锁死锁有哪些情况&#xff0c;如何解决&#xff1f; Redis如何做分布式锁&#xff1f…

termux上安装Python

Termux是一款Android平台下的终端模拟器和Linux环境应用&#xff0c;它允许用户在移动设备上访问Linux命令行界面&#xff0c;以便使用命令行工具、脚本、开发环境等功能。 要在Termux上安装Python&#xff0c;请按照以下步骤进行操作&#xff1a; 一&#xff0c;下载termux …

基于springboot+vue的校园商铺管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

数据审计 -本福德定律 Benford‘s law (sample database classicmodels _No.6)

数据审计 -本福德定律 Benford’s law 准备工作&#xff0c;可以去下载 classicmodels 数据库资源如下 [ 点击&#xff1a;classicmodels] 也可以去我的博客资源下载 文章目录 数据审计 -本福德定律 Benfords law 前言一、什么是 本福德定律&#xff1f;二、数学公式三、应用…

通讯录(下)

通讯录中我们在上一期中说明需要实现的函数&#xff0c;和需要创建的项目&#xff0c;今天我们就来实现contact.c项目中的函数实现。注意我们要在该项目中包含.h中的头文件。 1.初始化 void InitContact(contact* con) { SeqListInit(con); LoadContact(con); } 2.添加联系人…

前缀和算法题(区间次方和、小蓝平衡和、大石头的搬运工、最大数组和)

一、前缀和的原理和特点 prefix表示前缀和&#xff0c;前缀和由一个用户输入的数组生成。对于一个数组a[]&#xff08;下标从1开始&#xff09;&#xff0c;我们定义一个前缀和数组prefix[]&#xff0c;满足&#xff1a; prefix有一个重要的特性&#xff0c;可以用于快速生成p…