js获取html中div里的标签id_【学废了】HTML初步
有些程序员说什么都没事，就是说 HTML 是一门编程语言，他马上跳起来跟你吵，非说 html 不是图灵完备啊，html 是标记语言啊之类的。笔者对此不表达任何立场。不过 HTML 确实是一门颇有意思的技术。
简简单单
今天的内容不简单哦，建议多读几次好好地消化。回复 html 可以获取更多阅读资源哦！
游览器拿到了 html, css, js 文件，就开始展示了。其中 html 文件是整个网页的骨架。没有它啥都不会显示出来。它一般都长这样：
<html> <head> <title>Titletitle> <link rel="stylesheet" type="text/css" href="./style.css" /> <script src="src/index.js">script> head> <body> <p> Hello World p> body>html>有没有看晕了？其实很简单。HTML (HyperText Markup Language)是一种标记语言(Markup Language)，全称 超文本标记语言。标记语言还有有很多其它种，比如 xml, svg 等都是标记语言。可以看下图了解何为标记语言。
每个标记语言都由标签组成。标签可以有属性与值，内容，子标签等。有些特殊的标签比如 是注释。要注意在 html 中，我们一般把标签叫成元素 (element)。html 有两个元老级属性，在任何标签上都可以加(除了少数比如 注释)。它们就是 class 和 id 。CSS 和 JS 还会遇到它哦！
<html> <head> <title>Titletitle> <link rel="stylesheet" type="text/css" href="./style.css" /> <script src="js/index.js">script> head> <body> <p> Hello World p> body>html>再回到前面的例子。!DOCTYPE 标签声明了这是 html，而不是 svg、xml 之类的。html标签是将一切包裹起来的根元素，它的子元素永远是 head 和 body 。head声明了一些元信息，比如 title 就是网页标签页的名字。比如百度的title就是 百度一下，你就知道。
link 定义文档与外部资源的关系。它的属性 rel ，全名relationship，顾名思义就是规定当前文档与被链接文档之间的关系。type 是规定被链接文档的 MIME 类型。MIME 类型五花八门，只要知道它是一种表示文件性质和格式的标准。
script 就是脚本标签，它里面没写东西，而是用 src 属性指向了 js/index.js。script 里面也可以写 Javascript，如以下示例：
<script> console.log('Hello World');script>(以后肯定会讲到 JavaScript，它可是重头戏！)
现在我们从head里面出来了，body 里面只有两个元素。注释不用管它，就一个p元素。它的全名是 paragraph，也就是段落的意思。它就像 Word 里面的段落，单纯显示文字的。把上述代码打出来，在游览器打开，就可以看到如下效果：
学废警告！非战斗人员请撤离！
你可能会奇怪为什么 script 的标签和 link 标签 。
其实网站可以想象成一个文件夹，网址 URL 的格式可以这样总结：
hostname 就是平时说到的域名，path 就是文件路径。关于这张图以后会详细讲解。
大部分网站，没有指定路径时，默认是根目录下的 index.html 文件。这里根目录是服务器所服务的 ”文件夹“ 的根目录。
题外话，这个 ”文件夹“ 为什么打引号？因为它不一定是真正意义上的文件夹，可以是经过服务器处理后返回的文件，而这个路径只是传给服务器的参数。但是这并不妨碍我们当它是一个文件夹。
假设这个文件夹叫 www ，输入它的网址就得到 index.html。
> www|> js| | index.js||index.html|style.cssjs 是一个文件夹，它底下有一个 index.js 。因此 script 标签的 src 属性 js/index.js 就是指向这个文件夹。而 ./style.css 则是指向与 index.html 同目录的 style.css 文件。这个 . 就代表当前目录，而 /代表去到接下来的路径。为什么js/index.js没有 ./开头？其实带不带 ./ 都是一样的，也就是说 style.css 也是 link 的合法 href 属性。
当 html 被解析后，它可以被看成一棵树。树是一种计算机数据结构，其实也很像平时看到的树。这里就不展开了。树是有层级概念的，这个概念在接下来理解 CSS 和 JS 用处很大。请看一下例子(head 部分省略掉了，直接看 body里面的内容)：
<body> <div class="title">Logindiv> <form action="login" id="login-form"> <div class="field"> <label for="username">User: label> <input type="text" name="username"> div> <div class="field"> <label for="password">Password: label> <input type="text" name="password"> div> <button type="submit">Loginbutton> form>body>这是一个很简单的登录界面，有很多值得探讨的。假设这颗”树“ 的根节点是 body，那 body节点就有两个子节点：div 和 form。其中 div 的 class 是 title，有时这个 div可以被写成 div.title。form 有个 id 属性 login-form。它可以被写成 form#login-form。所以 # 后面跟的是 id，而 . 后面跟的是 class。是不是很简单？
form#login-form和 div.title是兄弟节点。div.field是form#login-form的子节点。input[type="text"]是form#login-form的孙子节点，是div.field的子节点。没错，可以通过tag[attr="value"]的方式得到某属性 attr 值为 value 的元素。这部分在 CSS 选择器章节将详细描述。
说了这么多，咱们来看一下上面代码的效果吧：
是不是很简单？接下来的几篇文章将一步步地完善这个登陆界面，不仅漂亮，还好用哦！敬请期待！(咕咕咕)建议自己做一遍哦。在公众号后台回复 html可以获取源代码压缩包，并且许多其它扩展阅读资源！
js获取html中div里的标签id_【学废了】HTML初步相关推荐
- Jquery和JS获取Table中tr标签的值以及赋值问题
Jquery和JS获取Table中tr标签的值以及赋值 业务场景:根据 类型,给比例赋值,是当前td比例动态变化:废话少说,直接上代码 1.以下是HTML代码; <div class=" ...
- js获取摄像头中的视频流并上传到后台
今天研究了下js获取摄像头中的视频流,全网搜索相关的文章,终于上天不负有心人.以下是原文代码: index.html: <!DOCTYPE html> <html><he ...
- js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
- 面试题-js获取cookie中存储的值?
js获取cookie中存储的值? 1.cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是Jav ...
- php获取div高度,JS获取一个未知DIV高度的方法
本文实例讲述了JS获取一个未知DIV高度的方法.分享给大家供大家参考,具体如下: 通过元素的clientHeight属性能够得到元素的高度,如:var height = element.clientH ...
- JS获取URL中参数值（QueryString）的4种方法分享
http://www.jb51.net/article/48942.htm JS获取URL中参数值(QueryString)的4种方法分享 作者: 字体:[增加 减小] 类型:转载 今天碰到要在一个页 ...
- js 获取字符串中最后一个斜杠前面/后面的内容
js 获取字符串中最后一个斜杠后面的内容: var str = "/asdasf/asfaewf/agaegr/trer/rhh"; var index = str .lastIn ...
- html获取url参数值,js获取url中参数值的两种方法
本节主要内容: js获取url中参数值. 方法1:正则分析法 复制代码 代码示例: function getQueryString(name) { var reg = new RegExp(" ...
- 通过js获取Model中数据
通过js获取Model中数据 前端js获取model 1.获取model的js代码必须写在html中 2.script中添加 th:inline="javascript" < ...
- js 获取字符串中第二处出现的某个字符的索引
使用 string.indexOf( searchValue, start ) 函数,两个参数的含义: searchValue 需查询的字符串值 start 可 ...
最新文章
- Redis 秒杀实战
- [裴礼文数学分析中的典型问题与方法习题参考解答]4.3.13
- 魅族 虚拟位置服务状态:未运行_魅族17评测：「重量平衡设计」 手感出色 魅友们的5G梦想旗舰...
- 自定义SpringBoot start 被依赖时 程序包不存在的问题
- 我的css家园博客开通了
- 766. 托普利茨矩阵
- Seaborn学习笔记4
- MATLAB2016笔记（六）：数据可视化
- iOS打包上传时的四个类型
- VS2017突然不检查语法错误
- 海洋大数据应用关键技术及应用前景
- CocosCreator微信小游戏之排行榜
- 《孤独的青春创造不孤独的人生》
- Mindmanager 安装过程中 ERROR 1320. The specified path is too long （文件路径） 等问题
- 《软件测试》读书笔记
- Autofac简单介绍
- 第六天----数据结构笔记
- RSI指标使用技巧和参数设置
- 《Linux命令行与shell脚本编程大全》笔记一
- 由参数方程所确定的函数的导数