HTML 元素语法

    HTML 元素以开始标签起始
    HTML 元素以结束标签终止
    元素的内容是开始标签与结束标签之间的内容
    某些 HTML 元素具有空内容（empty content）
    空元素在开始标签中进行关闭（以开始标签的结束而结束）
    大多数 HTML 元素可拥有属性

HTML 标签
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head><title>XXX写的HTML</title></head>
<body>
<a href="https://www.xiwanghulian.com/">这是链接：本地测试环境</a>
</body>
</html>

<html> 元素定义了整个 HTML 文档。
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
<title> 标签定义了浏览器窗口的标题。
<script>标签用于加载脚本文件，如： JavaScript。
CSS 可以通过以下方式添加到HTML中:

    内联样式- 在HTML元素中使用"style" 属性
    内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
    外部引用 - 使用外部 CSS 文件
<p style="color:blue;margin-left:20px;">This is a paragraph.</p> 
<p style="background-color:green;">这是一个段落。</p>
<body> 元素定义了 HTML 文档的主体。
    <img> 只包含属性，没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
    <img src="boat.gif" alt="Big Boat">
     alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
    浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
    为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
<a href="url">链接文本</a>   

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），
 每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容
表格的表头使用 <th> 标签进行定义。
<table border="1">
    <tr>
        <th>表头1</th>
        <th>表头2 2</th>
    </tr>
    <tr>
        <td>第一行,第一格</td>
        <td>第一行,第二格</td>
    </tr>
    <tr>
        <td>第二行,第一格</td>
        <td>第二行,第二格</td>
    </tr>
</table>

无序列表使用 <ul> 标签
    <ul>
        <li>无序列表01</li>
        <li>无序列表02</li>
        <li>无序列表03</li>
    </ul>

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
    <li>有序列表01</li>
    <li>有序列表02</li>
    <li>有序列表03</li>
</ol>




<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局


<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>




<span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性


<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我父亲有 <span style="color:red;font-weight:bold">红色</span> 的眼睛。</p>




表单使用表单标签 <form> 来设置:


<form>

.

input 元素

.

</form>



<form action="/match/auth/login.html">
用户名: <input type="text" name="usernamename"><br>
密码: <input type="password" name="password"><br>
    <input type="submit" value="提交按钮"><br>
    <input type="radio" name="sex" value="male">单选按钮01<br>
<input type="radio" name="sex" value="female">单选按钮02<br>
    <input type="checkbox" name="vehicle" value="Bike">复选框01<br>
<input type="checkbox" name="vehicle" value="Car">复选框02<br>
</form>





HTML 属性

    HTML 元素可以设置属性
    属性可以在元素中添加附加信息
    属性一般描述于开始标签
    属性总是以名称/值对的形式出现，比如：name="value"。

<a href="http://www.runoob.com">这是一个链接</a>
iframe语法:
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。


  <iframe src="URL"></iframe>


该URL指向不同的网页。




<iframe src="demo_iframe.htm" width="200" height="200"></iframe>




<iframe src="http://test.zhonghuajinfu.com/" name="iframe_a" width="1600" height="400"></iframe>




height 和 width 属性用来定义iframe标签的高度与宽度。




HTML <script> 标签


<script> 标签用于定义客户端脚本，比如 JavaScript。


<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。




<script> document.write("Hello World!"); </script>






<p id="demo">
JavaScript 可以触发事件，就像按钮点击。</p>


<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>






常用javascript方法：
selenium中常用方法例如：
判断元素是否存在：       is_dispaly
获取元素的文本：        webelement.text
获取页面的标题：        driver.title
获取元素的某个属性的值：  webelement.get_attribute('属性值')
上面的selenium方法同样的，都可以用js来实现，当遇到selenium不能解决的可以考虑通过执行js；js和xpath一样非常的灵活，强大
JavaScript可以获取浏览器提供的很多对象，并进行操作。
window就是一个对象；表示浏览器窗口
打开新的浏览器窗口：window.open(url)
             window.innerWidth
             window.innerHeight
             window.outerWidth
             window.outerHeight
             滚动条：window.scrollTo(0,document.body.scrollHeight)
                       window.By(0,document.body.scrollHeight)
             非页面类型的滚动条：document.getElementsById(id)[0].scrollTop=''

location当前页面的URL对象
获取当前url:location.href获取
更改当前url:location.assign()
刷新：location.reload()
document:表示当前页面对象
       HTML在浏览器中以DOM形式表示为树形结构，
       document对象就是整个DOM树的根节点,然后去操作子节点
获取当前标题：document.title
输入文本的值：document.getElementsById(id)[0].value=''
操作标签：   document.getElementsById(id)[0].click()
更改属性：   document.getElementById('vip').style.visibility='visible'


												


											
HTML,js的基础知识的更多相关文章
	

    
						
  1. css+js+html基础知识总结
		
    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
    
		
    2. 
						
  2. 001/Node.js(Mooc)--基础知识
		
    一.Node.js基础知识 node.js用C++语言编写. 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时 ...
    
		
    3. 
						
  3. node.js的基础知识
		
    第一部分知识: .命令行窗口(小黑屏).CMD窗口.终端.shell - 开始菜单 --> 运行 --> CMD --> 回车 - 常用的指令: dir 列出当前目录下的所有文件 c ...
    
		
    4. 
						
  4. js的基础知识笔记
		
    目录 一.基本数据类型 二.函数 三.面向对象 一.基本数据类型 1.使用var声明变量.使用;结尾.使用{}表示代码块.使用驼峰式命名 2.变量是弱类型的,即并不严格要求声明变量的类型,一个变量可以 ...
    
		
    5. 
						
  5. 【JS】基础知识
		
    引言 在互联网的演化过程中,网页制作是Web1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主. 2005年以后,互联网进入了Web2.0时代,各类似桌面软件的Web应用大 ...
    
		
    6. 
						
  6. 二、js中基础知识
		
    该篇文章主要是强化一下自己javaScript的基础,让写代码变得更轻松些.基础好的请忽略.    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解 ...
    
		
    7. 
						
  7. JS的基础知识
		
    前言:写前端代码时的各种取值纠结,让我决定我必须要好好学一下js............加油~ $("#tr"+id).remove() 删除某一行,而不用刷新页面 HightCh ...
    
		
    8. 
						
  8. js函数基础知识
		
    [函数的声明及调用] function 函数名(参数1,参数2,....){ //函数体代码 return返回值: } 1.函数的调用: ①直接调用:函数名(参数1的值,参数2的值,....) ②事件 ...
    
		
    9. 
						
  9. three.js引擎基础知识—摄像机、场景及渲染器
		
    一.three.js采用右手坐标系: x轴正方向向右,y轴正方向向上,z轴由屏幕从里向外,如下图右: 二.3D编程三要素:场景.渲染器.摄像机 1.场景:创建的物品和模型都需放入场景中 threejs ...
    
		
    10. 
						
  10. JS常用基础知识
		
    前言:在js中dom和bom是我们操作的基本,在最初接触时候我也懵,但是后来慢慢发现其实bom就是操作浏览器,而dom就是操作文本框节点.
    
		
    11. 
		

	


随机推荐
	

    
									
  1. FileZilla-01
			
    FileZilla FTP-client可用于通过上传和下载文件和图像来管理WordPress网站. 设置选项: 01.网址:ftp地址(如果网址是http://example.com,则通常是ftp ...
    
			
    2. 
						
  2. 关于data()获取不到得原因
			
    ..原因很简单,版本高低问题  从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中.  所以,还是尽量保持用attr来获取自定义属性
    
			
    3. 
						
  3. vue数组中对象属性变化页面不渲染问题
			
    问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...
    
			
    4. 
						
  4. Nginx禁止IP直接访问网站
			
    禁止别人直接通过IP访问网站,在nginx的server配置文件前面加上如下的配置,如果有通过IP直接访问的,直接拒绝连接(需要去掉别的server下的default_server). server  ...
    
			
    5. 
						
  5. Excel将一列数据变为两列
			
    如下表可将第一列分散到第二列和第三列 A B C 1 =OFFSET($A$1,(ROW(A1)-1)*2+COLUMN(A1)-1,) &"" =OFFSET($A$2, ...
    
			
    6. 
						
  6. DP擎天
			
    DP! 黄题: 洛谷P2101 命运石之门的选择 假装是DP(分治 + ST表) CF 982C Cut 'em all! 树形贪心 洛谷P1020 导弹拦截 单调队列水题 绿题: 洛谷P1594 护 ...
    
			
    7. 
						
  7. 降维【PCA & SVD】
			
    PCA(principle component analysis)主成分分析 理论依据 最大方差理论 最小平方误差理论 一.最大方差理论(白面机器学习) 对一个矩阵进行降维,我们希望降维之后的每一维数 ...
    
			
    8. 
						
  8. Java实现AES加密
			
    一)什么是AES? 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),是一种区块加密标准.这个标准用来替代原先的DES,已经被多方分析且广为全世界所使用.  ...
    
			
    9. 
						
  9. 设置redis服务开机自启动
			
    今天周一,一大早来公司开完会,就听到开发的同学说本地项目起不来了,叫我查下原因.想了下,他们本地项目只跟我们公司的一台内网服务器有关,那台服务器他们要用到的呢,也就只有mysql和redis这两个服务 ...
    
			
    10. 
						
  10. （一）校园信息通微信小程序从前端到后台整和笔记
			
    前段时间接触了微信小程序,现在回过头来做一些笔记. 先上效果图 后台数据管理界面(PHP) 校园信息通微信小程序前端界面 下面先简单的说一下怎样部署一个微信小程序 首先是前端 微信小程序有它专门的开发 ...
    
			
    11.