表格列表 form input 下拉选择评论框

最新推荐文章于 2023-02-10 22:12:10 发布

weixin_30256901

最新推荐文章于 2023-02-10 22:12:10 发布

阅读量327

点赞数

原文链接：http://www.cnblogs.com/saoqiang/p/11379369.html

版权

今日内容

img图片 a标签

列表标题列表特殊符号

表格

form标签 input(单选多选重置选择文件选择年月日)button(提交按钮) textarea(评论框)select(下拉选择框)

textarea(评论框) 博客园评论

标题	h1	h2	h3	h4	h5	h6
列表	ol	ul	li	dl	dt	dd
排版标签	p	div	hr	center	pre
表格	table
表单	form

域名解析

域名 -- ip地址 -- 192.168.1.10
https://192.168.1.10:80  -- www.jd.com  -- DNS解析 {'www.jd.com':'192.168.1.10',}

请求和响应

请求:浏览器socket客户端给服务端发信息
响应:服务端socket给客户端回信息

标签分类

html标签又叫做html元素，它分为块级元素和内联元素（也可以叫做行内元素），都是html规范中的概念。

标题	h1	h2	h3	h4	h5	h6
列表	ol	ul	li	dl	dt	dd
排版标签	p	div	hr	center	pre
表格	table
表单	form

两类:
    内敛标签(行内标签):不独占一行,内敛标签只能嵌套内敛标签    b\i\u\s\button\span\img\a
    块级标签(行外标签):自己独占一行,可以嵌套内敛标签和某些块级标签   \h1-h6\br\hr\p\div
    p标签:不能嵌套p标签,也不能嵌套块级标签

head标签中的标签

<title></title> 定义网页标题

<meta/> 定义网页原信息\配置信息(了解)

body标签中的基本标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p> #独占一个段落
<h1>标题1-7</h1>
<h2>标题2</h2>
<!--换行-->
<br>
<!--水平线\分割线-->
<hr>

img标签

<!--img图片标签-->
<!--属性 src='图片路径'  网络地址的绝对路径\本地相对路径-->
<!--alt未加载提示-->
<!--title图片描述-->
<!--width宽-->
<!--height高 一般只设置一个等比缩放-->
<!--示例:-->
    <img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="这是个美女,请稍等.." title="美女" width="200" height="200">

a标签超链接标签

    <!--a标签属性-->
    <!--href:超链接的地址-->
    <!--target:是否新建窗口-->
    <!--target="_self"  当前窗口打开某个路径对应的html页面-->
    <!--target="_blank" 新建窗口打开某个路径对应的html页面-->
    <a href="https://www.baidu.com" target="_blank">百度</a>

列表标签

无序列表:    
<ul type="none">
        <li>太白</li>
        <li>alexdsb</li>
        <li>景女神</li>
    </ul>
有序列表:
<!--标题列表标签-->
<!--reversed    reversed    规定列表顺序为降序。(9,8,7...)-->
<!--start   number  规定有序列表的起始值。-->
<!--type    1 A a I i-->
    <ol type="a" start="2">
        <li>大壮</li>
        <li>B哥</li>
        <li>灭霸</li>
        <li>雪飞</li>
    </ol>

标题列表标签

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>
显示样式
标题1
    内容1
标题2
    内容1
    内容2

特殊字符大于小于空格

空格:&nbsp;
小于号:&lt;
大于号:&gt;
&符号:&amp;
...

表格标签(重点)

<!--总结-->
<!--bgcolor外边框线 cellpadding与外边框距离单元边沿与其内容之间的空白 cellspacing细胞间距离-->
如果要合并表格 以左上角为基准


<!--行合并2个  colspan="2"  列合并 rowspan="2" -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--bgcolor外边框线 cellpadding与外边框距离单元边沿与其内容之间的空白 cellspacing细胞间距离-->
    <table border="1" cellpadding="1px" cellspacing="30px">
<!--        cellspacing 属性规定单元格之间的空间。-->
<!--注释：请勿将该属性与 cellpadding 属性相混淆，cellpadding 属性规定的是单元边沿与单元内容之间的空间。-->
        <thead>
             <tr>
                 <th>第一列</th>
                 <th>第二列</th>
                 <th>第三列</th>
             </tr>
        </thead>
        <tbody>
            <tr>
                <td>第一个值</td>
                <td>第一个值01</td>
                <td>第一个值02</td>
            </tr>
            <tr>
                <td>第二个值</td>
                <td>第二个值01</td>
                <td>第二个值02</td>
            </tr>
            <tr>
                <td>第三个值</td>
                <td>第三个值01</td>
                <td>第三个值02</td>
            </tr>
        </tbody>
    </table>
    上面是表结构固定写法
table表格分表头 身体 thead表头这行叫tr tr的格子叫th
tbody表身体 没一行都是tr tr内容td

<table border="" 里面设置属性border 为1设置外边框表格线 >
</body>
</html>


列合并 rowspan="2"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1" cellpadding="1px" cellspacing="30px">
      <thead>
             <tr>
                 <th>第一列</th>
                 <th>第二列</th>
                 <th>第三列</th>
             </tr>
        </thead>
        <tbody>
            <tr>
                <td>第一个值</td>
                <td>第一个值01</td>
                <td>第一个值02</td>
            </tr>
            <tr>
                <td>第二个值</td>
                <td>第二个值01</td>
                <td rowspan="2">第二个值02</td>
<!--                设置占多少格-->
            </tr>
            <tr>
                <td>第三个值</td>
                <td >第三个值01</td>
<!--                删除这个-->
            </tr>
        </tbody>
    </table>
</body>
</html>

行合并2个  colspan="2"
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1" cellpadding="1px" cellspacing="30px">
      <thead>
             <tr>
                 <th>第一列</th>
                 <th>第二列</th>
                 <th>第三列</th>
             </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">第一个值占2格</td>
<!--                删除这个-->
                <td>第一个值02</td>
            </tr>
            <tr>
                <td>第二个值</td>
                <td>第二个值01</td>
                <td>第二个值02</td>

            </tr>
            <tr>
                <td>第三个值</td>
                <td >第三个值01</td>
                <td >第三个值03</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

合并2*2

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1" cellpadding="1px" cellspacing="30px">
      <thead>
             <tr>
                 <th>第一列</th>
                 <th>第二列</th>
                 <th>第三列</th>
             </tr>
        </thead>
        <tbody>
            <tr>
                <td>第一个值</td>
                <td>第一个值01</td>
                <td>第一个值02</td>
            </tr>
            <tr>
                <td>第二个值</td>
                <td colspan="2" rowspan="2">第二个值01</td>
<!--                <td rowspan="2">第二个值02</td>-->
<!--                设置占多少格-->
            </tr>
            <tr>
                <td>第三个值</td>
<!--                <td >第三个值01</td>-->
<!--                删除这个-->
            </tr>
        </tbody>
    </table>
</body>
</html>

form标签 input(单选多选重置选择文件选择年月日)button(提交按钮) textarea(评论框)select(下拉选择框)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>from表单</title>
</head>
<body>
<from action="127.0.0.1">
<!--    action提交到名为 "127.0.0.1‘ 的页面：-->
    <label for="user">姓名：</label><!--提高用户体验 单击获取焦点-->
    <input id="user" type="text" name="username" placeholder="请输入用户名" >
    <!--设置默认值就设置value或placeholder  readonly设置不可改，只读 提交过去 username='你输入的'-->
       <!--注意:如果设置了readonly,只能给输入框的模式设置,那么不能修改,但是可以提交-->
        <!--注意:如果设置了disabled,可以给所有的表单元素设置,那么不能修改,也不能提交-->
    <input type="password" name="password" ><!--password='你输入的'-->
    <input type="radio" name="1"> 男
    <input type="radio" name="2"> 女
<!-- radio 单选按钮 一组中互斥   name设置相同会让其成为互斥项-->


    <input type="checkbox" name="happy" value="1" checked> 玩<!--checkbox 多选按钮-->
    <input type="checkbox" name="happy" value="2" checked> 睡<!--提交过去 happy=2 checked默认选中-->
    <input type="checkbox" name="happy" value="3"> 吃<!--提交过去 happy=3-->
6
    <input type="submit"><!--提交按钮 注意 不可以放在外边，不然失去提交功能-->
    <button>提交按钮</button><!--与上面一样提交功能-->
    <hr>
    <input type="reset"><!--重置按钮-->
    <input type="file"><!--选择文件-->
    <input type="button"><!--可以设置value 普通按钮-->
        <input type="hidden"><!-- 被隐藏的段落：-->
    <input type="date"><!--选择年月日-->
    <textarea name="" id="1" cols="30" rows="10">请输入评论</textarea>
<!--评论框 name为了传数据设置 可以设置宽高-->
    <select name="地点" id="dd" size="3" multiple>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">江西</option>
    </select>
<!--默认单选 multiple多选(鼠标下拉或shift选择） size变大-->

</from>
</body>
</html>

select标签下拉选择框

单选
    <select name="city">
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
    </select>
多选:multiple
    <select name="city" multiple>
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
   </select>

label标签提高用户体验

标识标签的功能的提高用户体验用的与input一起使用

方式1:for:执行对哪个标签进行标识
效果:点击label标签中的文字,就能让标识的标签获得光标
<label for="username">用户名</label>
<input id="username" type="text" name="username" value="dazhuang">
方式2:
        <label>
            密码:<input type="password" name="password" value="111" disabled>
        </label>

textarea多行文本就是博客园评论框

就是博客园评论框

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>
name：名称
rows：行数  #相当于文本框高度设置
cols：列数   #相当于文本框长度设置
disabled：禁用

转载于:https://www.cnblogs.com/saoqiang/p/11379369.html