表格 列表 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：禁用

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

时间： 2024-09-29 14:57:27

表格 列表 form input 下拉选择 评论框的相关文章

Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）

单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”,如: <form role="form"

基于bootstrap的下拉选择 ( combox ) 输入 ( input ) 功能

需求: 在编辑数据的时候,既可以让用户输入,也可以从下拉框中选择 思路: 参照下面的效果图,因为是表格里面的数据,所以下拉框触发按钮和输入框分别为1列,输入列可以设置是否输入(方法:<td contenteditable="true">).图中没有设置输入,因为班级是value,name形式的,只能选择. 环境: Jquery+bootstrap+HTML5 效果图: 代码: <html> <head> <title>Table下拉选择输

下拉选择框select的纯CSS替代方案

这篇教程中,我将给大家展示表单元素下拉选择框select的CSS替代方案.该方法采用css来实现,看上去非常简单.我们用radio标签列表来模拟下拉列表,选择一个radio可以很好的模拟出select中选择一个元素的效果. 一:HTML 下面是我们在form表单里面用到的html代码: .代码 <fieldset class="radio-container"> <div class="radio-options"> <div clas

360浏览器搜索框下拉选择图片js模拟select效果

最近360浏览器网址导航的主页增加了一个下拉选择图片搜索的功能,也就是用js模拟出了select的效果,今天在单位闲了无事干,就把空上功能给摸索出来了,虽然做的不是太完善,但对要求不高的用户来说,已经可以了,而且也可以为学习Js的朋友提供参考. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>

angular2.x 下拉多选框选择组件

angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云   链接:https://pan.baidu.com/s/1dEHwKmt 密码: mhta 下面贴代码: 界面 引用  selectList  是 下拉框的数据列表 redSelList() 方法是获取 选择完成后的数据 <app-select-checkbox [itemList]="selectL

Bootstrap系列 -- 15. 下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</

下拉选择框改变表单action的简单例子

做了个简单的小例子 用js弄的. form  的代码 1 <form  action=""  method="post" id="formRole"> type的 下拉单 1 2 3 4 5 6 <select name="type" id="type"  onchange="changeAction()">       <option value=&quo

一款javascript实现的超炫的下拉选择框

今天为给大家带来一款javascript实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图 在线预览   源码下载 实现的代码. html代码: <div class="scifiUI"> <h1> Scifi Dropdown</h1> <ul> <li>Interactive</li> <li>Animated<

基于jQuery美化联动下拉选择框

今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="container"> <div class="inner"> <section id="main_content"