前端HTML回顾

<html>标签:定义HTML文档

<body>标签:定义文档主体

<h1> - <h6> 标签:定义HTML标题

<hr> 标签:创建水平线

<!-- 这是一个注释 --> 注释

<p> 标签:段落

<br />标签:换行


HTML 链接

<a> 标签:链接

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时,链接显示为红色并带有下划线。

(1)href属性:来描述链接的地址

<a href="url">链接文本</a>

(2)target 属性:定义被链接的文档在何处显示

  例:target="_blank": 链接将在新窗口打开

(3)id属性:在一个HTML文档书签标记

  例:插入ID   <a id="tips">文字</a>

    文档中创建一个链接到ID部分  <a href="#tips">文字</a>

    创建一个链接到其它文档ID部分<a href="http://www.baidu.com/html-links.html#tips">文字</a>

注释: 请始终将正斜杠添加到子文件夹。

  例:href="http://www.baidu.com/html/


HTML <head> 元素

头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>

<title> 标签:定义了不同文档的标题

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时,显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

<base> 标签:描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

<base href="http://www.baidu.com/images/" target="_blank">

<link> 标签:链接到样式表(CSS)

<link rel="stylesheet" type="text/css" href="mystyle.css">

<style> 元素:直接添加CSS样式来渲染 HTML 文档

<head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head>

<meta> 标签:提供了元数据不显示在页面上,但会被浏览器解析。

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒中刷新当前页面:

<meta http-equiv="refresh" content="30">

<script>标签:用于加载脚本文件,如: JavaScript


HTML 图像- 图像标签( <img>)和源属性(Src)

<img> 是空标签,只包含属性,没有闭合标签。

<img src="url" alt="some_text">

(1)src 属性: "source"源属性的值是图像的 URL 地址

(2)alt 属性:用来为图像定义一串预备的可替换的文本。

(3)height(高度) 与 width(宽度)属性:用于设置图像的高度与宽度。


HTML 表格

<table> 标签:表格

<tr> 标签:行

<th> 标签:表头

<td> 标签:单元格

colspan="2":链接行的两个段元格

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr></table>


HTML 列表

<ul> 标签:无序列表

<ol> 标签:有序列表

<li> 标签:每个列表项的开始

<ul><li>Coffee</li><li>Milk</li></ul><ol><li>Coffee</li><li>Milk</li></ol>

<dl>标签:自定义例表
<dl><dt>自定义列表项</dt><dd>自定义列表项的定义<dd><dt>自定义列表项</dt><dd>自定义列表项的定义<dd></dl>

HTML 区块

<div> 元素:块级元素,可用于组合其他 HTML 元素的容器。

<span> 元素:内联元素,可用作文本的容器。

<table> 元素:作用是显示表格化的数据。

块级元素(block-level):在浏览器显示时,通常会以新行来开始(和结束)。例: <h1>, <p>, <ul>, <table>

内联元素(inline):在显示时通常不会以新行开始。例: <b>, <td>, <a>, <img>


HTML 布局

<div>块级元素或是<table>表格化的数据


HTML 表单和输入

<form>标签:表单

<input>标签:输入

文本域(Text Fields):缺省宽度是20个字符

<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>

密码字段:<input type="password">——密码不会显示,以星号或圆点替代

<form>Password: <input type="password" name="pwd"></form>

单选按钮:<input type="radio">

<form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form>

复选框:<input type="checkbox">

<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

提交按钮:<input type="submit">

<form name="input" action="html_form_action.php" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"></form>

HTML 框架

<iframe>框架:在同一个浏览器窗口中显示不止一个页面。

iframe语法:<iframe src="URL"></iframe>

height 和 width 属性:用来定义iframe标签的高度与宽度。——属性默认以像素为单位,

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

frameborder 属性:是否显示边框——属性值为 "0" 移除iframe的边框

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

例:点击链接,链接地址页面显示在iframe框架中

<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://www.baidu.com" target="iframe_a">baidu.com</a></p>

注:name和target名字相同。

时间: 2024-08-24 23:03:08

前端HTML回顾的相关文章

web前端技术回顾

短暂的前端学习结束了,系统的接受了html+css+JavaScript+jQuery+Bootstrap.东西很多很系统.现在就来回顾下之前的学习内容.HTML让我认识到了网页的基本构成主要是由: <html> <head></head> <body></body> </html>这三部分组成,head里面可以放<title></title>标签,<title>的主要作用是可以在网页运行中把你的网

前端测试回顾及我们为什么选择Karma

前端测试,或者UI测试一直是业界一大难题.最近Q.js使用Karma作为测试任务管理工具,本文在回顾前端测试方案的同时,也分析下为什么Q.js选用Karma而不是其他测试框架. 像素级全站对比 曾今有一批人做过这样的UI测试,即最终页面图像是否符合预期,通过图片差异对比来找出可能的问题. 如图所示,所谓像素级站点对比,即利用截屏图像前后对比来找出,站点前后差异,从而发现问题. Q: 为什么需要这种测试呢? A: CSS容易被破坏,在大型响应式重构案例中,像素级全站对比是一个比较好的测试方案. 目

python 自动化之路 day 18 前端内容回顾、补充/Django安装、创建

前端回顾: 整体: - HTML - CSS - JavaScript - 基本数据类型 - for,while.. - DOM - obj = document.getElementById('..') - obj.innerHtml - BOM: - setInterval... ----> 可以完成所有操作 <---- - jQuery: - 选择器 $('#') $('.') - 筛选器 $('#').find('') - 内容或属性 - $('#i1').val() input系列,

Python之路【第十四篇】前端补充回顾

布局和事件 1.布局 首先看下下面的图片: 上面的内容都是居中的,怎么实现这个效果呢,第一种方法是通过float的方式,第二种是通过“div居中的方式” 第一种方式不在复述了,直接看第二种方式: 1.首先根据上面的图片我们可以把整个页面分为,“上”.“下”两部分 2.然后在在上下两部分中设置div并让他居中 3.居中的div不需要给他设置高度可以让内容给他吧高度顶起来 代码如下: <!DOCTYPE html> <html lang="en"> <head

2017前端发展回顾

译者按: 老技术日趋成熟,新技术层出不穷. 原文: A recap of front-end development in 2017 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 前端开发在2017年依然持续火热,本文将对热点事件做一个总结. 16版的React和MIT协议 在前端领域,React一直独占鳌头.2017年又发布了一个重大的版本更新 version 16.在新版本中,引入了fiber结构来支持异步UI渲染.该版本也提供

前端基础回顾

清除字符串前后的空格.(兼容所有浏览器) function trim(str) { if (str && typeof str === "string") { return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符 } } 快速排序 (1)在数据集之中,找一个基准点 (2)建立两个数组,分别存储左边和右边的数组 (3)利用递归进行下次比较 function quickSort(arr){ if(arr.l

前端知识点回顾——Nodejs

Node.js 事件循环机制 setImmediate()是将事件插入到事件队列尾部,主线程和事件队列的函数执行完成之后立即执行setImmediate指定的回调函数,和setTimeout(fn,0)的效果差不多 process.nextTick()方法可以在当前"执行栈"的尾部-->下一次Event Loop(主线程读取"任务队列")之前-->触发process指定的回调函数.也就是说,它指定的任务总是发生在所有异步任务之前,当前主线程的末尾. 事件

前端知识点回顾——Javascript篇(六)

fetch 在原生ajax+es6promise的基础上封装的一个语法糖,返回promise对象. fetch(url, initObj) .then(res=>res.json()) .then(data=>{ //这里得到返回的json对象,可进行操作 }) .cateh(err){ console.log(err); }; //initObj { body: JSON.stringify(data), // must match 'Content-Type' header cache:

前端知识点回顾之重点篇——jQuery实现的原理

jQuery jQuery的实现原理 参考:https://blog.csdn.net/zhouziyu2011/article/details/70256659 外层沙箱和命名空间$ 为了避免声明了一些全局变量而污染,把代码放在一个"沙箱执行".jQuery具体的实现,都被包含在了一个立即执行的匿名函数构造的闭包里面,然后只暴露 $ 和 jQuery 这2个变量给外界: (function(window, undefined) { // 用一个函数域包起来,就是所谓的沙箱 // 在这