zoukankan      html  css  js  c++  java
  • Html基础(一)

    what is html

    • (hypertext marked language)超文本标记语言,负责页面文本、图片内容的编辑排布;
    • 特点:
      1. 使用的是一对一对的标签组成
        双标签 可嵌套其他的标签;单标签不可嵌套其他标签;

      2. 标签之间可以相互嵌套,但不可以交叉嵌套
        <!--- 可嵌套--->
        <!---可并列--->
        <!---不可交叉--->

      3. 若是有多个相同的标签,可使用id或name属性去区分

         <tag1 id="20130705" name="a"></tag1>
         <tag1 id="20140603" name="b"></tag1>
        

        重点:HTML的核心在与标签的使用、标签属性的使用

    html基本格式

    • 网页的每个界面都是一个独立的HTML文件:

       <!---基本格式----->
       <html>
        <!---页面 start----->
       	<head>
       		<!---头部 start----->
           	<title>这里写网页页面的标头</title> 
           	<!---头部 end----->
       	</head>
       	<body>
           	书写内容的地方
       	</body> <!---主体 start----->
       	<!---页面 end----->
       </html> 
      

    html常用标签及其属性

    文本修饰

    <font> 属性
    size 字体大小 最大值是7
    color 字体颜色 用单词表示 "red" "green" "blue" RGB表示rgb(0,0,255) 十六进制表示#0000ff
    face 字体类型 黑体、楷体、宋体、华文彩云等 必须浏览器支持
    字符实体
    含义:就是讲一些特殊含义符号例如空格(&nbsp)、引号(")等显示在html中, 在编写时可以键入实体名或者实体编号来表示,但是在有些浏览器不支持某个字符实体的实体名但是编号时所有都支持的,所以建议都是用实体编号;
    字符实体查阅
    <br> 换行标签,达到换行的目的,一个<br>但标签就是往下一行;

    段落修饰

    <p> 段落标签 使元素成块 可以内嵌其他标签来修饰段落内文本的显示效果;
    align 对其属性 left 左对齐 center居中对其 right右对齐

    标题修饰

    <h1> 标题标签 使元素成块 可以使h1 - h6 共六个标题 标题依次变小 h1标签建议只在页面中出现一次,多次出现不利于搜索引擎的识别;
    align 对其属性
    它和段落一样没有color样式,如需修改文本样式可以嵌套其他标签实现
    <hr> 水平分隔线
    有color颜色
    size高度
    width宽度
    align对其

    序列修饰

    特点:块元素,独立成行有行间距会自动缩进;
    无序序列

    <ol>
          <li></li>
           <li></li>
    </ol>
    

    有序序列

    <ul>
      	<li></li>
     	<li></li>
    </ul>
    

    在序列里 <ol>标签表示无序序列<ul>标签表示有序序列<li>则表示序列元素,有几个<li>标签就表示有几个标签元素,而<ol>和<ul>则用来区分这些序列元素的类型,序列类型可以相互嵌套但是会再次缩进;
    <ol>属性:type 1、a 、A 、i、 I
    <ul>属性:type
    start 起始数
    <li>属性:type disc(实心圆) 、circle(空心圆) 、square(实心方块)

    图片

    <img>
    

    alt 图片丢失显示内容
    src 图片源
    width 图片宽度
    height 图片高度
    border 图片边框

    音频

    <bgsound>        
    

    注:只对IE有效果
    src=""

    <embed>
    

    src=""
    width
    hight

    视频

    <embed>
    

    支持mp3、mp4
    src ="" 文件路径
    width 宽度
    height 高度

    字体其他样式

    加粗 b 斜体 i 下划线 u

    <b>加粗内容</b>
    <i>斜体内容</i>
    <u>下划线内容</u>
    

    超级文本

    <a>
    

    属性:
    href 资源的路径地址
    target 是否在新页中打开,默认是在当前页打开,target="_blank"则在新页中打开,target="_self" 或者"_top"当前页打开;
    执行效果:
    1.跳转到本地或者网络的资源地址;
    url 网络资源

    <a href ="www.baidu.com">
    

    path 本地资源

    <a href ="luomit.txt">
    

    2.调动本地邮件客户端进行发送邮件

    <a href="mailto:14125@qq.com">发送信息到14125@qq.com邮箱\</a>
    

    3.调用JavaScript脚本文件

     <a href="javascript:alert("你点我干哈啊!")">调用JavaScript脚本\<a>
    

    4.设置锚点(书签) 设置书签跳转的功能

    表格

    <table>
    

    width 表格宽
    height 表格高
    cellspcing 单元格间距
    cellpading 内容与单元格边框的距离
    align 对齐 left center right
    brckground 背景图片
    bgcolor 背景颜色

    <tr>行</tr>
    <td>列</td> 
    

    align 对齐(水平) left center right
    valign 对齐(垂直) left center right middel top bottom
    brckground 背景图片
    bgcolor 背景颜色

    <th></th>
    

    th = td +居中+加粗
    单元格的合并
    行合并 rowspan <td rowspan="2">10</td> 这就把当前单元格和下一列的并列一个单元格合并
    列合并 colsoan

    <caption>表格的标头</caption>  
    

    写在表格开始处

  • 相关阅读:
    python入门第十七天_生成器 迭代器
    python入门第十六天__列表生成式
    装饰器补充知识点_ @functools.wraps(func)
    函数练习题2
    函数编程练习题1
    迭代器
    生成器的send方法
    函数写生成器
    斐波那契数列
    生成器
  • 原文地址:https://www.cnblogs.com/luomit/p/11184191.html
Copyright © 2011-2022 走看看