• 【前端】HTML入门笔记


    教程 HTML 指的是超文本标记语言 (Hyper Text Markup Language)、使用标记标签来描述网页

    HTML 提示:使用小写标签属性属性参考手册HTML颜色HTML颜色名

    h1:大标题 / <h1> - <h6>

    p:文本段落

    a:链接(可以是本地网页也可以是互联网上的页面) / <a href="。。。">。。。</a>

    *没有下划线的链接 <a href="。。。" style="text-decoration:none">。。。</a>

    *新窗口打开链接(target属性): <a href="。。。" target="_blank">。。。</a>

    *锚点(name属性):

      <p><a href="#C4">查看 Chapter 4。</a></p>

      。。。。

      <h2><a name="C4">Chapter 4</a></h2>

    *电子邮件链接:(要先有邮箱客户端)略

    img:图像 /<img src="。。。" width=X height=Y />

    注释:<!-- 。。。 -->

    pre:标签很适合显示计算机代码

    address:在HTML中写地址

    del:删除文本 /Jenny

    ins:插入文本 /Hui

    <br /> 就是没有关闭标签的空元素(<br。。。/> 标签定义换行)。

    <hr /> 标签在 HTML 页面中创建水平线。 /hr 元素可用于分隔内容。

    实现缩写或首字母缩写:

      <abbr title="etcetera">etc.</abbr>
      <acronym title="World Wide Web">WWW</acronym>

    改变文字的方向:

    ·<bdo dir="rtl">。。。</bdo>

    引用:使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。 //q会加上引号

    HTML属性:总是在 HTML 元素的开始标签中规定。 /属性值加引号 

    <h1 align="。。。"> 拥有关于对齐方式的附加信息。 /left、center、right

    <body bgcolor="。。。"> 拥有关于背景颜色的附加信息。

    <table border="1"> 拥有关于表格边框的附加信息。

    文本格式化:b,strong,big,em,i,small,sub,sup

    ================================

    head进行样式设置:

    <head>
    <style type="text/css">
    h1 {color: red}
    p {color: blue}
    </style>
    </head>

    内联样式:<p style="color: red; margin-left: 20px">。。。</p>

    外部样式表:<head><link rel="stylesheet" type="text/css" href="xxx.css"></head>

    内部样式表:

    <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>

    ====================================================

    背景图:<body background="。。。"></body>

    插入图,并设置位置:<p>图像 <img src="。。。" align="bottom"> 在文本中</p> /Y轴上的有top,bottom,middle //X轴上的有left,right

    为图片显示替换文本(如果图片没了会显示文本信息):<img src="。。。" alt="文本信息" />

    图片映射(图像上的某个区域都与超级链接)

    ====================================================

    每个表格由 table 标签开始。每个表格行由 tr 标签开始。每个表格数据由 td 标签开始。 /一个表格一个table,一行一对tr,行内有多少数据,就有多少对td

    数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    *表格的边框属性:<table border="XX">。。。</table>

    *表头:<th>。。。</th>

    *空单元格:<td>&nbsp;</td>

    *表的标题:<table><caption>XXOO</caption>。。。</table>

    *定义跨行或跨列的表格单元格(一个单元格占别的N个行/列):<td colspan="X">。。。</td>、<th rowspan="Y">。。。</th>

    *表内的标签:<td><li>A</li><li>B</li><li>C</li></td>

    *使用 Cell padding 来创建单元格内容与其边框之间的空白:<table border="X" cellpadding="Y">。。。</table> //cellspacing 变成单线条

    *向表格添加背景:<table border="1" bgcolor="red"> //background=“图片路径” //单元格同理

    *框架属性:<table frame="。。。">。。。</table> //使用 "frame" 属性来控制围绕表格的边框。 //box、above、below、hsides、vsides

    *有序列表:<ol start="X">。。<li>。。</li>。。</ol> //无序用<ul>。。。</ul> //属性<ul type="square/circle/disc/A/a/I">

    *定义列表:dl-dt-dd

    ====================

    div:定义文档中的分区或节(division/section)。

    span:定义 span,用来组合文档中的行内元素。

    *给div配属性id~在头部可对不同的div进行style配置

    *div/table都可以对网页布局

    ============================

    表单、输入框:form - <input type="text" name="。。。">

    *密码的输入框 - type="password"

    *单选按钮(name要一致):<input type="radio" name="。。" value="。。" /> 。。。 //复选框 type="checkbox"不用value

    *表单的动作属性(Action)和确认按钮:<form name="input" action="跳转页面地址" method="get">。。。<input type="。" value="。" />

    *下拉框:select(属性name) - option(属性value) //<select name="cars"><option value='A'>A</option></select>

    默认选中的话加一个属性selected="selected" //checked="checked"

    *文本域:<textarea rows="X" cols="Y">文本。。</textarea>

    *type:button(属性value)

    *在数据周围绘制一个带标题的框:fieldset

    *重置:<input type="reset" value="重置">

    =============================

    框架:竖直、水平

    • 框架结构标签(<frameset>)定义如何将窗口分割为框架
    • 每个 frameset 定义了一系列行或列
    • rows/columns 的值规定了每行或每列占据屏幕的面积

    <frameset cols/rows="25%,50%,25%"><frame src="页面路径"></frameset>

    *frameset - noresize 属性。框架是不可调整尺寸的。在框架间的边框上拖动鼠标,你会发现边框是无法移动的。

    *内联框架 iframe 属性src //<iframe src="/i/eg_landscape.jpg"></iframe>

    *iframe边框属性frameborder

    *一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C11"> 进行标识。 // <frame src="。。。html#C11">

    *使用 iframe 作为链接的目标

      iframe 可用作链接的目标(target)。

      链接的 target 属性必须引用 iframe 的 name 属性

    =================================

    <body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

    - 背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

    - 背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。

    =================================

    HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

    <!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。 //DOCTYPE 参考手册

    =================================

    <head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

    以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。

    *title 元素在所有 HTML/XHTML 文档中都是必需的。

    *<base> 标签为页面上的所有链接规定默认地址或默认目标(target)。

    *<link> 标签定义文档与外部资源之间的关系。<link> 标签最常用于连接样式表。

    *<style> 标签用于为 HTML 文档定义样式信息。您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式。

    *元数据(metadata)是关于数据的信息。<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。

    =================================

    <body>

    <script type="text/javascript">
    document.write("Hello World!")
    </script>
    <noscript>Sorry, your browser does not support JavaScript!</noscript>

    <p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p>

    </body>

    *<script> 标签用于定义客户端脚本,比如 JavaScript。script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。

    ==================================

    HTML 中的预留字符必须被替换为字符实体。 //HTML 实体符号参考手册

    *URL 编码参考手册

    ==================================

    如果希望向世界发布您的网站,那么您必须把它存放在 web 服务器上。 //网站主机教程

    ==================================

    HTML Object 元素:<object> 的作用是支持 HTML 助手(插件)。//不是很理解这个

    在 HTML 中播放声音的方法有很多种。//可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。

    *embed:三个属性width,height,src(插件路径)

    *object:三个属性 width,height,data(插件路径)

    *<audio> 元素是一个 HTML5 元素:一个属性<audio controls="controls"><source src="。。。.xxx" type="audio/xxx"/></audio>

    *使用雅虎播放器(js调用):<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

    只需简单地把 MP3 文件链接到您的 HTML 中,JavaScript 会自动地为每首歌创建播放按钮。

    *直接使用超链接也可以。(浏览器自带播放器)<a href="。。。">。。。</a>

    ====================================

    <video> 标签的作用是在 HTML 页面中嵌入视频元素。//obejce,embed也可以用

    *<video width="320" height="240" controls="controls" autoplay="autoplay"><source src="。。。.xxx" type="video/xxx"/></video>

    *在网页中播放视频,那么您可以把视频上传到优酷等视频网站,然后在您的网页中插入 HTML 代码即可播放视频:

      <embed src="视频swf地址" width="X" height="Y" type="application/x-shockwave-flash"></embed>

    *直接使用超链接也可以。(浏览器自带播放器)<a href="。。。">。。。</a>

    =====================================

    XHTML 是以 XML 格式编写的 HTML。 /XHTML 指的是可扩展超文本标记语言/XML教程

    文档结构

    • XHTML DOCTYPE 是强制性的
    • <html> 中的 XML namespace 属性是强制性的
    • <html>、<head>、<title> 以及 <body> 也是强制性的

    元素语法

    • XHTML 元素必须正确嵌套
    • XHTML 元素必须始终关闭 /空元素也必须关闭 
    • XHTML 元素必须小写
    • XHTML 文档必须有一个根元素

    属性语法

    • XHTML 属性必须使用小写
    • XHTML 属性值必须用引号包围
    • XHTML 属性最小化也是禁止的

    如何从 HTML 转换到 XHTML

      1. 向每张页面的第一行添加 XHTML <!DOCTYPE>
      2. 向每张页面的 html 元素添加 xmlns 属性
      3. 把所有元素名改为小写
      4. 关闭所有空元素
      5. 把所有属性名改为小写
      6. 为所有属性值加引号
    感谢阅读,一起努力呗!
  • 相关阅读:
    httpClient 中的post或者get请求
    java自带的http get/post请求servlet
    java文件的读写操作
    java文件创建和删除
    java.lang.IllegalStateException: Ambiguous mapping. Cannot map 'waterQuality
    win10系统jdk安装和环境变量配置
    echarts报错Can't get dom width or height
    org.springframework.beans.factory.BeanCreationException
    jsp与后台交换数据(安全目录外)
    LeetCode —— Invert Binary Tree
  • 原文地址:https://www.cnblogs.com/jennyhui/p/4023931.html
Copyright © 2020-2023  润新知