精华内容
下载资源
问答
  • 随着岗位竞争的越来越激烈,...我将我在代码方面的知识总结分享给大家,赶紧往下看吧html基础知识解析(一)基础认识html语句是由标签+属性构成的html 标签由开始标签和结束标签组成,开始标签是被括号包围的元素名,...

    随着岗位竞争的越来越激烈,而设计师掌握的技能要求也越多,设计师不光只会设计,而且也要懂(会)代码(会手写代码更会加金的),所以我们要做一位懂代码设计师,还好Jason在大学学过代码,毕业也做过一段时间的设计+前端,我将我在代码方面的知识总结分享给大家,赶紧往下看吧

    a854ab02fabe2ea3b396418d1442b177.png

    html基础知识解析(一)

    基础认识

    html语句是由标签+属性构成的

    html 标签由开始标签和结束标签组成,开始标签是被括号包围的元素名,结束标签是被括号包围的斜杠和元素名,但某些 html 元素没有结束标签,比如
    、,这类标签称为单标签。

    721af6536d16ce0005caca941a202dee.png

    html基础知识解析(一)

    属性的语法

    1、写在标签的<>内,而且在标签代码之后,如

    2、属性名=""(一定得是英文的引号,不能是中文的引号。其实不用引号对于它的显示没有影响,但加上引号为标准做法)

    如 align="center" align为属性名 center left right是属性值

    3、有的标签没有任何属性(
    ),有的标签虽然有属性,但可以不加上也不影响它的使用(

    )

    64553d374cf2f11b42fdf3387095021a.png

    html基础知识解析(一)

    网页的基本结构

    html,head,body 是html代码必不可少的三大标签,其中

    html标签:用于定义html文件的标签,这个标签意味着这个文件是一个html文件

    head标签:里面的内容不能再浏览器中直接呈现,但它会用后台运作的方式为html页面提供种种功能

    body标签:里面出现的内容会在浏览器中得到直接呈现,供读者浏览

    必须要记住的标签和属性

    放在

    之间的标签定义html文档的标题。与之间的内容将显示在浏览器窗口的标题栏。

    891b17b68cdc0f56991df410e2652c25.png

    html基础知识解析(一)

    标签

    标签类可以插入很多很有用的元素属性。常用的有以下四种:

    用来标记搜索引擎在搜索你的页面时所取出的关键词。

    用来标记文档的作者。

    用来标记你的页面的解码方式。

    用来自动刷新网页

    4d464f5dc520c78666ff060a8efa7ab3.png

    html基础知识解析(一)

    放在

    之间的

    与文字相关的标签

    文字标题

    ...

    #=1, 2, 3, 4, 5, 6

    段(paragraph)

    空白占位符

    换行

    文字的分区显示

    ...
    (#=left, center, right)

    显示斜体文本效果。

    呈现粗体文本效果。

    呈现大号字体效果。

    呈现小号字体效果。

    a283e8c7425d12afa7f82c8a5b59c34d.png

    html基础知识解析(一)

    无序列表

    无序列表是由

    • 元素定义的:
      • sports
      • food
      • drink
      • friends
      • 中均可加入type属性,type的属性值有:disc(圆)、circle(圆圈)、square(方块)

        有序列表 start 值为数字

        有序列表由

        1. 定义:
          1. sports
          2. drink
          3. friends

          ....................................................................

          我的微信公众号:UI严选 —越努力,越幸运

    展开全文
  • HTML部分骨架解析

    2021-03-07 13:01:59
    HTML头部代码解析HTML一、HTML定义二、HTML头部解析 HTML 一、HTML定义 1.超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 2.解析:之所以称为超文本标记语言...

    一、HTML定义

    1.超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
    2.解析:之所以称为超文本标记语言在于,HTML通过各种标签以及超链接进行进行页面结构的搭建。

    二、HTML部分骨架解析

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
    </html>
    
    

    1.<!DOCTYPE>
    (1)<!DOCTYPE> 声明位于文档中的最前面的位置,处于 标签之前。
    (2)<!DOCTYPE> 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
    (3)HTML 文档添加 <!DOCTYPE> 声明,确保浏览器能够预先知道文档类型,保证浏览器可以对标签进行正确的解析
    2.<html lang="en">
    (1)lang用来定义当前文档显示的语言。
    (2)en定义语言为英语
    (3)zn-CN定义语言为中文
     简单来说定义为什么就是什么网页,其实显示什么语言与定义无关。主要用于提示浏览器是否翻译成相应语言。
    3.<meta>
    (1)元数据(Metadata)是数据的数据信息。

    (2) 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。

    (3)META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。

    (4)元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。

    (5)
      *实例 1 - 定义文档关键词,用于搜索引擎:
      html <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
      *实例 2 - 定义web页面描述:
      html <meta name="description" content="Free Web tutorials on HTML and CSS">
      *实例 3 - 每30秒刷新页面:
      html <meta http-equiv="refresh" content="30">
    (6)属性
    在这里插入图片描述<meta charset="utf-8">
    (1)字符集(character set)是多个字符的集合,以便计算机能够识别和存储各种文字。在标签内,可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码。
    (2)charset常用的值有:GB2312(简体中文)、BIG5(繁体中文)、GBK(包含简体中文和繁体中文)和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符,一般统一使用UTF-8。

    展开全文
  • HTML文档解析

    千次阅读 2018-11-12 13:49:13
    2.1&lt;!DOCTYPE! html&gt;...它是html5标准网页声明,全称为Document Type HyperText Mark-up Language,意思为文档种类为超文本标记性语言或超文本链接标示语言,现在是这个简洁形式,...

    2.1 <!DOCTYPE! html>
    什么是<!DOCTYPE html>?

    在HTML文档初,往往会有这么一句话<!DOCTYPE html>,那么它的意义是什么呢?它是html5标准网页声明,全称为Document Type HyperText Mark-up Language,意思为文档种类为超文本标记性语言或超文本链接标示语言,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。表示网页采用html5,<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
    这个标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
    public 这行声明了文档的根元素是 html,它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 
    Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到,浏览器将使用公共标识符后面的URL 作为寻找 DTD 的位置。

    <!DOCTYPE html>的重要性?

    1作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。

    document.compatMode:
    BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
    CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

         这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,

    这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。

         如果你的页面添加了<!DOCTYPE html>那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的

    标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。

    这就是<!DOCTYPE html>的作用。

    2 使用:<!DOCTYPE html>

    2.1 使用也很简单,就是在你的html页面的第一行添加"<!DOCTYPE html>"一行代码就可以了

    2.2 jsp的话,添加在<%@ page %>的下一行。

    2.3 不用区分大小写

    注意:上面这个<!DOCTYPE html> 参考自百度百科,博主月南,ITOYO博主愤怒的coder,感兴趣的朋友可以继续探索。

    2.2<html lang="en">
     原形式是<html language="english">,这句话的作用是告诉搜索引擎爬虫,我们这个网站的内容是关于英语的,en在这里是english,如果要告诉搜索引擎爬虫我们的内容是关于中文的,只要将“en”该为“zh”("中"拼音的前两个字母组合),如果是德语的话,将“en”改为“de”。这里需要注意的是除了“english”的缩写是“en”,其他语言都是汉语拼音的前两个字母组合。

    2.3<meta>系列

    2.3.1<meta charset="utf-8">

    自己写的html文档用浏览器打开是乱码的话,就是这里出现了问题

    这个charset原意是字符集,在这里是编码的意思,后面等于的值是指该文档字体的文字类型,这个编码类型有四类。第一类: gb2312(国家标准第2312条例,可以理解为简体中文)--->gb2312是中文的字符集,对中文支持比较好,但是如果网页使用英文或者其他的外文比如日文韩文,gb2312就不能支持了;第二类: gbk(在gb2312基础上加了繁体字类型);第三类: unicode(万国码),这个类型基本涵盖所有的语言了;第四类: utf-8 (是unicode的升级版本),也是现在公司最常用的编码类型。

    2.3.2<meta content="" name="">

    这个标签有几个类型,是由name值决定的,name值可以为description(描述),keywords(关键词),这两个是最常用的,content的话你可以根据需求来写,这个标签是为了别人输入关键词,能相应的找到对应的网站,比如我想了解一下淘宝网上的羽绒服,当你在淘宝网中输入羽绒服时,相应的会出现各种各样的羽绒服的链接,如果你是一个羽绒服店家,想让你的羽绒服更靠前,(先假设淘宝网每家的羽绒服销量,好评率等等都一样的时候),这样的话你就可以把这两个属性描述的夸张一点。

    比如:

    <meta content="羽绒服" name="keywords">

    <meta content="这个羽绒服是你穿了就不想脱的羽绒服" name="description">

    2.4<title> </title>

    这是一个双标签,是标题的意思,中间是你要写的标题

    2.5<link href="" rel="stylesheet">

    这个标签是为了引入css文件,css文件名称写在href(hypertext reference 超文本引用)里,是为了渲染html文档的

    2.6<body></body>

    这是身体标签,是你要写的网页的内容区,展示给用户看的

    2.7<script src=""></script>

    这是为了引入js文件,文件名称写在src里,是为了给html增加一种动态渲染的功能,为什么要将该标签放在</body>之前,是因为我们在渲染html网页时,浏览器遇到<link href="" rel="stylesheet">会同时(异步加载)渲染html和CSS,而遇到script时,留言器会暂停对html和css代码的加载,这样的话会导致html,css文档还未加载完就已经使用js渲染了页面,使得页面出错

     
    --------------------- 
    作者:前端小白。 
    来源:CSDN 
    原文:https://blog.csdn.net/qq_40860137/article/details/83958992 
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • html5全解析

    千次阅读 2016-02-25 20:12:19
    1、HTML是什么? 全称为HyperText Markup Language,超文本标记语言,非编程语言。...XHTML:功能和HTML差不多,但书写要求比HTML严格。 dhtml:动态页面:js+csss+html=dhtml   2、HTML的基本架构?

    htm是软件开发中非常基础的知识,也是很重要的知识,在web中是很重要的知识点,在此梳理一下主要内容:

    1、HTML是什么?

    全称为HyperText Markup Language,超文本标记语言,非编程语言。

    XHTML:功能和HTML差不多,但书写要求比HTML严格。

    dhtml:动态页面:js+csss+html=dhtml

     

    2、HTML的基本架构?

    以下 HTML Source Code 便是一份 HTML 文件的基本架构 :

    <HTML>
    <HEAD> <TITLE> 网页的标题 </TITLE>
    </HEAD>
    <BODY> 网页的内容,很多标记都作用于此
    </BODY>
    </HTML>

    特点解说:

    • 整份文件处于标记<HTML>与</HTML>之间。
      <HTML>用以声明这是 HTML 文件,让浏览器认出并正确处理此 HTML 文件。

    • 文件分两部分,由<HEAD>至</HEAD>称为开头,<BODY>至</BODY>称本文
      基本上两者各有适用的标记,如<TITLE>只可出现于开头部分。

    • 开头部分用以存载重要资讯,而只有本文部分会被显示。
      所以大部分标记会运用于本文部分。

    • <TITLE>所标示的是文件的标题。
      会出现于浏览器顶部及为别人 Bookmark 时的名称,所以每页有不同而明确的标题 是需要的。

    上述标记中只有<BODY>具参数设定。

    ■ <BODY> 之参数设定:
    例子:

    <BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed">

    • text="#000000"
      用以设定文字颜色。 #000000 代表黑色,亦可以采用颜色的名称,即 text="black" 。

    • link="#0000FF"
      设定一般文字连结颜色。

    • alink="#FF0000"
      设定刚按下时文字连结颜色。

    • vlink="#0000FF"
      设定连结后的颜色。(被按过)。

    • background="bg1.gif"
      设定背景墙纸。GIF 或 JPEG 皆可,可以是绝对途径或相对途径。

    • bgcolor="#FFFFFF"
      设定背景颜色。当己设定背景墙纸时会失去作用,除非墙纸有透明部分。

    • leftmargin=2
      设定整份文件显示画面的方边沿空间,单位为像素。 『只适用于IE』

    • topmargin=2
      设定整份文件显示画面的方边沿空间。 『只适用于IE』

    • bgproperties="fixed"
      固定背景墙纸,当卷动文字时墙纸不会跟著卷动。 『只适用于IE』

    标记及参数之字母大小都可以。  


    3、编写规范

    a、写法

    ·        任何标记皆由"<"及">"所围住,如 <p>

    ·        标记名与小于号之间不能留有空白字符。

    ·        某些标记 要加上参数,某些则不必。如 <font size="+2">Hello</font>

    ·        参数只可加于起始标记中。

    ·        在起始标记之标记名前加上符号"/"便是其终结标记,如 </font>

    ·        标记字母大小写皆可。建议全部小写

     

    b、HTML标记的分类

    b.1围堵标记:<p>aaaa</p>

    b.1空白标记:aaaa<br/>



    4、常用的HTML标记

    排版标记: 

    <!--注解--><!--由这处开始是产品订购表格-->
    <P> ;段落标记:<p align="center"> 
    <BR> ;换行                  
     <HR> ; 水平线     <HR align="LEFT" size="2" width="70%" color="#0000FF" noshade>   
     <CENTER> ;居中标记
     <PRE>预设格式标记
    <DIV>区隔标记。作用:设定字、画、表格等的摆放位置。 
    <NOBR> ;<NOBR>称为不折行标记。作用:令某些文字不因太长而绕行,一 显示于同一行或下一 行。它对住址、数学算式、一行数字、程式码等尤为有用。 
    <WBR> ; <WBR>称为建议折行标记。作用:预设折行部位。

    字体标记: 

    <h1>..<h6>h1最大字体
    <b></b>    <storong></storong> :加粗
    <i></i>  :斜体                <em></em>:定义着重文字
    <u></u>:下划线  <s></s>:中划线、删除线
    <sup>:上标   <sub>:下标
     <font>  :字体大小   <font face="Arial" size="+2" color="#008000">Creation of Webpage</font> 

    图像标记:

    <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif"> 

    清单标记:

    <ol> <ul> <dl><li><dt><dd>

    无序清单:ul    <UL type="square">

    有序清单:ol   <ol type="i" start="4"></ol>

    自定义清单:dl dt dd  

    表格标记:


    <TABLE> <TR> <TD> :
    这三个标记是定义表格的最重要的标记,可以说只学这三个己足够。
    <TABLE>是一个容器标记,意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用,属容器标记的还有其他。
    <TR>用以标示表格列(row)
    <TD>用以标示储存格(cell)

    <TABLE> 的参数设定(常用):
    例如: <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

    • width="400"
      表格宽度,接受绝对值(如 80)及相对值(如 80%)。

    • border="1"
      表格边框厚度,不同浏览器有不同的内定值,故请指明。

    • cellspacing="2"
      表格格线厚度,请看例子三,那是加厚到 5 的格线。

    • cellpadding="2"
      文字与格线的距离,请看例子四,那是加至 10 的 padding。

    • align="CENTER"
      表格的摆放位置(水平),可选值为: left, right, center,请看例子五或六,那表格 是放于中间的,为怕一些浏览器不支援,故特加上居中标记<CENTER>,只是多 层保证而己,当然只用<CENTER>亦可。

    • valign="TOP".
      表格内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom

    • background="myweb.gif"
      表格 纸,与 bgcolor 不要同用。

    • bgcolor="#0000FF"
      表格底色,与 background 不要同用,请看例子六

    • bordercolor="#FF00FF"
      表格边框颜色,NC 与 IE 有不同的效果,请看例子六

    • bordercolorlight="#00FF00"
      表格边框光部分的颜色,请看例子二『只适用于 IE』

    • bordercolordark="#00FFFF"
      表格边框光部分的颜色,请看例子二,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

    • cols="2"
      表格栏位数目,只是让浏览器在下载表格是先画出整个表格而己。

    <TR> 的参数设定(常用):
    例如:<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

    • align="RIGHT"
      该一列内字画等的摆放贴 位置(水平),可选值为: left, center, right

    • valign="MIDDLE"
      该一列内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom

    • bgcolor="#0000FF"
      该一列底色,请看例子五

    • bordercolor="#FF00FF"
      该一列边框颜色,请看例子三『只适用于 IE』

    • bordercolorlight="#808080"
      该一列边框光部分的颜色,请看例子三『只适用于 IE』

    • bordercolordark="#FF0000"
      该一列边框光部分的颜色,请看例子三,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

    <TD> 的参数设定(常用):
    例如:<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">

    • width="48%"
      该一储存格宽度,接受绝对值(如 80)及相对值(如 80%)。

    • height="400"
      该一储存格高度。

    • colspan="5"
      该一储存格向右打通的栏数。请看例子六

    • rowspan="4"
      该一储存格向下打通的列数。请看例子六

    • align="RIGHT"
      该一储存格内字画等的摆放贴 位置(水平),可选值为: left, center, right

    • valign="BOTTOM"
      该一储存格内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom

    • bgcolor="#FF00FF"
      该一储存格底色,请看例子四

    • bordercolor="#808080"
      该一储存格边框颜色,请看例子三『只适用于 IE』

    • bordercolorlight="#FF0000"
      该一储存格边框光部分的颜色,请看例子三『只适用于 IE』

    • bordercolordark="#00FF00"
      该一储存格边框光部分的颜色,请看例子三,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

    • background="myweb.gif"
      该一储存格 纸,与 bgcolor 任用其一。

    例子一:

    原始码 <table width="60%" border="1">
    <tr><td>只有一个储存格(cell)的表格</td></tr>
    </table>
    显示结果

     

    只有一个储存格(cell)的表格

    例子二:

    原始码 <table width="60%" border="5" bordercolorlight="#FF00FF" bordercolordark="#FF0000">
    <tr><td>第一列第一栏</td><td>第一列第二栏</td></tr>
    </table>
    显示结果

     

    第一列第一栏 第一列第二栏

    例子三:

    原始码 <table width="60%" border="1" cellspacing="5">
         <tr bordercolor="#0000FF"> <td>第一列第一栏</td> <td>第一列第二栏</td>
         </tr>
         <tr bordercolorlight="#FF00FF" bordercolordark="#00FF00"> <td>第二列第一栏</td> <td>第二列第二栏</td>
         </tr>
    </table>
    显示结果

     

    第一列第一栏 第一列第二栏
    第二列第一栏 第二列第二栏

    例子四:

    原始码 <table width="60%" border="1" cellpadding="10">
         <tr> <td bgcolor="#FFCCE6">第一列第一栏</td> <td bgcolor="#FFFFC6">第一列第二栏</td>
         </tr>
         <tr> <td bgcolor="#FFD9FF">第二列第一栏</td> <td bgcolor="#DAB4B4">第二列第二栏</td>
         </tr>
    </table>
    显示结果

     

    第一列第一栏 第一列第二栏
    第二列第一栏 第二列第二栏

    例子五:

    原始码 <center>
    <table width="60%" cellspacing="0" cellpadding="2" align="CENTER">
         <tr> <td bgcolor="#FFD2E9">第一列第一栏</td> <td bgcolor="#FFDAB5">第一列第二栏</td> <td bgcolor="#FFFFB5">第一列第三栏</td>
         </tr>
         <tr bgcolor="#C0C0C0"> <td>第二列第一栏</td> <td>第二列第二栏</td> <td>第二列第三栏</td>
         </tr>
    </table>
    </center>
    显示结果

    第一列第一栏 第一列第二栏 第一列第三栏
    第二列第一栏 第二列第二栏 第二列第三栏

    例子六

    原始码 <center>
    <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF">
         <tr> <td>第一列第一栏</td> <td colspan="2">第一列 之 第二栏及第三栏</td>
         </tr>
         <tr> <td rowspan="2">第二列及第三列 之 第一栏</td> <td>第二列第二栏</td> <td>第二列第三栏</td>
         </tr>
         <tr> <td>第三列第二栏</td> <td>第三列第三栏</td>
         </tr>
    </table>
    </center>
    显示结果

    第一列第一栏 第一列 之 第二栏及第三栏
    第二列及第三列 之 第一栏 第二列第二栏 第二列第三栏
    第三列第二栏 第三列第三栏

    <TH> :
    <TH>与<TD>同样是标示一个储存格,唯一不同的是<TH>所标示的储存格中的文字是以粗 体出现,通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以,其参数 设定请参考<TD>。
    当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。

    例子:

    原始码 <center>
    <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
         <tr align="CENTER"> <th>Month</th><th>% of IE visitor</th><th>% of NC visitor</th>
         </tr>
         <tr align="CENTER"> <td>August</td><td>61%</td><td>39%</td>
         </tr>
         <tr align="CENTER"> <td>July</td><td>54%</td><td>46%</td>
         </tr>
         <tr align="CENTER"> <td>June</td><td>52%</td><td>48%</td>
         </tr>
    </table>
    </center>
    显示结果

    Month % of IE visitor % of NC visitor
    August 61% 39%
    July 54% 46%
    June 52% 48%

    <CAPTION> :
    <CAPTION> 的作用是为表格标示一个标题列,有如在表格上方加上一没格线的打通列。 当然亦可置于下方,通常用以存放该表格的标题。

    <CAPTION> 的参数设定(常用):
    例如:<caption align="TOP" valign="TOP"></caption>

    • align="TOP"
      该表格标题列相对于表格的摆放贴 位置(水平),可选值为: left, center, right, top, middle, bottom,若 align="bottom" 的话标题列便会出现对表格的下方,不管你 的原始码中把 <caption> 放在 <table> 中的头部或尾部。

    • valign="TOP"
      该表格标题列相对于表格的摆放位置(上下),可选值为: top, bottom。和 align="TOP" 或 align="BOTTOM" 是一样的,虽然功能重复了,但如果你要标题列 置于下方及向右或向左贴 ,那末两个参数便可一 用了。当只 一个参数时, 请首选 align,因为 valign 是由 HTML 3.0 才开始的参数。

    例子:

    原始码 <center>
    <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
    <caption>网页速成 八月份访客浏览器使用分析</caption>
         <tr align="CENTER"> <th>Month</th> <th>% of IE visitor</th> <th>% of NC visitor</th>
         </tr>
         <tr align="CENTER"> <td>August</td> <td>61%</td> <td>39%</td>
         </tr>
    </table>
    </center>
    显示结果

    网页速成 八月份访客浏览器使用分析
    Month % of IE visitor % of NC visitor
    August 61% 39%




    链接标记:

    <a href="index.html" name="hello" target="_top">                          target的4种属性: _self;_balank;_parent;_top

    框架标记:

    <frameset cols="50%,*">

    <frame name="hello" src="up2u.html"> <frame name="hi" src="me2.html">
    </frameset
    <iframe> 的参数设定如下:
    例子: <iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> 

    多媒体标记:

    <BGSOUND>:
    <BGSOUND> 是用以插入背景音乐,但只适用於 IE,其参数设定不多。如下

    <BGSOUND src="your.mid" autostart=true loop=infinite>

    • src="your.mid"
      设定 midi 档案及路径,可以是相对或绝对。
    • autostart=true
      是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。
    • loop=infinite
      是否自动反覆播放。LOOP=2 表示重复两次,Infinite 表示重复多次。
    <EMBED>:
    <EMBED> 是用以插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU 等等,Netscape 及 新版的 IE 都支援。其参数设定狻多。如下

    <EMBED src="your.mid" autostart="true" loop="true" hidden="true">

    • src="your.mid"
      设定 midi 档案及路径,可以是相对或绝对。
    • autostart=true
      是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。
    • loop="true"
      是否自动反覆播放。LOOP=2 表示重复两次,true 是, false 否。
    • HIDDEN="true"
      是否完全隐藏控制画面,true 为是,no 为否 (内定)。
    • STARTTIME="分:秒"
      设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。
    • VOLUME="0-100"
      设定量的大小,数值是0到100之间。内定则为使用者系统本身之设定。
    • WIDTH="整数" 和 HIGH="整数"
      设定控制画面的宽度和高度。(若 HIDDEN="no")
    • ALIGN="center"
      设定控制画面和旁边文字的对 方式,其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。
    • CONTROLS="smallconsole"
      设定控制画面的外貌。预设值是 console。
      console 一般正常的面板   
      smallconsole 较小的面板   
      playbutton 只显示播放按钮   
      pausecutton 只显示暂停按钮   
      stopbutton 只显示停止按钮   
      volumelever 只显示音量调整钮  

    其他标记:

    <MARQUEE>:
    <MARQUEE> 只适用於 IE ,译为「跑马灯」如 Status Bar 的那种,意指走动或卷动的 文字,其参数设定狻多。我先举些例子,然後再列出各参数。

    例子一:

    原始码 <marquee width=150>I'm a small MARQUEE</marquee>
    显示结果
    I'm a small MARQUEE

    例子二:

    原始码 <marquee behavior=slide>This is a slide effect</marquee>
    显示结果
    This is a slide effect

    例子三:

    原始码 <marquee behavior=alternate>撞来撞去,啊!我昏啦</marquee>
    显示结果
    撞来撞去,啊!我昏啦

    例子四:

    原始码 <marquee scrolldelay=5 scrollamount=50>哗!!太快了,我又昏啦</marquee>
    显示结果
    哗!!太快了,我又昏啦

    <marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>

    • behavior="SCROLL"
      决定文字的卷动方式,可选值为:
      SCROLL 一般卷动,是内定值。
      SLIDE 如幻灯片,一格格的,效果是文字一接触左边便全部消失。
      ALTERNATE 文字向左右两边撞来撞去。

    • direction="LEFT"
      设定文字的卷动方向,LEFT 表示向左,是内定值,RIGHT 表示向右。

    • bgcolor="#0000FF"
      设定文字卷动范围的背景颜色。

    • height="30" width="150"
      >设定文字卷动范围,可采用相对或绝对,如 30% 或 30 等,单位为像素。

    • hspace="0" vspace="0"
      设定文字的水平及垂直空白位置。

    • loop="INFINITE"
      设定文字卷动次数,其值可以是正整数或 INFINITE,INFINITE 是内定值,表示无 限次。

    • scrollamount="30"
      每「格」文字之间的间隔,单位是像素。

    • scrolldelay="500"
      文字卷动的停顿时间,单位是毫秒。
    <BLINK> 是令文字闪烁,只适用於 NC,用法直接,没有参数。看看例子便知:

    例子:

    原始码 <blink>我是天上星,闪又闪</blink>
    显示结果
    我是天上星,闪又闪

    <ISINDEX> 可让某些 Web Server 找寻网页内的关键字,假如你的 Web Server 提供这样的 找寻功能,使用者的浏览器也支援这些找寻功能,那堋,载入网页时就会看到一个简单的 找寻方块。其用法直接,没有参数,本来是要放於 <HEAD> 标记内的,但把它放在 <BODY> 标记内亦不见有问题,请记住,3W 以反对此标记。

    例子:

    原始码 <isindex>
    显示结果

    可以搜索该索引。请键入要搜索的关键字:

    <META> 是放於 <HEAD> 与 </HEAD>之间的标记,功用与变化等对,所以我公式化地介 绍。
    • <meta name="Description" content="This is Chris's Home Page">
      该网页的描述,作用於寻找引擎的登录

    • <meta name="Keywords" content="Chris, Web, Music, photo">
      该网页的关键字,作用於寻找引擎的登录

    • <meta http-equiv="Expires" content="Tue, 09 Dec 1997 00:00:00 GMT">
      <meta http-equiv="Pragma" content="no-cache">
      以上行功能相同,都是要浏览器重新载入该页,不要使用快取档案,当然可以修 改该 Expire 时间。

    • <meta http-equiv="Content-Type" content="text/html; charset=big5">
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      设定这是 HTML 文件及其编码语系,中文网页请使用 big5 那行,或者不设编码亦 可,纯英文网页建议使用 iso-8859-1。

    • <meta name="GENERATOR" content="Mozilla/4.04 [en] (Win95; I) [Netscape]">
      <meta name="GENERATOR" content="Microsoft FrontPage 3.0">
      这只表示该网页由甚堋编辑器写成。

    • <meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">
      这一行较为实用,能於预定秒数内自动转到指定的网址。原始码中 10 表示 10秒。
    <LINK> 用来将目前文件与其它 URL 作连结,但不会有连结按钮,用於 <HEAD> 标记间, 格式如下:
    <link href="URL" rel="relationship">
    <link href="URL" rev="relationship">

    其用法我们会於 Style Sheet 一节详细介绍。 


    特殊字符 

    只要你认识了 HTML 标记,你便会知道特殊字符的用处。
    HTML 原始码 显示结果 描述
    &lt; < 小於号或显示标记
    &gt; > 大於号或显示标记
    &amp; & 可用於显示其它特殊字符
    &quot; " 引号
    &reg; ? 己注册
    &copy; ? 版权
    &trade; ? 商标
    &ensp;   半方大的空白
    &emsp;   全方大的空白
    &nbsp;   不断行的空白

    5、调色原理

    • 以命名方式定义常用的颜色,如 RED
    • 以 RGB 值表示,如 #FF0000 表示 red。

    命名方式涵括的色种不多亦不甚方便,较少采用,以下介绍 RGB 值的原理:

    众所皆知颜色是由 "red" "green" "blue" 三原色组合而成的,在 HTML 中对於彩度的定义是 采十六进位的,对於三原色 HTML 分别给予两个十六进位去定义,也就是每个原色可有 256 种彩度,故此三原色可混合成一千六佰多万的颜色。

    例如
    白色的组成是 red=ff, green=ff, blue=ff, RGB 值即为 ffffff
    红色的组成是 red=ff, green=00, blue=00, RGB 值即为 ff0000
    绿色的组成是 red=00, green=ff, blue=00, RGB 值即为 00ff00
    蓝色的组成是 red=00, green=00, blue=ff, RGB 值即为 0000ff
    黑色的组成是 red=00, green=00, blue=00, RGB 值即为 000000

    於应用时常在每个 RGB 值之前加上符号 # 以示分别,但不加亦可。

    ■ HTML 基本架构:
    选按不同颜色按键以测试前景颜色效果 (只适合 Internet Explorer)             选按不同颜色按键以测试背景颜色效果            
    或输入一个 RGB 颜色码或名称
       
    ■ 16 常用颜色表:
    Color Value Name   Color Value Name
      #00FFFF aqua     #808080 gray
      #000080 navy     #C0C0C0 silver
      #000000 black     #008000 green
      #808000 olive     #008080 teal
      #0000FF blue     #00FF00 lime
      #800080 purple     #FFFF00 yellow
      #FF00FF fuchsia     #800000 maroon
      #FF0000 red     #FFFFFF white
    ■ 其它常用颜色表:
    Color Value Name   Color Value Name
      #F0F8FF aliceblue     #A00000 antiquewith
      #7FFFD4 aquamarine     #F0FFFF azure
      #F5F5DC beige     #FFE4C4 bisque
      #000000 black     #FFEBCD blanchedalmond
      #0000FF blue     #8A2BE2 blueviolet
      #A52A2A brown     #DEB887 burlywood
      #5F9EA0 cadetblue     #7FFF00 chartreuse
      #D2691E chocolate     #FF7F50 coral
      #C0F000 cornfloewrblue     #FFF8DC cornsilk
      #00FFFF cyan     #00008B darkblue
      #008B8B darkcyan     #B8860B darkgoldenrod
      #A9A9A9 darkgray     #006400 darkgreen
      #DA0000 darkhaki     #8B008B darkmagenta
      #556B2F darkolivegreen     #DA000E darkorenge
      #9932CC darkorchid     #8B0000 darkred
      #E9967A darksalmon     #8FBC8F darkseagreen
      #483D8B darkslateblue     #2F4F4F darkslategray
      #00CED1 darkturquoise     #9400D3 darkviolet
      #FF1493 deeppink     #00BFFF deepskyblue
      #696969 dimgray     #1E90FF dodgerblue
      #B22222 firebrick     #FFFAF0 floralwhite
      #228B22 forestgreen     #DCDCDC gainsboro
      #00000E gostwhite     #FFD700 gold
      #00E00D golenrod     #808080 gray
      #008000 green     #ADFF2F greenyellow
      #F0FFF0 honeydew     #FF69B4 hotpink
      #CD5C5C indianred     #FFFFF0 ivory
      #F0E68C khaki     #E6E6FA lavender
      #FFF0F5 lavenderblush     #7CFC00 lawngreen
      #FFFACD lemonchiffon     #ADD8E6 lightblue
      #F08080 lightcoral     #E0FFFF lightcyan
      #0000E0 lightgodenrod     #0000E0 lightgodenrodyellow
      #0000A0 lightgray     #90EE90 lightgreen
      #FFB6C1 lightpink     #FFA07A lightsalmon
      #20B2AA lightseagreen     #87CEFA lightskyblue
      #0000EB lightslateblue     #778899 lightslategray
      #B0C4DE lightsteelblue     #FFFFE0 lightyellow
      #32CD32 limegreen     #FAF0E6 linen
      #FF00FF magenta     #800000 maroon
      #66CDAA mediumaquamarine     #0000CD mediumblue
      #BA55D3 mediumorchid     #ED0000 mediumpurpul
      #3CB371 mediumseagreen     #7B68EE mediumslateblue
      #00FA9A mediumspringgreen     #48D1CC mediumturquoise
      #C71585 mediumvioletred     #191970 midnightblue
      #F5FFFA mintcream     #FFE4E1 mistyrose
      #FFE4B5 moccasin     #FFDEAD navajowhite
      #000080 navy     #A0B0E0 navyblue
      #FDF5E6 oldlace     #6B8E23 olivedrab
      #FFA500 orange     #0E0EED orengered
      #DA70D6 orchid     #A00D00 palegodenrod
      #98FB98 palegreen     #AFEEEE paleturquoise
      #DB7093 palevioletred     #FFEFD5 papayawhip
      #FFDAB9 peachpuff     #CD853F peru
      #FFC0CB pink     #DDA0DD plum
      #B0E0E6 powderblue     #800080 purple
      #FF0000 red     #BC8F8F rosybrown
      #4169E1 royalblue     #8B4513 saddlebrown
      #FA8072 salmon     #F4A460 sandybrown
      #2E8B57 seagreen     #FFF5EE seashell
      #A0522D sienna     #87CEEB skyblue
      #6A5ACD slateblue     #708090 slategray
      #FFFAFA snow     #00FF7F springgreen
      #4682B4 steelblue     #D2B48C tan
      #D8BFD8 thistle     #FF6347 tomato
      #40E0D0 turquoise     #EE82EE violet
      #00E0ED violetred     #F5DEB3 wheat
      #000E00 hite     #F5F5F5 whitesmoke
      #FFFF00 yellow     #9ACD32 yellowgreen


    展开全文
  • HTML文档(网页)解析

    2020-10-22 19:12:24
    这一行不是标签,是HTML的文档声明,告诉浏览器文件的类型,让浏览器解析器知道按哪个规范来解析文档。此处是HTML5的声明。
  • Android 使用Jsoup解析HTML

    千次阅读 2017-11-18 12:14:14
    安装as用户可直接依赖implementation org.jsoup:jsoup:1.11.1其他用户请看 https://jsoup.org/download使用下面的html来自干货集中营,就先以这个为例:获取Document对象Document对象可以看成一个一个HTML文档。...
  • 使用JSoup解析HTML文件

    2014-09-24 12:02:18
    不过如果你需要自己在Java程序中解析HTML文档并查找某些元素,标签,属性或者检查某个特定的元素是否存在的话,那又该如何呢?如果你已经使用Java编程多年了,我相信你肯定试过去解析XML,也使用过...
  • 常见HTML头部标签解析

    2020-07-09 23:17:20
    作为一名 Web 开发者,对头部标签必须要了解,本篇着重介绍一些我们容易忽视...DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。 ...
  • Jmeter的Html报告汉化及解析

    万次阅读 多人点赞 2019-09-12 13:32:04
    经常有人提出Jmeter生成的html报告都是英文的看不懂,能不能给解释一下,一般提出这种问题的人要么是懒,要么是对性能测试不是很了解(隔行如隔山嘛,可以理解)。所以我专门整理了Jmeter报告的汉化模板,有兴趣的...
  • Java解析HTML之HTMLParser使用与详解

    千次阅读 2016-12-06 17:21:59
    HTMLParser具有小巧,快速的优点,缺点是相关文档比较少(英文的也少),很多功能需要自己摸索。对于初学者还是要费一些功夫的,而一旦上手以后,会发现HTMLParser的结构设计很巧妙,非常实用,基本你的各种需求都...
  • html的基本语法解析

    2019-03-11 09:53:35
    html的基本语法: &...--网页的标题 --&amp;gt; 这就是html的基本语法解释!!! **引用css样式表的三种方法:** 1.行内式: &amp;lt;标签名 style=&quot;属性名:属性值
  • 在.NET技术下,解析html工具也很多,比如htmlparser或者MSHTML,虽然htmlparser虽上手容易,但解析速度较慢。那么,有没有更简单的方式呢?回答是肯定的,那就是利用Html Agility Pack工具来进行解析,该工具不仅...
  • 1.浏览器加载和渲染html的顺序 1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素...
  • HTML5 第1阶段第1周周考试题与解析

    万次阅读 2020-10-16 22:30:54
    HTML5 第1阶段第1周周考 答题限时:60分钟 满分:100分 合格分数:60分 ...解析:文件扩展名为 .css 2.在HTML中引入css内部样式表使用 A style B p C link D strong 正确答案: A 解析:内部样式表的语法 <style type="tex
  • HTML基础标签属性详细解析

    千次阅读 2011-03-12 19:49:00
      <br />网页第一章这个是在标签括其来的,里面的主要属性有: http-equiv="Content-Type" content="text/html" charset="编码语种" 编码语种已知的有三种:简体... 纯英文网页为 iso
  • 页面数据解析

    2020-05-20 17:37:46
    页面数据解析一、数据的结构1. 结构化数据2. 半结构化数据3. 非结构化数据4. 应用场景二、HTML1. HTML的理解2. HTML的骨架结构3. HTML标签关系三、CSS选择器选择器1. 标签选择器2. 类选择器3. ID选择器4. 组合选择器...
  • android中jsoup解析html的几个例子

    千次阅读 2016-08-22 23:28:07
    获取news.cqu.edu.cn中class为topnews 的新闻标题。 Java代码  package  huxiaoan.cqu.praseHtml;    import  org.jsoup.Jsoup;  import  org.jsoup.nodes.Document;  ...
  • HTML标签简介---实例解析 [打印版]

    千次阅读 2009-04-24 18:54:00
    静态结构标题..........文件内容..........1. 文件标题..........2. 文件更新--2.i 10秒后自动更新一次2.ii 10秒後自动连结到另一文件;URL=欲连结文件之URL">3. 查询用表单-- 若欲设定查
  • DNS解析与CDN加速

    千次阅读 2019-03-12 23:21:26
    DNS解析与CDN加速1.DNS解析1.1 域名系统DNS1.2 DNS解析二、几个概念1.CDN架构2.静态加速3.动态加速三、CDN加速1.CDN架构2.静态加速3.动态加速四、http中的Nocache与no1.CDN架构2.静态加速3.动态加速欢迎使用Markdown...
  • 主页: http://htmlparser.sourceforge.net/ HtmlParser初步研究 by lostfire这两天准备做一些网站编程的工作,于是对HtmlParse... 一,数据组织分析:HtmlParser主要靠Node、AbstractNode和Tag来表达Html,因
  • Eva 剧情解析

    千次阅读 2019-09-26 10:22:59
    Eva 剧情解析 来源https://zhuanlan.zhihu.com/p/20864898 【0.写在前面的话】 相信和我年龄差不多的小伙伴们对《新世纪福音战士》( 《Neon Genesis Evangelion》,以下简称《EVA》 )一定不陌生,...
  • sed 命令全解析

    千次阅读 2012-10-29 20:11:23
    sed 命令全解析  SED单行脚本快速参考(Unix 流编辑器) 2005年12...英文标题:USEFUL ONE-LINE SCRIPTS FOR SED (Unix stream editor) 原标题:HANDY ONE-LINERS FOR SED (Unix stream editor) 整理:Eric
  • python爬虫智能解析库详解

    千次阅读 2019-11-24 15:45:43
    然而做过爬虫的人都知道,解析是个麻烦事。比如一篇新闻吧,链接是这个: https://news.ifeng.com/c/7kQcQG2peWU,页面预览图如下: 我们需要从页面中提取出标题、发布人、发布时间、发布内容、图片等内容。一般情况...
  • 使用标记标签来描述网页,告诉浏览器如何解析HTML文件。tips:超文本与普通文本的区别:普通的文本:纯字符超文本:图片、链接、音视频...二、HTML的特点浏览器会按照从上往下的顺序解析文件对于语法错误不会打印...
  • python 爬虫智能化解析

    千次阅读 2019-07-19 10:43:19
    然而做过爬虫的人都知道,解析是个麻烦事。 比如一篇新闻吧,链接是这个:https://news.ifeng.com/c/7kQcQG2peWU,页面预览图如下: 我们需要从页面中提取出标题、发布人、发布时间、发布内容、图片等内容。一般...
  • Webpack HMR 原理解析

    千次阅读 2019-05-21 15:22:40
    Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码...例如,在开发 Web 页面过程中,当你点击按钮,出现一个弹窗的时候,发现弹窗标题没有对齐,这时候你修改 CS...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,946
精华内容 8,778
关键字:

解析html英文标题