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

Posted saoqiang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表格 列表 form input 下拉选择 评论框相关的知识，希望对你有一定的参考价值。

今日内容

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标签:超文本标记语言,就是标记用的.

必须是封闭的
<meta >
<h1></h1>  
标签属性  id='xx' asdfasfd='xxx'
<h1 id='xx' asdfasfd='xxx'>

标签分类

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：禁用

以上是关于表格 列表 form input 下拉选择 评论框的主要内容，如果未能解决你的问题，请参考以下文章

联系表格 7 条件值基于不带 jquery 的下拉列表

html下拉框怎么设置默认值

如何控制select下拉选项的高度

jQuery EasyUI/TopJUI创建树形表格下拉框

Redux-form Material-UI下拉列表未显示下拉列表，选择

如何令comboBox不能输入，只能选择