(html标签、属性、表格、超链接等相关用法及注意事项

news/2024/4/21 0:58:16/

html标签、属性、表格、超链接等相关用法

  • 标签
  • 块级元素、行内元素的嵌套关系
  • 乱码问题
  • 属性
  • 路径问题
  • 超链接
  • 实体
  • 文章
  • 表格table
  • HTTP:应用层的协议
  • Form:表单

标签

标签:
要求镜面嵌套
标签名称不区分大小写
成对标签:开始标签 结束标签
单标签:空元素 img
块级元素:

p margin-top/margin-bottombody  margindiv(没有任何样式)(用于搭建页面框架)ul ol li margin/list-typeh1-h6:margin/font-size/font-weight宽度是100%高度是由内容决定占用一整行 一般用于页面结构的搭建

行内元素:

 作用:点缀网页,填充内容span(没有任何样式)(修饰) img  aem b i strong u高度、宽度都是由内容决定会和其他元素共用一行一般用于内容填充

P 段落标签:段前距离和断后距离
margin-top/margin-bottom
width:100%

块级元素、行内元素的嵌套关系

块级元素、行内元素的嵌套关系:

1.块级元素可以包含行内元素
2.行内元素不要包含块级元素块级元素视情况而定比如:div可以包含块级元素

body:浏览器的可视区域

乱码问题

乱码问题:
1.编辑器本身 vscode 当前文件的右下角进行设置
2.代码本身
3.浏览器菜单栏里查找字符编码的设置

属性

属性:
1.大多数都有的(核心属性)
id 唯一的标识 id=“n1” 不要直接写成数字,写成符合当前业务的名字
class 一类的标识
style=“CSS代码” style=“color:red”
title属性:每一个元素的名称
2.特有的
img元素 img src=“图片的地址” alt=“默认显示的文字” width/height
a 超链接 href=“文件的地址” target="_self" target="_blank" _parent -top
3.自定义
你好
百度一下
$span.data.url

路径问题

路径问题:
本地的绝对路径:<img src="file://E:\HTML5练习图片\baidu.PNG">
本地的相对路径:<img src="images/guibinquan.PNG" alt="这是一只贵宾犬" width="50px" height="50px">

<!--.是指当前目录-->
<!--..是指上一级目录-->
<img src="../return.PNG">
网络路径:<img src="http://........" alt="狗狗"><img src="http://192.168.1.2.:8080/images/1.gif" alt="">

超链接

超链接:
1.发邮件

<a href="mailto:1109720702@qq.com">发送邮件</a>

2.跳转到本地的一个页面

 <a href="hello.html">跳转到hello.html</a>

3.有超链接的效果

<a href=" ">有超链接效果</a>

4.指代跳转到本页面

<a href="#">指代跳转到本页面</a>

5.图片具有超链接效果:

<a href="1-hello.html"><img src="guibinquan.PNG" alt="" width="20px" height="30px"></a>

6.当做锚点使用 #id的值

<div id="d1">头部</div>
<div id="d2" style="height: 1200px;">尾部</div>
<a href="#d1">返回顶部</a> 

实体

实体:

<   &lt;     空格  &nbsp;    “    &quot;
>   &gt;      &     &amp     ‘    &apos;

文章

文章:
h1-h6标题标签,逐渐变小
unorder list无序列表

 <ul type="circle"><li>菜单1</li><li>菜单2</li></ul>order list有序列表<ol><li type="1">篮球</li><li>足球</li></ol>

表格table

表格:table(注意层级结构)

数据的简单展示,一般使用DIV+CSS进行布局
边框border=’1’ 外边距cellspacing=’0’内边距cellpadding=’10 ‘,width=’50px/100%’
对齐效果 align=’center/left/right’
Caption表格标题
thead表头,可写可不写
Th(有加粗效果)\td(普通)不可单独存在
合并行:rowspan=’要合并的行数’
合并列:colspan=’要合并的列数’

HTTP:应用层的协议

HTTP:应用层的协议
相应的状态码:http status 200(ok) 404(请求失败,地址错误) 500(源代码出现错误)
请求方式method:

  • Get:显式的,大小有限制(小) 浏览器的地址栏,超链接,表单
    表单数据被附加在url上,使用?分隔
  • Post:隐式的,大小有限制(大) 表单数据包含在http协议的请求报文体部

一次请求:

请求报文:请求行请求报文:
请求行: method url HTTP/1.1
请求头:客户端和服务端约定的系统属性、自定义的属性、令牌
请求体:

  • GET请求报文:
    GET http://ww.baidu.com/baidu/index.html?wd=12&k1=v1 HTTP/1.1\r\n
    Host:http://ww.baidu.com\r\n
    User-agent:safri…\r\n
    Connection:keep-alive\r\n
    \r\n
    Null
  • POST请求报文:
    POST http://www.baidu.com/baidu/index.html HTTP/1.1\r\n
    Host:http://ww.baidu.com\r\n
    User-agent:safri…\r\n
    Connection:keep-alive\r\n
    \r\n
    Wd=123&k1=v1&k2=v2
    10101010101010101010101010

一次响应:
响应报文:
响应行:HTTP/1.1 200 OK\r\n
响应头:
Content-Type:text/html;charset=utf-8\r\n
Content-Length:大小\r\n
…\r\n
\r\n
响应体:0101010101

Textarea–》Keditor
Meter–>扇形图 echarts
Time/date/color
Emal/number/tel:正则验证
组件库、第三方库

Form:表单

Form:表单
成对出现的标签
必写Action:(地址eg:login.jsp)
必写Method:(提交方式)
Enctype:(编码方式)
提交视频等大文本对象,form的enctype属性是multipart/form-data,method是post
Input标签:
Type:(类型)(type=”file时”,可以上传照片文件等)
必写Name:(服务器端接收的变量名,有实际含义,一般不随便取)
Target:(_blank/_self)
Value:(自定义显示的文字),选项的时候会写value,
用户填写好数据时,不会写value
默认值的时候可以写value
Placeholder-html5的属性:提示
checked单选框,复选框默认选中属性
disabled禁用组件,不允许用户编辑,name就算取值,也不会传入后台
Readonly只读,name取值会传入后台
Maxlength可输入的最大字符数,适用于控件类型为text,password
Html新增的标签是语义标签,eg:nav导航,video视频,audio音频

Lable:实现关联聚焦
for中是要聚焦的id的值
下拉菜单:(默认显示第一个option,select中不写value时,默认显示option的value值)

<Select name=”n1”>
<Option value=”nn”>安娜</option> 

(用户看到的是汉语,提交给后台的是value的值)
按住shift连选(在select中写入multiple表示可以多选),按住ctrl单选
Optgroup用于包含option的选项组,常包含在中
Textarea:多行文本框
rows
cols
Wrap(是否自动换行off/hard/soft)

注:form和table一起时,先写form

<Ifram src=”地址”》:内联框架
<Ifram frameborder=”0”当前是否显示内联框架的边框,scrolling=”0”滚动条无 hspace=”0”垂直空隙>

Progress:进度条

游标进度:

Output


http://www.ppmy.cn/news/788684.html

相关文章

【转】3gp文件格式研究

需要看的文档 http://www.3gpp.org/ftp/Specs/archive/26_series/ 3GPP TS 26.233 3GPP TS 26.243 3GPP TS 26.244 luxh找到的一个好东西 http://isotc.iso.org/livelink/livelink/fetch/2000/2489/Ittf_Home/PubliclyAvailableStandards.htm 大家一定要仔细找找啊,宝藏…

21. Spring Boot 2.x最佳实践之 HTTPS 集成

Spring Boot 2.x最佳实践之 HTTPS 集成 1. HTTPS 科普篇1.1 什么是HTTP?1.2 什么是HTTPS?1.3 HTTP 和HTTPS 的区别1.4 HTTPS 工作流程2. 获取数字证书2.1 购买的数字证书和自签名的数字证书的区别2.2 购买免费的试用证书2.3 自己动手做一个证书2.3.1 什么是OpenSSL?2.3.2 获…

浅谈HTML5+CSS3将给设计师们带来什么

前言 商业世界有一句话谚语&#xff1a;“千万不要抢占泰坦尼克号的头等航”。于是反而推之&#xff0c;在时间有限的情况下对新技术的了解与研究就显得由为重要了&#xff0c;而如今Web世界最炙手可热的“新技术”非Html5Css3莫属。 Html5Css3将带给我们什么&#xff1f; 1. 语…

【转】全球超酷智能眼镜扫描

01 AXON Flex智能眼镜 Taser公司推出的这款智能眼镜是专门为警察推出的可佩戴摄像产品&#xff0c;在巡逻的时候可记录下整个事件的真实情况。摄像头记录下证据之后&#xff0c;视频首先通过蓝牙传输到iPhone或安卓设备上&#xff0c;然后再通过3G网络上传至Taser云存储。这款…

我给浏览器加了个语音搜索功能

1. 前言 随着物联网的发展,语音识别技术受到越来越多的关注,语音识别技术正积极推动信息通信领域的革命,语音拨号,语音邮件,语音输入乃至语音操控等以语音识别为基础的人机交互日益普及.尽管生物识别方式不断增多,语音识别方式仍是主流方式.与其他生物识别技术相比,语音识别技…

java ipfs文件存储_原来IPFS是这样存储文件的

概述 CID 在介绍IPFS存储文件的远离之前&#xff0c;先介绍一个重要的标识——CID(Content-ID)&#xff0c;CID是IPFS中用来表示内容的标识&#xff0c;可以用来表示一个文件&#xff0c;也可以用来表示一个文件块。如下所示&#xff0c;CID是一个字符串&#xff0c;它主要由Ve…

Python Day 7 数据类型转换、字符编码

阅读目录 内容回顾&#xff1a; 数据类型相互转换&#xff1a; 字符编码&#xff1a; ##内容回顾 #1.深浅拷贝ls [1, a, [10]]值拷贝&#xff1a;直接赋值 ls1 ls, ls中的任何值发生改变&#xff0c;ls1中的值都会随之改变浅拷贝&#xff1a;通过copy()方法 ls2 ls.copy()&a…

(转)文件名后缀大全

说起来Windows工作界面下的文件名简直是随心所欲&#xff0c;比如&#xff1a;某编辑部的2000年工作计划。文件名即可用中文直接表达&#xff0c;而且长度最长可达256个字符&#xff0c;让人看起来真是一目了然。然而在Windows环境中&#xff0c;安装的软件中却大量存在着类似C…

uniapp音频组件,适配ios,Android

uniapp视频组件&#xff0c;适配ios&#xff0c;Android 说明&#xff1a; 有个需求是需要有音频的时长和拖动进度&#xff0c;我对音频使用只停留在使用audio标签&#xff0c;在uniapp插件市场未找到适合的组件&#xff0c;在通过百度只找到下面的组件&#xff0c;了解使用 un…

《java程序设计基础》音频与视频程序设计

在一个媒体视图中播放视频,可以通过按钮的播放和暂停操作来播放或暂停视频,并可以使用滑动条来调节音量大小. package yuan; //媒体播放程序设计 //filename&#xff1a;App15_17.java import javafx.application.Application; import javafx.stage.Stage; import javafx.scene…

数字音频总线A2B开发详解十五(A2B-一主一从:四输出的数字功放板作为从板的应用详解)

作者的话 我在前面的文章里讲了很多主从板的配置说明&#xff0c;这一篇就来讲一讲新做的D-class功放板&#xff0c;和D板之间配合&#xff0c;实现A2B功能。 D-class板又叫AMP板&#xff0c;所有后面的文字中&#xff0c;我讲数字功放从板都会说是AMP板。 这块板是外部自己…

python入门,爬取图片,文字,视频,音频

1.爬取天气 并存在数据库 #!/usr/bin/python # -*- coding: utf-8 -*- import pymysql import requests from bs4 import BeautifulSoupdb pymysql.connect(hostlocalhost,port3306,userroot,passwdroot,dbmysql,use_unicodeTrue,charset"utf8" ) cursor db.curso…

基于matlab使用虚幻引擎模拟环境设计激光雷达SLAM算法(附源码)

一、前言 此示例演示如何记录来自 3D 仿真环境的合成激光雷达传感器数据&#xff0c;以及如何使用记录的数据开发同步定位和映射 &#xff08;SLAM&#xff09; 算法。 自动驾驶工具箱在Simulink中集成了虚幻引擎模拟环境。与此仿真环境相关的 Simulink 模块可以在库中找到。…

《MySQL》数据类型

文章目录 一&#xff0c;数值类型int类型bit类型小数类型float 和 decimal 二&#xff0c;字符串类型char和varchar日期和时间类型enum和set 一&#xff0c;数值类型 MySQL数据库里面的数据类型 int类型 int类型是一个大类 类型大小tinyint1字节 &#xff08;-27 ~ 27-1&a…

WIN10局域网共享方法

1.控制面板\网络和 Internet\网络和共享中心\高级共享设置 打开启动网络发现&#xff0c;启动文件共享和打印机共享 2.winr运行gpedit.msc&#xff0c;打开本地组策略编辑器 找到“计算机配置-管理模板-网络-Lanman工作站” 启动不安全的来宾登录设置为已启用。

win10局域网共享文件夹

1.设置文件夹为共享&#xff0c;并添加everyone权限 2.设置安全选项 点击编辑->添加->高级->立即查找&#xff0c;找到everyone后点击确定 3.在共享选项&#xff0c;密码保护栏中点击网络和共享中心&#xff0c;然后关闭密码保护共享&#xff0c;这样别的机子连进来…

win10下同一局域网电脑互传文件

首先确保两台计算机处于同一个局域网下。 接着在作为Server的电脑上设置共享文件夹&#xff0c;如下图所示&#xff1a; 点击共享&#xff0c;接着共享的对象设置为Everyone&#xff0c;如下图&#xff1a; 接着设置就完成了。在cmd里面输入ipconfig可以看到本机的ip。我这里…

win10局域网中只能发现部分计算机,Windows10系统局域网中共享计算机找不到怎么办...

局域网共享可以方便局域网中的计算机自动调用共享文件用打印机等资源&#xff0c;但有用户出现访问不了查看不到其他共享计算机的情况&#xff0c;在Win10极速纯净版系统中&#xff0c;有用户发现升级Win10的无法查看其他计算机和共享&#xff0c;而未升级之前是能用的&#xf…

win10开启局域网远程桌面连接

要求&#xff1a;两台电脑&#xff0c;同时连接在同一局域网&#xff08;比如&#xff0c;大学校园网&#xff0c;实验室机房局域网&#xff09;。假设是电脑A开启允许局域网远程桌面&#xff0c;然后电脑B连接控制电脑A。这两台电脑需要按照下面的步骤来做&#xff08;以大学校…

计算机局域网访问密码设置,win10系统设置局域网访问需要密码的详细办法

有关win10系统设置局域网访问需要密码的操作方法想必大家有所耳闻。但是能够对win10系统设置局域网访问需要密码进行实际操作的人却不多。其实解决win10系统设置局域网访问需要密码的问题也不是难事&#xff0c;小编这里提示两点&#xff1a;(1)单击“开始”按钮&#xff0c;键…