网页课程内容回顾（HTML）

今天和大家分享我这段时间以来学习html的总结，以此来巩固，也希望对初学者能有所帮助。

开发工具：Sublime Text2或HBuilder

首先学习的当然是html的标签语言，其实w3cschool中都有。

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词<meta charset="UIF-8"><meta name="keyword" content="html5,css3"><meta name="author" content="whqet"><meta name="generater" content="sublime taxt2">

<title> 网页标题<title>Document</title>

<pre class="html" name="code">使用css的几种方式1.行内方式，使用标签的style属性      2.页内方式，使用style标签的方式      3.页外方式，使用link标签链接外部css        一般不建议使用行内方式，不利用后期的维护（优先级比较高）                                                                                 尽量少使用页内方式，不利于后期的整站维护（比较直观很多实验的时候会用）

<style> 指定标签的行内样式，页面内部的css<style>p{font-size: 12px; 字体大小font-weight:bold; 字体变粗font-style:italic; 字体变斜color:red; 字体颜色text-indent: 2em; 首行缩进line-height: 1.5em; 行高}</style>

<link> 链接外部的css<link rel="stylesheet" herf="css.css">

<script>脚本，页内的脚本，链接外部的js<script>var a="hello world";alert(a);</script><script src="1.js"></script><script type="text/javascript"></script>document.write("<h1>Hello World!</h1>")</script>

<body> 显示网页里面的内容<body>网页内容</body>

ol, ordered List (数字) 定义有序列表
ul, unordered List (小圆点) 定义无序列表                                                                                           li, list item<ol style="list-style-type:lower-alpha"> a,b,c<ul style="list-style-type:square"> 小方块ol:decimal 1阿拉伯数字(默认)lower-alpha a英文小写upper-alpha A英文大写lower-roman i罗马小写数字upper-roman I罗马大写数字ul:disc 实心圆(默认)circle 空心圆square 实心正方形none 不显示任何标记

普通链接普通链接最重要的两个属性，href指定链接地址，target指定方式打开<a href="<a target=_blank href="http://www.baidu.com">http://www.baidu.com</a>" target="-blank">百度一下</a><a href="<a target=_blank href="http://www.w3cschool.com.cn/">http://www.w3cschool.com.cn/</a>" target="-blank">使用w3cschool学习网页</a>邮件链接邮件链接可以调用本地的邮件客户端发送邮件，用的不多(现在一般用网页方式发送邮件)<a href="<a target=_blank href="mailto:whqet@qq.com?subject=Hello%20again">mailto:whqet@qq.com?subject=Hello%20again</a>">给庆哥发个邮件</a>页内链接，创建一个在网页内部的导航步骤：1、创建目标     <a name="abc"> </a>2、跳转到该页   <a href="#abc"> </a>菜单架构我们经常使用ul、li、a的方式事件菜单<ul><li><a href="#abc">ASP</a></li><li><a href="#abc">PHP</a></li><li><a href="#abc">JSP</a></li><li><a href="#abc">DELPHI</a></li><li><a href="#abc">VS</a></li><li><a href="#abc">AJAX</a></li><li><a href="#abc">JQUERY</a></li></ul>

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。<figure><figcaption>图像标题</figcaption><img src="abcd.jpg" width="350" height="234" alt="" usemap="#abc"></figure>使用<map>标签定义地图，<map里>面使用<area>标签定义热区area里面的shapeshape="circle" coords="x,y,r"区域为圆形 圆心坐标和半径shape="polygon" coords="x1,y1,x2,y2,x3,y3,..."区域为多边形  多边形所有顶点的坐标shape="rectangle" coords="x1,y1,x2,y2"区域为矩形  矩形的左上右下两点的坐标

热区链接
在<img>标签里面使用<usemap>属性调用<map><map name="#abc"><area shape="circle" coords="95,115,80" href="<a target=_blank href="http://www.baidu.com">http://www.baidu.com</a>" alt=""><area shape="polygon" coords="183,110,200,110,200,90,213,90,217,110,237,110" href="<a target=_blank href="http://www.csdn.net">http://www.csdn.net</a>" alt=""><area shape="rectangle" coords="502,48,613,185" href="<a target=_blank href="http://www.sohu.com">http://www.sohu.com</a>" alt=""></map>

<table>标签定义HTML表格简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。tr元素定义表格行，th元素定义表头，td元素定义表格单元。更复杂的HTML表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。col，  column     列，栏目，通常表示一个列row，  row        行，通常表示一个行span              跨度span       标签，行内的容器colspan    td的属性，该td跨列数cell              细胞，单间，单元格space             空格spacing           空间，间隔cellspacing 单元格间隔padding           填充cellpadding 单元格的内填充<table border="1"><caption>信息表</caption><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>张三</td><td>男</td><td>30</td></tr> <tr><td>李四</td><td>男</td><td>45</td></tr><tr><td>李倩</td><td>女</td><td>18</td></tr><tr><td colspan="3">有些属实，有些瞎编</td></tr></table>

设置表格的背景颜色                                                                                                                  <style>tr:nth-child(1){background-color: rgba(200,0,0,.1)}tr:nth-child(2){background-color: rgba(200,0,0,.2)}tr:nth-child(3){background-color: rgba(200,0,0,.3)}tr:nth-child(4){background-color: rgba(200,0,0,.4)}tr:nth-child(5){background-color: rgba(200,0,0,.5)}                                                                                                                                   /*tr:nth-child(3n){background-color: rgba(200,0,0,.1)}tr:nth-child(3n+1){background-color: rgba(200,0,0,.2)}tr:nth-child(3n+2){background-color: rgba(200,0,0,.3)}*/</style>

网页课程内容回顾（HTML）相关推荐

Python课程内容回顾
Python课程内容回顾今天Python实训课主要讲了爬虫的相关操作,主要是爬取百度小说西游记的内容和爬取网易云热歌排行榜的音乐: 爬取百度小说西游记 # -*- codeing = utf-8 - ...
JavaScript内容回顾第十天
内容回顾一. 常见的事件 1.1. 鼠标事件 1.1.1. 常见的事件 click 当用户点击某个对象时调用的事件句柄. contextmenu 在用户点击鼠标右键打开上下文菜单时触发 dblcli ...
HTML5+CSS期末大作业：运动体育网站设计主题——体育铅球(5页)带注册期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
HTML5期末大作业：中国传统节日网页设计——端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载...
HTML5期末大作业:中国传统节日网站设计--端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
车载微信助手，网页微信开发回顾
车载微信助手,网页微信开发回顾车载微信助手设计开发,中间夹杂着一些其他的项目,前前后后也有大半年的时间了.总算出了一个比较稳定的版本. 这条路上的坑也猜的差不多了,分享一点老司机的经验. 现在讲讲设 ...
HTML5期末大作业：动漫网站设计——迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成
HTML5期末大作业:动漫网站设计--迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成临近期末, 你还在为 ...
网页课程设计-期末大作业-简单设计【原神狂喜】
网页课程设计-期末大作业[原神狂喜] 课程设计-涵盖内容代码部分登录页 1.index.html 2.index.css 博客首页 1.home.html 2.banner.css 公共样式 3. ...
HTML网页设计期末课程大作业：汽车网页——宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载
HTML网页设计期末课程大作业 :汽车网页--宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
HTML5期末大作业：运动系列——NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码学生网页课程设计期末作业下载大学生网页设计制作成
HTML5期末大作业:运动系列--NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码学生网页课程设计期末作业下载大学生网页设计制作成临近期末 ...

网页课程内容回顾（HTML）

网页课程内容回顾（HTML）相关推荐

最新文章

热门文章