html的学习

html语法的学习

什么是html

html: 超级文本标记语言(HyperText Markup Language)(不是编程语言)

创新互联服务项目包括宝山网站建设、宝山网站制作、宝山网页制作以及宝山网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,宝山网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到宝山省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

  • "超文本":字面意思,比普通文本更加高级;页面内可以包含图片,链接等非文字内容。
  • "标记":使用标签的方法将需要的内容包括起来。

    html是做什么的?

    html用于编写网页。对网页的内容进行排版。

  • html代码:用于展示需要展示的数据。
  • CSS代码:使显示的数据更加好看。
  • JavaScript代码:使整个页面显示的数据具有动画效果。

网页根据内容是否改变分为:静态页面、动态页面

  • 静态页面:代码编写好后,在浏览器里面看到的页面内容就不再改变了。html编写的就是静态页面。
  • 动态页面:在浏览器里面会根据不同的情况展示不同的页面。(例如登陆成功后显示的用户名,不同人登陆所显示的用户名是不同的)

    html语言的特点

  • html文件不需要编译,可以直接通过浏览器阅读。
  • html文件的扩展名是.html 或者.htm
  • html结构都是由标签组成的
    • 标签名是预先定义好的,我们只需要根据需要拿来用就可以了。
    • 标签名不区分大小写。
    • 通常情况下,一组标签是由开始标签和结束标签组成的。例如:
    • 有些标签没有结束标签,这些标签建议使用 / 结尾。例如:
  • html结构大体分为两类:头head , 和 体 body

    一个Html文件的模板

    html5的固定格式



    
        
        
    
    
    

  • 是整个页面的根标签,理论上一个html页面只需要一个,它里面包含了头和体这两个标签。
    • 为头标签,用于引入脚本,导入样式,提供元信息等,一般在浏览器里面不显示这些信息。
      • 子标签用于显示浏览器的标题。</li></ul></li><li><body>体标签,是整个网页的主体,大部分的代码都在此标签内。</li></ul></li></ul><hr /><h3>html开发环境的搭建</h3><p>为了更加快捷方便地编写Html,我们安装较为流行的前端IDE(集成开发环境) HBuilder 。<br/><img src="/upload/otherpic63/211063.jpg" alt="html的学习"></p><p>注释的使用:</p><ul><li>注释的格式:<!--注释内容--> 快捷键为:ctrl + / </li></ul><hr /><h3>常用的排版标签</h3><p><strong>1. 标题标签: <h2></strong><br/>html提供了<hn>系列的标签,包含了:<h2> <h3> <h4> <h5> <h6> <h7> ,定义了<h2> 为最大的标题,<h7> 为最小的标题。<br/><strong>2. 水平线标签:<hr></strong></p><ul><li><hr> 在html页面中插入一条水平分割线,用于定义内容中的主题变化。 <ul><li>size 属性 :水平线的高度,单位像素(hx)</li><li>noshade 属性: 没有阴影,取值:noshade,表示显示纯色。<br/>例如: <pre><code><!--水平线的使用--> <hr /> <hr size="5" /> <hr noshade="noshade" /></code></pre><p><strong>3. 字体标签: <front></strong></p></li></ul></li><li><front> 用于设置字体的尺寸,字体,颜色等。 <ul><li>size 属性:用于设置字体的大小,可能的值:从1到7的数字。浏览器默认是3。 </li><li>color属性:设置字体的颜色 <ul><li>颜色的取值:#xxxxxx 或者 colorname <ul><li>#xxxxxx 表示使用红绿蓝三原色设置颜色。 <ul><li>红绿蓝分别取值范围:00~FF ,此处使用的是16进制。</li><li>#000000 表示黑色,#FFFFFF 白色</li><li>红绿蓝2为取值相同时可以省略为1位。例如:#112233可以简化为:#123</li></ul></li><li>colorname :使用英文单词确定颜色。red红色,blue蓝色,green绿色,等等,在IDE中有颜色提示。<br/>例如: <pre><code><!--字体--> <front size="7">字体最大</front> <front color="#FF0000">颜色为红色</font> <front color="blue">颜色为蓝色</front></code></pre><p><strong>4. 格式化标签:<b> <i></strong><br/><b> 粗体<br/><i> 斜体<br/>例子:</p><pre><code><!--格式化--> <b>粗体</b> <i>斜体</i></code></pre><p><strong>5. 段落标签:<p> <br/></strong><br/><p> 定义段落。p标签会自动在文字的前后创建一些空白,形成段与段分明的效果<br/><br/> 插入单个换行<br/>例子:</p></li></ul></li></ul></li></ul></li></ul><pre><code><!--段落--> <p>段落1</p> <p>段落2</p><br/> </code></pre><p><strong>6. 图片标签:<img></strong></p><ul><li><img> 在html 中引用一张图片 <ul><li>src 属性:指定需要显示图片的URL路径。(路径可以是绝对路径也可以是相对路径)</li><li>alt 属性:图片无法显示时的替代文本。</li><li>width: 设置图片的宽度</li><li>heigth: 设置图片的高度<br/>例子:</li></ul></li></ul><pre><code><!--显示test.png图片--> <img src="../img/test.png" alt="示例图片" width="200px" heigth:"200px" title="鼠标移上显示的文字" /></code></pre><p><strong>7. 列表标签:<ul> <ol></strong></p><ul><li><ol> 定义有序列表 <ul><li>type 属性:列表的类型,取值有:A,a ,I,i,1 等</li></ul></li><li><ul> 定义无序列表 <ul><li>type属性:符号的类型,取值:disc 实心圆,square 方块,circle 空心圆</li></ul></li><li>定义列表项。 是<ul>或<ol> 的子标签<br/>例如:</li></ul><pre><code><!--列表标签--> <ul type="circle"> <!--以空心圆显示无序列表--> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul> <ol type="I"> <!--以阿拉伯数字显示有序列表--> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol></code></pre><p>显示效果:<br/><img src="/upload/otherpic63/211065.jpg" alt="html的学习"></p><p><strong>8. 超链接标签:<a></strong></p><ul><li><a>标签是超链接,是在html中提供一种可以访问其他位置的实现方式 <ul><li>href : 用于确定需要显示页面的路径(URL)</li><li>target: 确定以何种方式打开href 中的页面。长取得值:_blank 、 _self等</li><li>_blank 在新窗口中打开href确定的页面。</li><li>_self 默认。使用href 中的页面替换当前的页面。<br/>例如:</li></ul></li></ul><pre><code><!--超链接--> <a href="http://www.baidu.com" target="_blank"> 访问百度网,并在新窗口中打开链接 </a></code></pre><p>效果:<br/><img src="/upload/otherpic63/211068.jpg" alt="html的学习"></p><p><strong>9. 表格标签:<table > <tr> <td></strong><br/>html表格标签是由<table>标签以及一个或者多个<tr><td><th>标签组成的</p><ul><li><table> 是父标签,相当于整个表格的容器 <ul><li>border 表格边框的宽度</li><li>width 表格的宽度</li><li>cellpadding 单元边沿与其内容之间的空白</li><li>cellspacing 单元格与单元格之间的空白</li><li>bgcolor 表格的背景颜色</li></ul></li><li><tr> 标签用于定义行</li><li><td>标签用于定义表格的单元格(1列) <ul><li>colspan 单元格可横跨的列数</li><li>rowspan 单元格可横跨的行数</li><li>align 单元格内容的水平对齐方式,取值:left 左,right 右,center 居中</li><li>nowrap 单元格中的内容是否折行</li></ul></li><li><th> 标签用于定义表头,单元格的内容默认居中,加粗<br/>例子:</li></ul><pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格的跨行跨列操作
        13 14
        21
        11 12 13
        24
        31 34
        41 42 43

        效果:
        html的学习


        新闻名称:html的学习
        网页URL:http://ybzwz.com/article/jihihd.html