zoukankan      html  css  js  c++  java
  • day01_前端HTML+CSS+JavaScript

    1 <html>  //根标签
    2     <head>   //头标签
    3         <title></title>  //标题标签
    4 
    5     </head>
    6     <body> //主体标签
    7 
    8     </body>
    9 </html>
    1.html标签:作用:所有的html 中标签的根节点。
    2.head标签:作用:用于存放<title>,<meta>,base,style,script,link注释
    3.title标签:让页面用有一个属于自己的标题。
    4.body标签:作用:页面的主体部分,用于存放所有的HTML标签。

    标签的属性:标签可以有多个属性,必须写在标签之中。
    标签名  属性1="属性值" 属性2="属性值" 
     
    锚点定位(难点):通过创建锚点链接,用户可以快速定位到目标内容。
    两步:
     1 <html>
     2     <head>
     3         <meta charset="utf-8">
     4         <base target="_blank">
     5     </head>    
     6     <body>
     7         <a href="http://www.baidu.com">百度</a>
     8         <a href="http://www.sina.com" target="_self">新浪</a>
     9         <a href="http://www.sohu.com">搜狐</a>
    10         <a href="http://www.163.com">网易</a>
    11     </body>
    12 </html>
    无序列表:所要输出的信息没有顺序。
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
        <ul></ul>:之中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
        <li></li> 之间相当于一个容器,可以容纳所有元素。
        无序列表会带有自己的属性样式,可以通过css来重新设定自己所需的样式。
    自定义列表:
    <dl>
        <dt>名词1</dt>
        <dd>名词1解释</dd>
        <dd>名词1解释</dd>
    
        <dt>名词2</dt>
        <dd>名词2解释</dd>
        <dd>名词2解释</dd>
    </dl>
    
    有序列表
    <ol>
        <li>中国</li>
        <li>美国</li>
        <li>英国</li>
    </ol>
    所要输出的信息有顺序。就用<ol></ol>
    <ol></ol>只能放<li></li>不能放其他的
    
    表格:存在即合理。表格现在还是较为常用的一种标签,但不是用来布局,常见处理,显示表格式数据。
    创建表格,在html网页中,想要创建表格,就要使用表格相关的标签:创建语法如下:
    <table>
        <tr>
            <td>单元格内的文字</td>
        </tr>
        <tr>
            <td>单元格内的文字</td>
        </tr>
    </table>
    <table></table>
    解释:
    <table></table>:定义一个表格。
    <tr></tr>:一行单元格。用于定义表格中的一行,必须嵌套在table标签中,
                在table标签中包含几对<tr></tr>就有几行表格
    <td></td>:用于定义表格中的单元格,必须嵌套在<tr></tr>标签之中,
                一对<tr></tr>中包含几对<td></td>,就表示有多少列(或多少个单元格).
    <table></table>:标签中只能放<tr></tr>
    <tr></tr>中只能放<td></td>        
    <td></td>:标签,它就像一个容器,可以容纳所有的元素。    
    表格中的属性:
    1.border 边框 默认值为0
    2.cellspacing:设置单元格之间的空白间距。
    3.cellpadding:设置单元格内容与单元格边框之间的空白间距默认值1px
    4.表格的宽度。  px
    5.height:表格的高度。  px
    6.align:设置表格再网页中的水平对齐方式。 left center right
    
    合并单元格(难点)
    跨行合并:rowspan 跨列合并:colspan
    合并单元格的思想:
        将多个内容合并的时候,就会有多余的东西,把他删除。
        例如将三个<td></td>合并成一个,那就多余了两个,需要删除。
        公式:删除的单元格个数=合并的个数-1;
        总结表格:
        1.表格提供了Html中鼎数据格式的方法。
        2.表格中由行中的单元格组成。
        3.表格中没有列元素,列的个数取决于单元格的个数。
        4.表格不要纠结于外观,那由CSS控制。
    举例:跨行合并单元格:
    <table width="500px" height="300px" border="1" cellspacing="0" cellpadding="0" align="center">
        <caption>火影忍者演员表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td></td>
                <td rowspan="2">28</td>
            </tr>
            <tr>
                <td>佐助</td>
                <td></td>
            </tr>
        </tbody>
    </table>
    举例:跨列合并单元格:
    <table width="500px" height="300px" border="1" cellspacing="0" cellpadding="0" align="center">
        <caption>火影忍者演员表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td></td>
                <td>28</td>
            </tr>
            <tr>
                <td>佐助</td>
                <td colspan="2"></td>
            </tr>
        </tbody>
    </table>
    1 <a href="movie">个人经历</a>
    2 
    3 <h3 id="movie">
    4 个人经历:11111111111111111111
    5 1111111111111111111111111111
    6 111111111111111111111111111111
    7 1111111111111111111111111111
    8 </h3>
    base:标签:可以设置整体链接的打开状态
    举例:实现了点击百度时新打开一个页面,保留原页面

    表单:
    在HTML中一个完整的表单通常由表单控件,也称(表单元素)、提示信息和表单域三个部分组成。
    表单控件
    <input type="text">:控件(重点):
    在上面的语法中,<input/> 标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。
    除了type属性之外,<input/>标签还可以定义很多其他的属性,其常用属性如下表所示。
    属性(type类型):
    1.text:单行文本输入框。
    2.password:密码输入框。
    3.radio:单选按钮。
    4.checkbox:复选框。
    5.button:普通按钮。
    6.submit:提交按钮。
    7.reset:重置按钮。
    8.image:图像形式的提交按钮。
    9.file:文件域。
    name属性: 由用户自定义,控件的名称。
    value属性:由用户定义,<input type="text">控件中的默认文本值。
    size属性:正整数<input type="text">input控件在页面中的显示。
    checked属性:checked 定义选择控件默认被选中的项。
    maxlength:控件允许输入的最多字符数。
  • 相关阅读:
    NYOJ228 士兵杀敌(五)
    NYOJ236 彩色棒 字典树 + 并查集 + 欧拉路
    给大家推荐一个用电脑拨打普通电话的软件skype
    转:甲骨文将以74亿美元收购太阳微系统公司
    花生壳原理求解
    利用IHttpModule及Session_End事件进行在线会员统计遇到的问题
    我的开发环境介绍及一个 Expression Bland 画图形的例子
    WF (Windows Workflow Foundation) 工作流学习(二)一个Asp.Net 与 顺序工作流 结合的例子
    WPF 、WinFrom 调用顺序工作流的登陆窗口例子
    Expression Bland 入门视频(三) 菜单、项目面板及工作区介绍
  • 原文地址:https://www.cnblogs.com/shuai9999/p/13906369.html
Copyright © 2011-2022 走看看