• HTML,js的基础知识


    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'


  • 相关阅读:
    十大经典算法总结
    十大经典算法总结
    MySQL主从同步模拟
    MySQL主从同步模拟
    高斯定理
    高斯定理
    如何修改数据决策系统登陆地址为ip
    如何修改数据决策系统登陆地址为ip
    数据库连接池问题 Max Pool Size
    数据库连接池问题 Max Pool Size
  • 原文地址:https://www.cnblogs.com/cyq0528/p/9884296.html
Copyright © 2020-2023  润新知