初始HTML

最新推荐文章于 2021-06-08 11:04:44 发布
最新推荐文章于 2021-06-08 11:04:44 发布
阅读量837 收藏
点赞数
分类专栏： HTML 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangxin_540/article/details/11889813
版权

第一   HTML语言概述

一、概述：
1、Html是超文本标记语言，是一种非严谨的语言
2、Html是通过标签来定义的语言，代码都是由标签所组成
3、Html代码不区分大小写
4、Html语言是有<html>开始</html>结束。里面包含<head></head>和体部分<body></body>
5、头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载
6、体部分是真正存放页面数据的地方
二、说明：
1、多数标签都有开始和结束标签，其中有个别标签只有单一功能，或者没有要修饰的内容可以在标签内结束
2、想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的属性效果选择
3、属性与属性值之间用“=”连接，属性值可以用双引号单引号或者不用引号，一般都会用双引号，这样更加规范
4、格式：<标签名  属性="属性值">数据内容</表签名>        <标签名  属性="属性值"/>
5、为了操作数据，都需要将数据进行不同标签的封装，通过标签属性对封装数据进行操作，标签就相当于一个容器，对容器中的数据进行操作，就是在不断的改变容器的属性值。

第二   常用标签的使用

一、字体：
1、字体标签<font>
如：<font size="5" color=red>内容</font>
注：简单颜色可以直接写英文，复杂颜色可以用16进制表示，表现形式#FF0000，两个数为一组，按照红、绿、蓝排列
2、标题标签：<h1><h2>....<h6>
因为标题是文本常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。
3、特殊字符：
如果要在网上看到一些特殊字符，比如<、>、&等。因为这些符合在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

最常用的字符实体(Character Entities)

显示结果说明Entity NameEntity Number
 显示一个空格&nbsp; 
<小于&lt;<
>大于&gt;>
&&符号&amp;&
"双引号&quot;"

其他常用的字符实体(Character Entities)

显示结果说明Entity NameEntity Number
?版权&copy;©
?注册商标&reg;®
×乘号&times;×
÷除号&divide;÷

二、列表：
1、列表标签：<dl>
<dt>：上层项目
<dd>：下层项目
2、列表中项目符号对应的标签
<ol>：数字标签(a A l i r)
<ul>：符号标签(○ ● ■)
<li>：具体项目内容标签，此标签只在<ol> <ul>中有效
通过type属性更改项目符号，如果想做出效果更好的列表，就要用CSS

三、图像：
1、图像标签：<img>
例如：<img src="1.jpg" align="middle" height="100" width="100" alt="图片说明文字" border="1"/>
align：属性定义图片的排列方式，border：设置图片的边框，src链接一个图片
2、图像地图：<map>
应用：要在图像中选取某一部分做为链接。如：中国各个省对应的区域
map标签和img标签联合使用，href是超链接
<img src="1.jpg" alt="图片说明文字" border="1" align="middle" usemap="#Map"/>
<map name="Map" id="Map"><area shape="circle" coords="134,92,57" href="#" /></map>

四、表格：<table>
1、组成：
1）标题标签：<caption>，给表格提供标题
2）表头标签：<th>，一般对表格的第一行进行格式化，就是粗体显示，并不常用。
3）行标签：<tr>
4）单元格标签<td>加在行标签里面。可以简单理解为，先有行，在行中加入单元格
2、格式：
<table border=1 width=40%>  百分比可以让其宽度随着浏览器的改变而改变
注：这里说说表格的两个属性cellpadding这个属性设置的单元格中的内容与单元格之间的距离，cellspacing这个属性设置的单元格与表格的距离；在说说<tbody>标签，其实表格中就有默认的这个属性，它是把表格分为多表格体，在网络加载中分开加载，增强用户体现效果。

五、超链接：<a>
1、第一种用法：超链接<a href>
例如：<a href="http://www.baidu.com" target="_blank">百度</a>href属性值可以是url也可以是本地文件。target指定打开的窗口或帧
2、第二种用法：定位标记<a name>，一般在页面中使用，当页面内容过长，定位标记会比拖动更加便捷
<a name="top">顶部位置</a>
<a href="#top">回到顶部</a>

六、表单：<form>
1、表单时最常用的标签，用于与服务器交互
2、<input>输入标签，接收用户输入信息，其中type属性指定输入标签的类型
文本框text，输入的文本信息直接显示到框中
密码框password，输入的信息以圆点等密码显示形式显示
单选radio，点选框
多选框checkbox，可以选中多个
隐藏字段hidden在页面上不显示，但是提交的时候会随着其他内容一起提交
提交按钮submit用于提交表单中的数据
重置按钮reset将表单填写的内容设置为初始值
按钮button可以为其自定义事件
文件上传file后期扩展内容会自动生成文件选择框
图像image它可以替代submit按钮，目的让按钮更美观
3、<select>：选择标签，提供用户选择内容<option>选择的子标签
4、<textarea>：多行文本框
5、<label>：用于给各个元素定义快捷键
for属性：：指定快捷键作用的表单元素，必须与要作用的元素id值相同
accesskey属性：指定快捷键，此快捷键需要和alt键组合使用
<label for="user" accesskey="u" >用户名(U)</label>
<input type="text" id="user"/>
按Alt键+u就可以直接回到输入框中，如果label包含整个一行，那么在一行中任意一点一点鼠标，光标都会回到此输入框中
6、数据提交方式总共有七中，但是常见的也就是get和post两种********************************
①、get（默认的提交方式）
会将提交的内容显示在地址栏上，不安全
地址栏能存放的数据有体积限制，所以不能够用于提交大数据量的信息
将数据封装在了消息头的前面
数据提交到服务端出现乱码不能用方法直接搞定，需要通过编码再解码的形式解决(用默认的表码表（ISO8859-1）编码一次，在用指定编码表（GBK）解码)，在java中用URLEncoder对象进行编码，用URLDecoder对象进行解码。
②、post
不会将数据显示在地址栏上，安全
没有体积限制，可以提交大数据
将数据封装到了消息头的后边，也就是数据体的当中
可以通过方法直接搞定（setCharacterEncoding("GBK")）
注：当发送中文或其他文字的时候，都是发送的是URL编码后的字符。URL编码：就是将文字获取其对应的编码后，将其编码的十六进制转车ASCII。因为ASCII不论在哪个机器上都能识别。

七、滚动<marquee>
direction属性：left、right、down、up
behavior属性：scroll、alternate、slide

八、<pre>：可以将文本内容按照代码区的样子显示在页面上

九、头标签：主要指定存放的是常见的网页属性信息
1、<title>：指定浏览器标题栏的内容
2、<base>：
href属性：指定网页中所以超链接的目录。可以是本地的也可以是网络目录，值得注意的是结尾处一定要用/表示目录。值用于相对路径的超链接文件
target属性：是定打开超链接的方式
3、<meta>：
name属性：网页的描述信息。当去keywords时，content属性的内容就作为搜索引擎的关键字进行搜索
http-equiv属性：模拟http协议的响应消息头
如：<meta http-equiv="refresh" content="3";url=http://www.baidu.com" />三秒后刷新跳转到百度，如不指定url那么就刷新本页面
4、<link>：关联指定文件，比如关联样式文件
rel属性：描述目标文档与当前文档的关系
type属性：文档类型
media属性：指定目标文档在哪种设备上起作用
例如：<link rel=stylesheet type=text/css media=screen,print href=a.css/>


第三   XHTML XML

一、XHTML是可扩展的超文本标记语言
1、XHTML是w3c组织在2000年的时候为了增强HTML退出的。本想替代HTML，但是发现Internet上的HTML语言太多，所以没有成功，它可以理解为HTML的一种升级版（HTML4.01）
2、XHTML代码结构更为严谨，是基于XML的一种应用
二、XML是一种可扩展标记语言
1、XML是对数据信息的描述。HTML是数据显示的描述。
2、XML代码规定的更为严格
3、XML规范可以被更多应用程序所解释，将成为一种通用的数据交换语言
4、各个服务器、框架都讲XML作为配置文件


菜鸟的封装史
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML页面初始化
06-16
重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以有了CSS Reset，以让网页的样式在各浏览器中表现一致。
Html 页面初始化加载
core815的专栏
08-27 5943
$(document).ready(function(){ trace("初始化方法进入"); }); $(function(){ trace("初始化方法进入二"); }); window.onload=function(){ //要初始化的东西 }
HTML项目初始化
weixin_34043301的博客
06-21 107
npm： 1.npm init 输入参数（成功后会在项目的根目录下生成一个package.json） 2.npm安装依赖包：npm install xxx@v.v.v 3.删除依赖包：npm uninstall xxx@v.v.v (参数-g) 4.参数： --registry=https://registry.npm.baobao.org Webpack： webpack安装： n...
html+vue初始代码模板
Andre_dong的博客
05-09 192
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div> </div
html 初始化加载flex
gienj1的博客
12-02 140
js-------------------------------------------- &lt;script language="JavaScript"&gt; function load() { var strHref=location.search; var id=getArgsFromHref(strHref,'tempId'); } functio...
HTML_LABO:初始html摘要
05-28
初始html摘要 参考资料 网页包 CSS JavaScript Vue.js | Nuxt.js 图书馆 jQuery的 [removed][removed] 托管库| Google Developers Microsoft Ajax内容交付网络| Microsoft Docs jquery --cdnjs.com-适用于Web...
各种尝试的初始html不建议老手下载
08-15
标题"各种尝试的初始html不建议老手下载"可能指的是这个压缩包包含了一些初学者在学习HTML时进行的各种尝试，可能包括了基础的HTML代码示例、实验性的布局或样式设计，这些内容对于经验丰富的开发者来说可能较为基础...
html初始化代码
11-05
针对各浏览器对html标签默认初始值的不同，而编写的代码。
html样式的初始化文件
01-11
css的初始化文件，方便使用，清除基本的样式。用于网页的初始化，集成了一般常用的标签，适合通用网站开发，移动端，PC端均可使用
meteor-inject-data:一种使用初始HTML向客户端注入数据的方法
04-07
社区包：注入数据一种使用初始HTML向客户端注入数据的方法。 meteorhacks:inject-data延续。 这是使用的程序包，用于使用初始HTML将数据推送到客户端。安装meteor add communitypackages:inject-data推送数据我们...
HTML+CSS初始化万能模板
01-02
HTML+CSS初始化万能模板用于每次开发新网页时候使用
html-initial-bundle:带有SCSS重置，排版预设和JavaScript ES6模块捆绑器的初始HTML模板
05-06
HTML初始捆绑包 带有JS bundlerHTML层用于专业模板开发 为什么 快速中间件模板原型 现代JavaScript应用程序建模 例行任务自动化 轻松CMS集成为主题 特征 高级CSS重置 基本的SCSS 集合 旧的浏览器支持（> 1％的...
初始化器
02-11
在HTML（超文本标记语言）中，虽然没有直接的“初始化器”概念，但我们可以将其扩展到网页加载时的脚本执行或者框架、库的初始化过程。 HTML是构建网页的基础，它定义了网页的结构。然而，为了实现动态功能和交互性...
init:html初始化
06-14
HTML初始集内容HTML字符编码为 UTF-8说明是 html5删除未使用的js在初始状态，id = `Wrapper` 被设置CSS 用 YUI 重置less.js 可用JavaScript 在js文件夹的main.js中描述main.js 加载了 jQery Underscore.js 也是初始...
html5 数据初始化,初始化数据
weixin_42419782的博客
06-05 817
初始化数据打开MainSetup类,在Daos语句后面插入新建根用户的代码// 初始化默认根用户if (dao.count(User.class) == 0) {User user = new User();user.setName("admin");user.setPassword("123456");user.setCreateTime(new Date());user.setUpdateTi...
【0020】html5文件初始模板
PMAPI
06-20 1346
文档标题 文档内容
html初始化加载数据,Angular路由加载视图后，如何实现立即初始化请求数据?
weixin_30543595的博客
06-04 165
HTML代码(home.html)JS代码//配置主页的路由mainApp.config(function($stateProvider, $urlRouterProvider) {//默认指向404$urlRouterProvider.otherwise("/404");//配置路由$stateProvider.state('home', {url: '/home',templateUrl: '...
html初始化默认加载,div可以初始化加载一个html吗？该如何处理
weixin_39728320的博客
06-08 372
div可以初始化加载一个html吗？我有一个空的div,想点链接联动。比如右边是产品，左边是产品列表，点左边的链接联动右边。。。可是初始化右边没东西，又想全部展示。。。$(document).ready(function(){$("#conright").html("坑"+"爹");});这种样子的，是可以把文字放进去。。。可是标签根本刷不出来。。。不起作用。。。#("#divId").load(...
<span style="color: blue;">初始HTML内容</span>，这里的初始化HTML内容能够动态赋值吗
最新发布
07-17
">初始HTML内容</span>'; }, methods: { updateHtml() { // 在这里根据需求更新 dynamicHtml 的值 this.dynamicHtml = '更新后的HTML内容</b>'; }, }, }; ``` 在上面的示例中，`dynamicHtml` 是一个数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值