• 技术文章 >web前端 >html教程

    分享一个HTML的学习之路

    零下一度零下一度2017-06-24 13:23:22原创890

    开发网站流程

    HTML注释

    <!——注释内容——>

    注意：注释只是为了以后维护用。

    项目符号

    <ul><li>内容</li>　　<li>内容</li>　　<li>内容</li></ul>

    <ul>或<li>的常用属性

    l Type：项目符号的类型，取值：disc（小黑点）、circle（圆圈）、square（实心方块）

    HTML编号列表（有序）

    <ol> <li>内容</li> <li>内容</li> <li>内容</li></ol>

    <ol>或<li>的常用属性

    滚动字幕标记（已被淘汰）

    <marquee> 内容…..  

</marquee>

    常用属性

    图片标记

    语法格式：<img 属性=“值”>

    常用属性：

    超级链接

    语法格式：<a 属性=“值”>内容</a>

    常用属性：

    Html颜色表示

    表示方法三种：

    颜色单词：blue、green、red、yellow。

    10进制表示：rgb（255，0，0）

    16进制表示#FF0000（红）、#00FF00（绿）、#0000FF(蓝)

    锚点链接

    <meta>标记

    作用：提供网页的元信息。指定网页的搜索关键词。

    <meta>标记有两个属性：http-equiv和name

    1、 http-equiv属性

    2、 name属性

    设置网页的搜索关键词、版权信息、作者等。

    （1） 设置网页搜索关键词

    <meta name=”keywords” content=”网站建设，企业网站建设，网站制作，网上商城”/>

    （2） 设置网页描述信息

    <meta name=”description” content=”飞虎是否健康空间给你那个你的手机功能即可给你个开朗少女攻坚克难暖色开发功能”>

    Xhtml规范

    DTD文档类型定义

    三大类型：

    表格标签

    （1）结构：(一行四列)

    <table border=“1”>   <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><&nbsp;/td>   </tr></table>

    （2）border属性：

    （3） tr属性：

    bgcolor

    align

    height：水平：left、center、right

    valign：垂直：top、middle、bpttom

    （4） td属性：

    表单

    （1）结构：

    　　<form name=”form1” method=“get” action=“login.php”>   用户名：<input type=”text” name=”username”/>   密码：<input type=”password” name=”userpwd”/>   <input type=”submit” value=”提交表单”/></form>

    （2）<form>标记属性----块元素

    （3）get和post方法

    Get提交方式：将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。不安全

    如果某个表单元素，不想往服务器传递数据，那么，name可以不用写。

    POST提交方式：POST提交的数据相对安全，可以提交海量数据，可以上传附件。

    单行文本域

    语法格式：<input type=”text” 属性=“值”>

    属性：

    单行密码域

    语法格式：<input type=”password” name=”userpwd”>

    属性：

    单选按钮

    语法格式:<input type=”radio” name=”sex” value=“男”/>男

    <input type=”radio” name=”sex” value=“女”/>女

    属性：

    复选框

    语法格式：<input type=”checkbox” name=”like” value=”游戏”/> 游戏

    <input type=”checkbox” name=”like” value=”杀人”/> 杀人

    <input type=”checkbox” name=”like” value=”放火”/> 放火

    属性：

    下拉列表

    语法格式：

    <select name=””> <option value=”北京”>北京</option> <option value=”天津”>天津</option> <option value=”重庆”>重庆</option></select>

    文本区域

    语法格式：<textarea name=”名称” cols=“宽度” rows=“高度”></textarea>

    属性：

    各种按钮

    上传文件域

    语法格式：<input type=”file” 属性=“属性”/>

    属性：

    隐藏域

    功能：看不见的框。传递一些值，而又不想让别人看到。主要用于php后台。如id号。

    语法格式：<input type=”hidden” name=”id” value=”1263”>

    <caption>表格标题

    语法格式：<caption></caption>

    <caption>是<table>的子标记。<caption>放在<table>的后面。

    网页多媒体

    网页视频一般是flash格式，flash比较小、兼容性好，适合网站播放。

    图片热点

    图片热点：给一张图片加多个热点。

    语法结构：

    <ing src=”inmages/01.jpg” usemap=”#Map”/><map id=”Map”><area shap=”热区形状” cords=”热区坐标”  href=”链接地址” /><area shap=”热区形状” cords=”热区坐标”  href=”链接地址” /><area shap=”热区形状” cords=”热区坐标”  href=”链接地址” /></map>

    <area>标记常用属性：

    普通框架

    框架集和框架页：

    框架集：<frameset></frameset>:主要用来划分窗口。

    框架页：<frame>:主要用来指定默认显示的网页地址。

    <frameset>属性：

    <frame>框架页的属性 ：

    <noframes>含义：当浏览器不支持框架时，会提示信息。低版本不支持。高版本都支持。

    语法格式：<noframes>内容</noframes>

    内嵌框架（行内框架）

    与普通框架区别：<iframe>是<body>的子标记，因此，放在<body>中。

    语法格式：<iframe 属性=“值”>对不起，您的浏览器版本过低</iframe>

    常用属性：

    CSS简介

    CSS 层叠样式表。

    CSS的主要目的：是给html标记添加各种各样的表现（表格、样式）。比如：文字样式、背景、文本样式、连接样式。

    语法格式：

    <style type=”text/css”> h1{Color:red;    //文本颜色

Text-align:center;    //对齐方式

Border:1px solid #444;     //半框样式

Background-color:#ffff00;    //背景色}</style>

    CSS选择器

    基本选择器

    (1) “*”选择器：通配符

    （2）标签选择器

    （3）class选择器（类选择器）-----使用最多的选择器

    .myClass{

Color:red;

Background-color:yellow;

}</style><h1 class=”myClass”></h1><p class=”myClass”></p>

    （4）id选择器

    style type=”text/css”>

#myId{

Color=red;

Background-color:yellow;

}</style><p id=”myId”></p>

    组合选择器

    （1）多元素选择器

    （2）后代元素选择器(最常用)

    div h1.title{ color:red; }

    　　　　　　　 Div p.title{ color:yellow; }

    　　　　　　</style>

    　　　　　　 <div>

    　　　　　　 <h1 class=”title”> </h1>

    　　　　　　 <p class=”title”> </p>

    　　　　　　 </div>

    （3）子元素选择器

    描述：给某个元素的子元素添加样式

    CSS尺寸属性

    Width：元素宽度，一定要加px单位。

    Height：元素高度。

    CSS字体属性

    CSS文本属性

    伪类选择器

    一个超链接，有四个状态

    在平时的工作中，会使用以下写法，来给链接加样式：

    A:link,a:visited{ color:#444;text-decoration:none; } //将“正常状态”和“访问过的状态”合二为一。

    A:hover{ color:#990000;text-decoration:underline; } //”鼠标放上” 单做一种效果

    CSS列表属性

    List-style：列表样式，取值：none。去掉项目符号或编号前面的各种符号。

    <style type:”text/css”>

    ul,ui{ list-style:none; /*去掉项目符号前面的符号*/ }

    </style>

    <ul>

    <li>北京市</li>

    <li>东营市</li>

    <li>上海市</li>

    <li>深圳市</li>

    </ul>

    CSS边框属性：每个元素都可以加边框线

    CSS内边距属性：边框线到内容的填充

    注意：平时我们所说的width和height属性，他们指内容的宽度和高度，不含内、外边距、边框线。

    CSS外边距属性：边线往外的距离

    CSS背景属性

    以上就是分享一个HTML的学习之路的详细内容，更多请关注php中文网其它相关文章！

    声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理
    专题推荐：HTML 之路 学习 菜鸟
    上一篇：ios中关闭弹窗后有部分还“留在页面上”改如何处理？ 下一篇：APICloud Studio 2使用GIT-SVN 技术的实例教程
    大前端线上培训班

    相关文章推荐

    • html怎么设置元素不可见• html怎么设置表格标题• html怎么去掉input边框• html div怎么设置大小• html图片的透明度怎么设置

    全部评论我要评论

  • 取消发布评论发送
    • 1/1

    PHP中文网

    首页 首页课程 课程文章文章问答 问答博客博客词典 词典手册 手册资源 资源搜索 搜索APP下载 APP下载