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

时间：2019-08-19 20:52:25 阅读：95 评论：0 收藏：0 [点我收藏+]

今日内容

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

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

标签：box bsp 点击表单 ade dns解析不能 hid 输入

原文地址：https://www.cnblogs.com/saoqiang/p/11379369.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

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

今日内容

域名解析

请求和响应

标签

标签分类

head标签中的标签

body标签中的基本标签

img标签

a标签 超链接标签

列表标签

标题列表标签

特殊字符大于小于空格

表格标签(重点)

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

select标签 下拉选择框

label标签 提高用户体验

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

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

a标签超链接标签

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

select标签下拉选择框

label标签提高用户体验

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