• 初识HTML


    1、    一套规则,浏览器认识的规则。

    2、    在html里的注释:<--! 注释的内容   -->

    3、    只能有一个html标签、head标签、body标签

    4、    在head标签里写的所有标签内容是看不见的,除了title标签

    head里的标签:

    标题:

    <title>z赵凡</title>

    标题旁边的图标

    <link rel="shortcut icon" href="11.ico"> :shortcut icon是固定内容,这样就表示设置图标

    <link rel="stylesheet" type="text/css" href="css/common.css" >:stylesheet表示要设置css

    编码:

    <meta charset="UTF-8">用于定义编码

    刷新:

    <meta http-equiv="refresh" Content="3">默认3秒钟刷新一次页面

    跳转:

    <meta http-equiv="refresh" Content="3; Url=http://www.baidu.com" /> 默认3秒钟跳转到百度

    所以这里的meta有主要的两个功能就是刷新和跳转

    关键字:

    <meta name="keywords" content="linux,python,运维">

    描述:

    <meta name="description" content="汽车之家为您提供最新汽车报价,汽车图片,汽车价格大全 "/>

    兼容IE:

    <meta http-equiv="X-UA-Compatible" content="IE=IE7;IE=IE8;IE=9" />

    5、    标签分类:

    自闭和标签:meta标签

    主动闭合标签

    6、    body标签

    特殊的符号:

    &nbsp空格,&gt,&lt

    p标签:表示段落,默认段落之间是有间隔的

    br:换行

    H标签:标题,从H1-H6,效果:

     

    span标签:空白标签

    效果:

     

    关于标签的小总结:

    所有标签分为:

    块级标签:h标签(加大加粗)、p标签(段落和段落有间距),div标签(白板)

    行内标签(内联标签):span标签(白板)、a标签

    div标签

    标签之间可以嵌套

    标签存在的意义:定位操作、js、css操作

    input系列

    <input type="text" name="user">:name属性,value可以设置默认值

    <input type="password" name="pwd">:name属性,value可以设置默认值

    <input type="submit" value="提交">

    <input type="button" value="按钮">

    单选框

    <input type="radio" value="gender"> 单选框 value,name属性(name相同则互斥)checked="checked"表示默认值

    html代码例子:

    <p>请选择性别</p>

    男:<input type="radio" name="gender" value="1">

    女:<input type="radio" name="gender" value="2">

    复选框

    <input type="checkbox" name="favor" value="1">:复选框value, checked="checked",name属性(批量获取数据)

    html代码例子:

    <p>爱好</p>

    足球:<input type="checkbox" name="favor" value="1">

    篮球:<input type="checkbox" name="favor" value="2">

    乒乓球:<input type="checkbox" name="favor" value="3">

    网球:<input type="checkbox" name="favor" value="4">

    上传文件与重置

    <p>上传文件</p>

    <input type="file" name="fname">:依赖form表单的一个属性:enctype="multipart/form-data"

    <input type="reset" name="重置">

    大输入框textarea

    <textarea name="member">默认值</textarea>

    select标签(下来框)

    name,内部option value提交到后台

    select="selected"表示默认选择

    代码例子:

    <select name="city">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3" selected="selected"></option>
        <option value="4">成都</option>
        <option value="5">重庆</option>
    </select>

    上述只能单选

    下面方式实现多选,代码例子:

    size用于显示多个,multiple用于多选

    <select name="city" size="10" multiple="multiple">
        <option value="1">北京</option>
         <option value="2">上海</option>
        <option value="3" selected="selected">南京</option>
        <option value="4">成都</option>
        <option value="5">重庆</option>
    </select>

    a标签:

    跳转:

    <a href="http://www.baidu.com">百度</a>这种默认情况下是在当前标签打开此网页,如果改为如下:

    <a href="http://www.baidu.com" target="_blank">百度</a>这样就会在一个新的标签打开网页

    锚:实现点击目录跳转到相应的内容,实现的方式是通过给标签设置不同的id,然后在a标签的href属性设置#id

    关于锚的一个实现例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a href="#i1">第一章</a>
        <a href="#i2">第二章</a>
        <a href="#i3">第三章</a>
        <a href="#i4">第四章</a>
        <div id="i1" style="height: 600px">第一章的内容</div>
        <div id="i2" style="height: 600px">第二章的内容</div>
        <div id="i3" style="height: 600px">第三章的内容</div>
        <div id="i4" style="height: 600px">第四章的内容</div>
    </body>
    </html>

    实现的效果就是通过点击相应的章节目录跳转到相应的内容

    img标签

    <img src="34_56.gif">

    就可以实现在页面上显示图片

    如果想要实现点击图片跳转,通过a标签实现:

    <a href="http://www.baidu.com">

      <img src="34_56.gif">

    </a>

    如果图片不存在了,在图片位置显示文字,通过alt参数实现:

    <a href="http://www.baidu.com">

         <img src="../34_56.gif" alt="图片1" >

    </a>

    效果如下:

    如果想要鼠标放在图片上显示内容,通过title参数实现:

    <a href="http://www.baidu.com">

         <img src="34_56.gif" alt="图片1" title="图片1" >

    </a>

    列表标签

    <ul>

       <li>苹果</li>

       <li>三星</li>

       <li>诺基亚</li>

    </ul>

    效果图如下:

     

    <ol>

        <li>香蕉</li>

        <li>苹果</li>

        <li>桃子</li>

    </ol>

    效果图如下:

     

    <dl>

        <dt>水果</dt>

           <dd>苹果</dd>

           <dd>香蕉</dd>

           <dd>梨</dd>

        <dt>蔬菜</dt>

           <dd>白菜</dd>

           <dd>萝卜</dd>

           <dd>西红柿</dd>

    </dl>

    实现的效果:

    表格标签

    代码例子:

    <table border="1">
         <tr>
             <td>主机名</td>
             <td>端口</td>
             <td>操作</td>
         </tr>
         <tr>
              <td>192.168.1.1</td>
              <td>80</td>
              <td>添加</td>
         </tr>
         <tr>
              <td>192.168.1.2</td>
              <td>81</td>
              <td>添加</td>
         </tr>
    </table>

    实现效果:

    但是上面的表格不是特别规范,下面是规范的表格写法:

    <table border="1">
         <thead>
               <tr>
                   <th>表头1</th>
                   <th>表头2</th>
                   <th>表头3</th>
                   <th>表头4</th>
                </tr>
        </thead>
    <tbody>
                <tr>
                   <td>1</td>
                   <td>2</td>
                   <td>3</td>
                   <td>4</td>
                </tr>
    <tbody>
     </table>

    这里的thead 专门用于写表头,th用于写表头中的具体信息

    列表里的合并单元格:

    通过colspan="2"参数实现横向合并

    通过rowspan="2"实现纵向合并

    label标签

    通过和input标签搭配使用

    代码例子:

    <label for="username">用户名</label>

    <input id="username" type="text" name="user" />

    打开的效果图:

    鼠标点击用户名输入框会自动获取光标

    fieldset标签

    <fieldset>
        <legend>登录</legend>
        <label for="username">用户名</label>
        <input id="username" type="text" name="user" />
        <p></p>
        <label for="password">密码</label>
        <input id="password" type="password" name="pwd" />
     </fieldset>

    实现的效果:

    7、    CSS

    • 在标签属性上设置style样式
    • id选择器。写在head里面,style标签中写样式

    id选择器例子:

    <style>
    #i1 {
    background-color: chartreuse;
             height: 100px;
    }
    style>

    然后在下面标签中通过id调用这个style就可以了

    • class选择器。同样是写在head里,style标签中写样式,但是这次不通过id,下面是例子:(这种方式是用的最多的)
    <style>
       .c1 {
                background-color: aqua;
                height: 100px;
            }
    <style>

    这种方式下面的标签在调用的时候是通过class调用

    • 标签选择器
    <style>
       div {
                background-color: black;
                color: aliceblue;}
    <style>

    这样的效果就是所有的div标签都会应用上面的这个样式

    • 层级选择器,通过空格分隔 例子:
    <style>
       span div {
    
                background-color: black;
                color: aliceblue;
            }
    <style>

    这样span标签下的div标签就会应用上面的这个样式

    • 组合选择器,通过逗号分隔

    <style>
        #i1,#i2,#i3,.c1 {
                background-color: chartreuse;
                color: red;
            }
    <style>

    这样id=i1,i2,i3以及class=c1的都会应用上面的样式

    • 属性选择器,对选择到的标签,再通过属性进行一次筛选
    <style>
        input[type="text"]{
                width: 100px;
                height: 200px;
            }
    <style>

    这样就会找到input标签并且type=“text”的应用上面的样式

    8、    css优先级

    标签上style优先,编写顺序,就近原则

    从上到下下面的优先级最高

    我们可以将css文件写入到一个文件,然后让其他都能用

    调用的方式:

    在head里写如下代码:

    <link rel="stylesheet" href="comm.css">

    设置边框

    <div style="border: 1px solid red;">aaaa</div>

    设置宽度的百分比

    <div style="height: 100px; 80%;border: 1px solid red;">aaaa</div>

    text-align: center; 用于设置水平居中

    line-height: 100px">aaaa</div>用于设置垂直居中,根据标签高度

    font-weight:600;  字体加粗

    font-size 字体大小

    9、    float

    <div style=" 20%;background-color: red;float: left">aaa</div>
     <div style=" 80%;background-color:blue;float: left">bbb</div>

    这样就可以实现让块级标签在一行显示

    10、    display

    none:让标签消失

    inline

    block

    inline-block:具有inline,默认自己有多少占多少

                 具有block,可以设置高度,宽度,padding,margin

    行内标签:无法设置高度,宽度,padding,margin

    块级标签:设置高度,宽度、padding,margin

  • 相关阅读:
    C语言warning的收集和总结
    HLS:跑马灯实验
    HLS:OpenCV和RTL代码转换关系
    Zynq-7000 FreeRTOS(二)中断:串口Uart中断
    Zynq-7000 FreeRTOS(二)中断:PL中断请求
    Zynq-7000 FreeRTOS(二)中断:Timer中断
    xilinx DMA IP核(二) —— 文档阅读
    Zynq-7000 FreeRTOS(一)系统移植配置
    xilinx DMA IP核(一) —— loop测试 代码注释
    System Verilog基础(二)
  • 原文地址:https://www.cnblogs.com/zhaof/p/6053150.html
Copyright © 2020-2023  润新知