郑州网站建设公司电话多少,有好的网站推荐一下吗,做网站怎么购买主机,常用的h5制作工具有哪些HTML 列表
HTML列表
HTML 无序列表
ul 元素表示无序列表。
ul 元素中的项目使用 li 元素表示。
元素没有在HTML5中定义任何属性#xff0c;并且您使用CSS控制列表的显示。
HTML5中的 type 和 compact 属性已过时。
您可以在以下代码中查看正在使用的 ul 元素。
!D…HTML 列表
HTML列表
HTML 无序列表
ul 元素表示无序列表。
ul 元素中的项目使用 li 元素表示。
元素没有在HTML5中定义任何属性并且您使用CSS控制列表的显示。
HTML5中的 type 和 compact 属性已过时。
您可以在以下代码中查看正在使用的 ul 元素。
!DOCTYPE HTML
html
bodyI like:ulliHTML/liliCSS/liliJavascript/li/ul
/body
/html
每个列表项都显示一个项目符号。您可以通过 list-style-typeCSS属性来控制要使用哪个样式项目符号。
例2
以下代码显示了如何创建嵌套列表。 !DOCTYPE HTML
html
bodyulliHTML/liliCSSulliIntrodunction/liliCSS attributes/li/ul/liliJavascript/li/ul
/body
/html HTML 有序列表
ol 元素表示有序列表。列表中的项目使用 li 元素表示。
已在HTML5中添加reversed属性。 compact 属性现在在HTML5中已过时。
以下代码显示了用于创建简单有序列表的 ol 元素。
!DOCTYPE HTML
html
bodyI like:olliHTML/liliCSS/liliXML/li/ol
/body
/html
属性
您可以使用 ol 元素定义的属性来控制列表中的项目。
start 属性定义列表中第一个项目的序数值。如果未定义此属性则为第一个项目分配序号值1。
您可以使用 type 属性来指示每个项目旁边应显示哪个标记。
下表显示此属性支持的值。
值描述例子1小数(默认)1., 2., 3., 4.a小写拉丁字母a., b., c., d.A大写拉丁字母A., B., C., D.i小写罗马数字i., ii., iii., iv.I大写罗马数字I., II., III., IV.
例3
以下代码显示了如何创建嵌套排序列表。
html
body
pHere is a nested ordered list:/polliItem one/liliItem two/liliItem three/liliItem fourolliItem 4.1/liliItem 4.2/liliItem 4.3/li/ol/liliItem Five/li
/ol/body
/html
例4
以下代码显示如何使用大写字母并从点4开始创建有序列表。 html
bodypHere is an ordered list using capital letters and starting at point 4, which is a letter D:/pol typeA start4liPoint number one/liliPoint number two/liliPoint number three/li
/ol
/body
/html
HTML 自定义列表
描述列表由一组术语/描述分组组成。
您使用三个元素来定义描述列表: dl dt 和 dd 元素。
dl 表示描述列表。dt 表示描述列表中的术语。dd 表示描述列表中的定义。
多个 dd 元素可用于单个 dt 元素这允许您为单个术语提供多个定义。
以下代码创建说明列表。
!DOCTYPE HTML
html
bodyI like:dldtCSS/dtddCascading Style Sheets/ddddia style sheet language used fordescribing the look and formattingof a document written in a markup language/i/dddtHTML/dtddThe mark language/dddtJavascript/dtddThe coding logic/dd/dl
/body
/html
HTML figure
HTML figure
figure 和 figcaption 元素
figure标签规定独立的流内容图像、图表、照片、代码等等。
figure元素的内容应该与主内容相关同时元素的位置相对于主内容是独立的。如果被删除则不应对文档流产生影响。 figcaption元素被用来为figure元素定义标题。
例子
你可以在下面的代码中看到一起使用的 figure 和 figcaption 元素。 !DOCTYPE HTML
html
bodyI like XML and CSS.figurefigcaptionListing 01. Using the code element/figcaptioncodevar fruits [CSS, HTML, CSS, Javascript];brdocument.writeln(I like fruits.length fruits);/code/figure
/body
/html上面的代码渲染如下: HTML 图像
HTML图像
img 元素允许您将图像嵌入到HTML文档中。
它有局部属性: srcaltheightwidthusemapismap 。
HTML5中的borderlongdescnamealignhspace 和 vspace 属性已过时。
要嵌入图像您需要使用 src 和 alt 属性如下所示。
!DOCTYPE HTML
html
bodyimg srchttp://www.www.w3cschool.cn/style/download.png altTriathlon Image width200 height67 /
/body
/html
src 属性指定图像的URL。
如果无法显示图片则 alt 属性定义内容。
width 和 height 属性设置图像大小(以像素为单位)。 图像链接
img 元素的常见用途是结合 a 元素创建基于图像的超链接。
以下代码显示了如何使用 img 和 a 元素。
!DOCTYPE HTML
html
bodypa href//www.w3cschool.cn/page.htmlimg ismap srchttp://www.www.w3cschool.cn/style/download.png//a/p
/body
/html
如果将 ismap 属性应用于 img 元素则可以创建服务器端图像映射这意味着您在图像上单击的位置将附加到URL。
例如如果您从图像的顶部点击了4个像素从左边缘点击了10个像素浏览器将导航到以下内容
//www.w3cschool.cn/page.html?10,4 客户端图像映射
您可以创建客户端图像映射单击图像中的不同区域会导致浏览器导航到不同的URL。
客户端图像映射的关键元素是 map 与局部属性 name 。
如果使用 id 属性它必须具有与 name 属性相同的值。
map 元素可以有一个或多个 area 元素。
每个区域元素标记图像中可以点击的区域。
area 元素具有局部属性: althreftargetrelmediahreflangtypeshapecoords 。
relmedia和hreflang属性是HTML5中的新特性。nohref属性现在已过时。
href - 点击区域时浏览器应加载的网址alt - 替代内容。请参阅img元素上的相应属性。target - 应显示网址的浏览内容。rel - 描述当前文档和目标文档之间的关系。media - 区域有效的介质。hreflang - 目标文档的语言。type - 目标文档的MIME类型。
shape 和 coords 属性一起工作。 coords 属性取决于 shape 属性的值。
rect 该值表示矩形区域。 coords属性必须由四个逗号分隔的整数组成表示与以下内容的距离 图像左边缘到矩形左边图像顶边到矩形顶边图像左边缘到矩形右边图像顶边到矩形底边circle 该值表示圆形区域。 coords属性必须由三个逗号分隔的整数组成表示以下内容 从图像左边缘到圆心的距离从图像顶边缘到圆心的距离圆的半径poly 此值表示多边形。 coords属性必须至少为六个逗号分隔的整数每对表示多边形上的一个点。default 此值是默认区域覆盖整个图像的其余部分。 将此值用于shape属性时不需要坐标值。
以下代码显示如何使用图像映射。
!DOCTYPE HTML
html
bodypimg srchttp://www.www.w3cschool.cn/style/download.png usemap#mymap//pmap namemymaparea hrefa.html shaperect coords3,5,68,62 alttest a /area hrefb.html shaperect coords70,5,130,62 alttest b /area hrefc.html shapedefault alttest c //map
/body
/html
img 元素上的 usemap 属性将map元素与图像相关联。
HTML iframe
HTML iframe
iframe 元素在现有元素中嵌入另一个HTML文档。
它有局部属性: srcsrcdocnamewidthheightsandboxseamless 。
HTML5中的 sandbox 和seamless属性是新增的。
longdescalignallowtransparencyframebordermarginheightmarginwidth 和scrolling属性已过时。
以下代码显示如何使用iframe元素。
!DOCTYPE HTML
html
bodya hrefhttp://www.w3cschool.cn targetmyframeTutorial/aiframe namemyframe width300 height300 /iframe
/body
/html
注意
将创建名称属性值为 myframe 的 iframe 。这将创建一个名为 myframe 的浏览上下文。
然后这个浏览上下文在其他元素的目标属性中使用 - 特别是aformbuttoninput和base。
a 元素来创建一对超链接这些超链接会将其href属性中指定的网址加载到iframe中。
width和height属性指定大小(以像素为单位)。src属性指定应最初加载并显示在iframe中的网址。
srcdoc属性允许您定义一个内嵌显示的HTML文档。
seamless属性设置浏览器显示iframe如同它们是主HTML文档的组成部分。
否则默认情况下会应用边框如果内容大于width和height属性则会出现滚动条。 iframe sandbox
sandbox 属性对HTML文档应用限制。当应用没有值的属性时如下所示
...
iframe sandbox namemyframe width300 height100
/iframe
...以下是禁用:
scriptsformsplugins定位其他浏览上下文的链接
您可以通过为sandbox属性定义值来启用各个功能如下所示
...
iframe sandboxallow-forms namemyframe width300 height100
/iframe
...可以使用的值的集合在下面的列表中描述。
allow-forms - 启用表单allow-scripts - 启用脚本allow-top-navigation - 允许定位到顶级浏览上下文的链接这样可以将整个文档替换为另一个文档也可以创建新的标签页或窗口allow-same-origin - 允许将iframe中的内容视为来自与文档其余部分相同的位置
