2020/02/18 06-HTML

最新推荐文章于 2021-06-29 00:54:11 发布
最新推荐文章于 2021-06-29 00:54:11 发布
阅读量3.1k 收藏 1
点赞数 2
分类专栏： 55前后端分离博客项目(一)react框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42227818/article/details/104398853
版权

https://www.w3school.com.cn/html/index.asp

在这里插入图片描述
html要做的事情是把html这个文档找到，通过http协议提供的url找到，由浏览器发请求找到它，浏览器认识html，解析成dom树，把 dom树渲染到窗口上
对于浏览器来说，是通过http协议还是本地文件，只要是符合html标准的，能解析，就都显示了

在这里插入图片描述
这个相当于通过远程访问服务器
在这里插入图片描述
传统网页查看源文件就全部看到了，爬虫最喜欢，现在喜欢用异步的动态方式把内容组织起来，所以爬虫爬的是源文件看不到里面内容。
但是只要在浏览器看得到没有拿不走的
在这里插入图片描述
这样相当于用本地文件系统，乱码的原因是没告诉它编码
在这里插入图片描述
编码有一个utf-8
在这里插入图片描述
这样也相当于把html放在本地给你用
在这里插入图片描述
源文件全都在这里
在这里插入图片描述
这个是文档类型的申明

在这里插入图片描述
html是跟元素
head里面 可以放meta，title
在这里插入图片描述
这一句很重要,当浏览器下载html，遍历所有的dom节点看到的meta，告诉是charse=utf-8，它就不用猜了，直接使用约定好的utf-8，将这里面的所有文字使用utf-8编码
title是告诉这个网站是做什么用的
在这里插入图片描述
自当检测，自动按照约定的字符集来显示
在这里插入图片描述

改成gbk
在这里插入图片描述
在这里插入图片描述
改成utf-8就好了
在这里插入图片描述
有些网页乱码了，换个编码可能就能看了

在这里插入图片描述
申明本文是utf-8，也要求自己本身就是utf-8
在这里插入图片描述
meta信息就是告诉编码，这里有一些关键字数据，希望归类到网站里去
在这里插入图片描述
head部分可以写样式表
也可以放脚本，这个脚本不需要下载，是写在本页面里的,属于当前html本身内容
在这里插入图片描述
这个标签是可以onclick的
在这里插入图片描述
body部分，常用的标签div，h1，h2，最小的是h6

在这里插入图片描述
在这里插入图片描述
一下子占一行的一般叫做块，block

在这里插入图片描述
这种占一行的叫inline，内联的

在这里插入图片描述在这里插入图片描述
块不连着，内联的可以接着
在这里插入图片描述
p标签一般是容器标签
在这里插入图片描述
多个空格还认为是一个，
在这里插入图片描述
b抱歉是加粗，strong，也是加粗，不推荐用，可以用span，span就是容器，里面可以放文字，一般用样式表控制大小
在这里插入图片描述
用h1来控制太丑了
在这里插入图片描述
div的布局相等于这一行都归它
在这里插入图片描述
一般不写h1，h2，都写span
在这里插入图片描述

在这里插入图片描述
先试试行内的样式表，标签内样式表，font-size就是字体大小
在这里插入图片描述

在这里插入图片描述
br换行符不需要闭合，直接写br即可

在这里插入图片描述
如果把闭合的部分删掉，其实是有问题的

在这里插入图片描述
渲染引擎会把你这个错误拿来分析，哪个合适来帮你做一个封口，自动关闭
在这里插入图片描述
它现在认为是放在这里合适
在这里插入图片描述
但是源文件里其实是没有的

在这里插入图片描述
但是在dom树给我们添加 了一个

在这里插入图片描述
在这里插入图片描述
p标签现在都不用了，一般都是div，一般在div内部用p标签，来做定位的
p标签其实就是段落的首字母
在这里插入图片描述
每个元素其实是可以有属性的，每一个标签自己的属性不一样，标签只用来告诉干什么。
href http+reference 意思就是http的引用，需要引用哪个url
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样跑，域名就出问题了
在这里插入图片描述
前面需要加http
在这里插入图片描述
在这里插入图片描述
点击就跳转了，默认是本页内跳转

在这里插入图片描述
target=_blank 默认打开一个空白页面
在这里插入图片描述

在这里插入图片描述
这时候就弹出来了
在这里插入图片描述
加个title

在这里插入图片描述
鼠标停留会有abc，这个是title语法，比如新闻网站，移到标题会显示
在这里插入图片描述
a标签就是链接，a的意思就是[名] anchor锚，锚到半夜内，比如网页后面带#号，一般都是在本页内跳转，经常看到的a是来解决链接的问题借用href跳转，往往会有target=_blank,打开新页面，因为当前页面跳转了，就什么都没了
在这里插入图片描述

在这里插入图片描述
文本格式化可以不看，因为可以用样式表来完成
、
在这里插入图片描述
在这里插入图片描述
href定义链接
在这里插入图片描述
在这里插入图片描述
弹窗用这个方式解决

在这里插入图片描述
一定要用meta定义字符集
在这里插入图片描述
img配合src
在这里插入图片描述
复制一个地址

在这里插入图片描述

在这里插入图片描述
这就是图片，这个就是盗链
在这里插入图片描述
首先下载html，碰到img就到img的src地址下载，这是两个http请求，一个网页要显示完是有很多个http请求
在这里插入图片描述
这个页面是一个入口，由它来浏览网站相关资源，图片是一个资源，要从相应的位置下载到浏览器，浏览器再把这个图片展示出来
在这里插入图片描述
图片可以控制大小，宽高，所有的样式应该放在样式表里，这样方便多人协同开发
在这里插入图片描述
下载失败，用alt代替
在这里插入图片描述

在这里插入图片描述
现在没有样式就到一行上去了
在这里插入图片描述
这个图应该没有
在这里插入图片描述
替换字就出来了

在这里插入图片描述
样式部分全凭样式表来做
在这里插入图片描述
在这里插入图片描述
不是不用图片而是考虑图片缓存的问题，也要考虑图片加载人的忍耐时间，淘宝是全部js是实现，往下滚动才加载
在这里插入图片描述
表格是显示数据最方便最好看的，最初布局，p标签，后来表格，表格套表格，后来才是div
在这里插入图片描述
比如这样画的每个框子都是表格
在这里插入图片描述
布局不用表格，但是要呈现数据还是用表格tb标签

在这里插入图片描述
table标签，行用tr控制，列用td控制在这里插入图片描述
打叉的基本不用

在这里插入图片描述
th就是把这里加粗，但是可以依靠样式表
在这里插入图片描述
很多网站table就三样东西，table标签，tr，td标签，th都不用，现在会把table套在div中，这个表格现在就是一行两列
在这里插入图片描述
可视化做网页的工具还是dreamviewer
在这里插入图片描述
可以加个标题栏
在这里插入图片描述

这样表格就有了 在这里插入图片描述
表格样式不好看，看样式表
在这里插入图片描述
hr分隔线
在这里插入图片描述
下面是常用的
在这里插入图片描述
比如性别可以单选，radio，也叫收音机按钮
在这里插入图片描述
最后一个占两列，用colspan=2
在这里插入图片描述
value初始值
在这里插入图片描述在这里插入图片描述
这一块操作比较多，建议写id，id是给js用的不能重复
在这里插入图片描述
密码类型是password**在这里插入图片描述
在这里插入图片描述
密码一般没有初始值

在这里插入图片描述
性别一般是收音机按钮，radio
在这里插入图片描述
点了就去不掉了
在这里插入图片描述
在这里插入图片描述
现在都有，就不是想要的效果
在这里插入图片描述
value是真正的值，是用来做提交的，只要框子里写东西，value就发生了，changed，比如之前的unchanged事件，最后提交到服务器端，根据判断的值m/f，究竟是什么
在这里插入图片描述
但是现在点击了就取消不了
在这里插入图片描述
JS一般习惯操作这种，有文本
在这里插入图片描述
现在名字相同是有特殊意义的
在这里插入图片描述
这样就搞定

在这里插入图片描述
加个值
在这里插入图片描述
这样就可以了
在这里插入图片描述
还有多选
在这里插入图片描述
在这里插入图片描述
需要写一下值
在这里插入图片描述
在这里插入图片描述

多行的表单创建，用textarea文本域来写

在这里插入图片描述
往往是多行文本需要使用
在这里插入图片描述
差一个提交按钮，button没有提交功能，必须要调用函数来提交，button没有提交的默认行为，必须借助函数行为比如onclick
在这里插入图片描述
在这里插入图片描述
提交了没有用，因为还需要它们的老大，form表单
在这里插入图片描述
在这里插入图片描述
一般吧form塞到table内部去写，现在点击就是刷新的
在这里插入图片描述
看着两块变化
在这里插入图片描述
这个后面打了个问号，默认提交后面不写地址，是提交给本页的，提交本页后就会带一些东西

在这里插入图片描述
对于提交来说name有用，对js变成来说，id有用
在这里插入图片描述
故意不写这两个name在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

输入密码提交
在这里插入图片描述
在这里插入图片描述
这是提交给server的
在这里插入图片描述
提交之后是这些

在这里插入图片描述
在这里插入图片描述
起个名字看看

在这里插入图片描述
现在连提交都有，按了个name名字submit，多了个value 提交
在这里插入图片描述
真的提交是编码了，做了url编码

在这里插入图片描述
现在重要的是表格布局，然后把表单控件扔进去，最后提交

在这里插入图片描述

还有一个东西，重置
在这里插入图片描述
很少有人用

在这里插入图片描述
还有一个很重要但是基本看不到的，现在放在table和tr之间，起个名字name，提交的之后用的
在这里插入图片描述
回到text的页面，最初始的状态

在这里插入图片描述
在这里插入图片描述
有h，这个东西是来懵小白的
在这里插入图片描述
比如你可以藏一些id，比如某个人的id藏在这里
在这里插入图片描述
有些东西是非保密的，用户是可以看的，但是又不想显示在这里插入图片描述
显示的时候用户名后面是没有东西的，表单数据要往后传，一定要设置name属性

在这里插入图片描述
ul指的是无序的列表，ol有序列表

在这里插入图片描述
在这里插入图片描述
有序列表
在这里插入图片描述
用的多的是这种
在这里插入图片描述
用了样式表可以变成导航栏div是阻止别人占一行的，span是内联的
在这里插入图片描述
块元素
在这里插入图片描述
用表格来布局就是表格套表格

在这里插入图片描述
div布局灵活可以自适应，但是有些div在某些浏览器不按规范走，比如IE，还有div的bug
在这里插入图片描述
这是在页面内写的脚本
在这里插入图片描述
script支持src属性，支持外链，会发起新的http请求下载js脚本
在这里插入图片描述

在这里插入图片描述
箭头号如果和标签冲突了就这么写

在这里插入图片描述
head头里面。metadata控制字符，还有script脚本，页面的或者是通过src外链下载下来的
在这里插入图片描述
p标签一般做文本分段
在这里插入图片描述
大段布局用div

在这里插入图片描述
用样式表可以控制div宽度， 不占一行
在这里插入图片描述
啊标签是个链接，知道href属性，target，title即可，span一般都是写文字，这样可以加样式控制
在这里插入图片描述
table一般写成这样即可，表头用tr做，不要th，直接用样式表控制表头形式
在这里插入图片描述
表单form，通过表格，div布局用的很多
在这里插入图片描述
里面写的控件没有改变

在这里插入图片描述

不要忘记外面套一个form，还可以加属性
在这里插入图片描述
table表单需要练习
在这里插入图片描述

48N6E
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面布局div，一进入页面默认选中第一个div
习惯有你&的博客
12-12 1万+
页面是div的排布，一进入页面默认选中第一个div，并且展示第一个div下的数据（默认选中的是当前月的上一个月），然后点击哪个div显示哪个div下的数据。 代码： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 投标人统计分析 <%
用html做一个学生信息表,制作一个表格，显示班级的学生信息。
weixin_39791322的博客
06-03 2334
new document window.onload = function(){var tr = document.getElementsByTagName("tr");for(var i =0;i<=tr.length-1;i++){changeBC(tr[i]);}}function changeBC(obj){console.log("1234");obj.onmouseover =...
html中p标签隔行换色,原生JS操作网页给p元素添加onclick事件及表格隔行变色
weixin_39832348的博客
06-29 312
1. 给网页中的所有p元素添加onclick事件：复制代码 代码如下:Insert title herewindow.onload=function(){var items=document.getElementsByTagName("p");for(i=0;iitems[i].onclick=function(){alert("单击成功...");}}}测试段落一...测试段落二...测试段落三...
JS脚本实现网页自动秒杀点击
10-18
本篇文章主要教给大家如何用JS写一些商城中秒杀等自动点击功能，有这方面需要的朋友赶快学习下思路吧。
div 高度自适应，并且有默认值
加菲猫小站
07-19 384
height:400px;height:auto;min-height:400px;width:500px;
2020新课-微信小程序接口开发实战、坑的解决
06-18
【课程说明】00-微信小程序接口开发课程说明01-搭建课程学习的小程序【变量和接口】02-基础用法-变量的定义和使用03-接口用法-服务端环境的介绍04-接口用法-服务器端数据调用和常见坑讲解(HTML页面接口数据)05-接口...
TIL:今天我学到了..
04-16
02-11〜2020-02-14： 项目进展 2020-04-03：Hackathon（音乐播放器） 2020-04-20〜2020-04-24：Baam播放器（音乐播放器） 2020-05-25：Hackathon2020-06-22〜2020-07-17 Omegabox ＃JavaScript学习历史2020-02-16：...
html-css-javascript-projects:使用HTML，CSS和JavaScript的70多个小型Web项目
03-18
02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18岁 19 20 21岁 22 23 24 25 26 27 28岁 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65岁 ...
计算机学习WEB2020，全套
08-22
02 CSS 03 项目实战，优品购，电商项目 04 HML5+CSS3 05 flex伸缩布局 06 移动web开发 07 javascript基础语法 08 web api编程 09 jquery编程 10 Javascript高级 ES6 11 前后端交互node+gulp 12 前后端交互 MongoDB+...
HTML：form表单中的input、button和submit
野原新之助
11-21 6632
简述： 在HTML中input、button和submit三种方法都可以显示一个操作按钮，语句如下： input button：<input type="button" value="按钮"> <br> button(默认)：<button>按钮</button> <br> button(button)：<button type="...
Web前端面试题
落日夕霞的博客
10-19 4698
1. DOCTYPE 作用，标准模式与兼容模式(怪异模式)的区别？ &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
除了a链接跳转，还有其他的跳转方式
weixin_30338481的博客
01-19 1031
一.直接在要跳转部分加上onclick事件 1.加入onclick事件： <div onclick="window.open('http://baidu.com','_blank')" style="cursor:pointer"></div> 二、使用js给将要跳转部分加上链接 1.//首先获取id/class名，并为其绑上事件（当然类名相同时会出现问题...
HTML基础学习
韬光养晦
09-11 1447
W3school链接：https://www.w3school.com.cn/html/index.asp 我的笔记： <!--声明html5格式--> <!doctype html> <html> <head> <!--声明解码格式--> <meta charset="utf-8"/> <title&gt...
列表表格及表单美化
jinqianwang的博客
05-17 2079
字体样式的设置，属性有：font-family      设置字体类型    隶书font-size          设置字体大小    12pxfont-style        设置字体风格     italicfont-wieght     设置字体的粗细      bold还可以将4中属性一起写入一个font中，不过要按照：字体风格----&gt;字体粗细----&gt;字体大小----...
html如何跳转到另一个页面_如何进行HTML页面的布局
weixin_39538607的博客
12-01 8216
当我们刚开始学习Web前端时，就对HTML页面的布局特别感兴趣，上一讲《CSS初步介绍》中，讲解了CSS的入门知识，现在我们介绍一下HTML布局的知识。HTML布局的方案有Table布局、最流行的DIV布局、以及HTML5建议的DIV布局的替代方案。当HTML内容被浏览器显示后，整个HTML页面对使用者来说，就是一个显示信息与进行操作的界面。我们常常见到类似下面的界面：使用word设计的一个简易界...
主流浏览器图片反防盗链方法总结
前端大全
04-25 1038
（点击上方公众号，可快速关注）作者：Mythsblog.mythsman.com/2018/04/20/1/前言还记得之前写的那个无聊的插件，前一段时间由于豆瓣读书增加了...
//-----------end------------ }) </script> </body>
最新发布
06-22
对不起，您提供的内容看起来像是HTML或JavaScript代码片段，但这段代码并没有直接展示如何在JavaScript中使用`//-----------end------------ }`这样的表达式。通常，JavaScript中没有直接匹配这个格式的语法结构。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值