html1

文字操作标签和特殊字符标签

1.加粗<b></b>

2.斜体<i></i>

3.下划线<u></u>

4.删除<s></s>

5.换行，自己占一行，段落标签<p></p>

6.标题，h的数字越小越大，最大h1,它自己一行<h1></h1>

7.换行<br>

8.分界线<hr>

9.空格  

10.空格  

11.大于号> >

12.小于号< <

13.与& &

14.人民币符号￥ ¥

16.注册，圈圈内R ®

常用排版标签

1.里面的内容独占一行<div></div>

2.里面的内容不独占一行<span></span>

3.图片标签img <img src="路径" alt="这里是图片不存在时给这个图片的注释" title="如果鼠标放在图片上出来的提示" width="100px" height="100px">

4.超链接标签<a herf="超链接指向的网站" target="点击超链接标签指向的网页地址">超链接的文字内容</a>

5.锚点，跳转至name的位置

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>

<body>

<a href="" name="top">顶部内容</a>
<h1>克莱比的小木屋</h1>
<h2>Resize this responsive page!</h2>
<h2>Resize this responsive page!</h2>
<h2>Resize this responsive page!</h2>
<h2>Resize this responsive page!</h2>
<h2>Resize this responsive page!</h2>
<h2>Resize this responsive page!</h2>
<h2>Resize this responsive page!</h2>
<h2>Resize this responsive page!</h2>
<h2>Resize this responsive page!</h2>
<h2>Resize this responsive page!</h2>
<h1>Resize this responsive page!</h1>
<h1>Resize this responsive page!</h1>
<h1>Resize this responsive page!</h1>
<h1>Resize this responsive page!</h1>
<h1>Resize this responsive page!</h1>
<br>
<a href="#top">回到顶部</a>

</body>
</html>

无序列表标签：

显示方块的话把type改成"square"

<ul type="none">

    <li>abc</li>

    <li>abc</li>

    <li>abc</li>

</ul>

有序列表标签：

显示方块的话把type改成"square"

<ol>

<li>abc</li>

<li>abc</li>

<li>abc</li>

</ol>

表格

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>

<body>

<table border="1">
  <thead>
     <tr>
          <th>id</th>
          <th>name</th>
          <th>age</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>sb</td>
         <td>2222</td>
      </tr>
      <tr>
         <td>2</td>
         <td>nt</td>
         <td>13</td>
      </tr>
   </tbody>
</table>

</body>
</html>

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>

<body>

<table border="1">
  <thead>
     <tr>
          <th>id</th>
          <th>name</th>
          <th>age</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>sb</td>
         <td rowspan=2>2222</td>
      </tr>
      <tr>
         <td colspan=2>3</td>
      </tr>
            <tr>
         <td>2</td>
         <td>nt</td>
         <td>13</td>
      </tr>
   </tbody>
</table>

</body>
</html>

border=数字，控制表格的边框的宽度
cellpadding=数字内容和边框的距离
cellspacing=数字表格边框的外边距
rowspan合并竖单元格
colspan合并横单元格

表单

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>

<body>
<form action="https://www.baidu.com/s">
    <!action是提交的地址url>
    <input type="text" name="wd">
    <!文本的输入框，必须设置name,name是提交数据时当前输入框对应的key值>
    <input type="submit" value="百度一下">
    <!提交按钮,value改按钮里面的字>
</form>

</body>
</html>

表单input全参数

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>

<body>
<form action="" method="GET">
    <!action是提交的地址url,post是隐藏提交的表单数据,get不隐藏>
    <p>
    用户名：<input type="text" name="name">
    <!文本的输入框，必须设置name,提交时候的格式name=value>
    </p>
    <p>
    密码：<input type="password" name="password">
    </p>
    <p>
    性别：<input type="radio" name="gender" value="man">男
         <input type="radio" name="gender" value="woman">女
            <!两个选择框共用一个name达到单选的目的>
    </p>
    <p>
    爱好：<input type="checkbox" name="hobby" value="cy">抽烟
         <input type="checkbox" name="hobby" value="ls">拉屎
            <!两个框共用一个name达到多选框>
    </p>
    <p>
    <input type="reset">
            <!重置表单>
    </p>
    <p>
    <input type="hidden" name="yc" value="this is hide data">
            <!隐藏数据>
    </p>
    <p>
        <input type="date" name="date">
        <!日期框>
    </p>
    <p>
        <input type="file" name="file">
        <!文件选择>
    </p>
    <p>
    <input type="submit" value="百度一下">
        <!提交按钮,value改按钮里面的字>
    <input type="button" value="不提交的按钮">
    </p>
</form>

</body>
</html>

表单的select和label

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>

<body>
<form action="" method="GET">
<select name="school" id="">
    <option value="qh">清华</option>
    <option value="cs" selected>厕所</option>
    <!加入selected表示默认是这个选项>
    <option value="dt">地摊</option>
    <option value="xsd">下水道</option>
</select>

    <p>
        <!这是多选框,用multiple>
    <select name="school" id="" multiple>
    <option value="qh">清华</option>
    <option value="cs" selected>厕所</option>
    <option value="dt">地摊</option>
    <option value="xsd">下水道</option>
    </select>
        </p>
    <p>
     <!rows设置里面文本的行数，clos设置文本里面的列数>
    <textarea rows="4" clos="10">
        多行文本框
    </textarea>
    </p>
    <p>
        <input type="radio" name="gender" value="nan" id="man">
        <label for="man">男的</label>
        <!label设置点男的也会选择框>
    </p>

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

</body>
</html>

css的方法，标签选择器，类选择器，id选择器

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
  <!加上样式>
    <!与标签同名的是标签选择器>
    <!用#加上id的是id选择器>
    <!用class是id选择器>
<style>
       div{
    width:200px;
    height:200px;
    background-color: blue;
    }
       span{
    background-color: yellow;
    }
    #shit {
        width: 150px;
        height: 150px;
        background-color: green;
        text-align: center;
    }
    .cesuo{
        width:100px;
    height:100px;
    background-color: #985f0d;
    }

</style>
</head>

<body>
    <div style>
    </div>

    <span>abcd</span>

    <p id="shit">sata</p>
    <p class="cesuo">这里是厕所的颜色</p>
</body>
</html>

行内标签span是不能设置宽度高度的

关于布局

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<style>
    .inputwindow{
        width: 300px;
        height: 30px;
    }
    .pwindow{
        text-align: right;
    }
    .divwindow{
        width: 600px;
        height: 300px;
    }
    .subbutton{
        width: 150px;
        height: 40px;
    }
    span{
        font-size: 12px;
        color: #985f0d;
    }
    .checkboxwindow{
        width: 10px;
        height: 10px;
    }
</style>
</head>

<body>
<form action="" method="GET">
    <!action是提交的地址url,post是隐藏提交的表单数据,get不隐藏>
    <div class="divwindow">
    <p class="pwindow">
    用户名：<input class="inputwindow" type="text" name="name">
    <!文本的输入框，必须设置name,提交时候的格式name=value>
    </p>
    <p class="pwindow">
    密码：<input class="inputwindow" type="password" name="password">
    </p>
    <p class="pwindow">
    性别：<input type="radio" name="gender" value="man">男
         <input type="radio" name="gender" value="woman">女
            <!两个选择框共用一个name达到单选的目的>
    </p>
    <p class="pwindow">
    <span>爱好：</span><input class="checkboxwindow" type="checkbox" name="hobby" value="cy"><span>抽烟</span>
         <input class="checkboxwindow" type="checkbox" name="hobby" value="ls"><span>拉屎</span>
            <!两个框共用一个name达到多选框>
    </p>
    <p class="pwindow">
    <input class="subbutton" type="reset">
            <!重置表单>
    </p>

    <p  class="pwindow">
    <input class="subbutton" type="submit" value="百度一下">
        <!提交按钮,value改按钮里面的字>
    </p>
    </div>
</form>

</body>
</html>

用div来划分像素块，然后里面用p来排版，p在div块里面左对齐右对齐。

posted @ 2020-11-06 21:56 克莱比-Kirby 阅读(76) 评论(0) 收藏举报

刷新页面返回顶部

克莱比的小站

个人站点 zqhfun.top/home

html1

公告