HTML5

最新推荐文章于 2023-05-06 17:45:56 发布

努力的小彭同学

最新推荐文章于 2023-05-06 17:45:56 发布

阅读量258

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/weixin_44816749/article/details/115704323

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

常用标签

标题标签h1
段落标签和换行标签p、br
文本格式化标签粗体、斜体、删除线、下划线，粗体strong或(b)、斜体em或(i)、删除线del或(s)、下划线ins或u
div和span没有语义，他们就是一个盒子，用来装内容的(div块级元素，span行内元素)
图像标签img src=“图片路径”，其他属性alt(图片不能显示显示的文字)、title(鼠标放图片提示文字)、width和height(设置图片的宽高)、border(设置边框粗细)
超链接标签《a href=“跳转网址” target=“目标窗口弹出方式(self原窗口或blank新窗口)”》文本或图像a,点击可以到别的网页
注释标签或者//
特殊字符，大于号：&gt、小于号：&lt、空格：&nbsp

表格标签

table定义表格的元素
h表头标签
tr定义表格行
td定义单元格
合并单元格：跨行合并(rowspan)或跨列合并(colspan)

列表标签

列表是用来布局的，特点整齐、整洁、有序、他作为布局更加自由和方便
根据使用情况不同，分为三类：无序、有序、自定义列表

无序列表

< ul >
< li >辣条< /li >
< li >臭豆腐< /li >
< li >烧烤< /li >
< /ul >
特点没有顺序
li标签可以作为一个容器，放任何元素

有序列表

< ol >
< li >辣条< /li >
< li >臭豆腐< /li >
< li >烧烤< /li >
< /ol >
特点有顺序
li标签可以作为一个容器，放任何元素

自定义列表

< dl >
< dt >名词< /dt >
< dd >名词解释1< /dd >
< dd >名词解释2< /dd >
< /dl >
dt和dd是兄弟关系

表单标签

分为表单域和表单控件

表单域

表单域是一个包含表单元素的区域
在HTML标签中，< from >标签用来定以表单域，以实现用户信息的收集与传递
< from >会把他包含的表单元素提交给服务器

<form accept="url地址" method="提交方式" name="表单域名称">各种表单元素控件</form>

表单控件

input输入表单控件
- 以type设置不同属性来指定不同控件
  
  text:常规文本输入
  password:不可见文本输入，用于密码
  button:普通按钮(和JS用)
  radio:定义单选按钮
  checkbox：定义多选按钮
  submit：提交按钮
  reset:重置按钮
  file:文件域，供文件上传
- name:定义input元素的名称
- value：规定input的值
  name和value是每个表单元素都要有的属性值，主要是给后台人员使用
  name表单的元素名字，要求单选按钮和多选按钮要有相同的name值
< label >标签
- 绑定input标签，点击文字锁定文本框，提升用户体验

<label for="text"> 用户：</label><input type="text" name="username" id="text">

select下拉表单控件

    <label for="select">地址：</label><select name="" id="select">
            <option value="">成都</option>
            <option value="">达州</option>
        </select>

textarea文本域控件

    <label for="te">反馈：</label><textarea name="text" id="te" cols="30" rows="10"></textarea>

cols：控制每行的字符数
rows：控制显示行数

练习表单

<body>
    <h3>青春不常在，抓紧谈恋爱</h3>
    <table border="0" width="500">
        <tr>
            <td>
                <label for="sex">性别</label>
            </td>
            <td>
                男<input type="radio" id="sex" checked="checked"> 女<input type="radio" id="sex"><br>
            </td>
        </tr>
        <tr>
            <td>
               生日
            </td>
            <td>
                <select>
                    <option>选择年</option>
                </select>
                <select>
                    <option>选择月</option>
                </select>
                <select>
                    <option>选择日</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京"></td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                未婚<input type="radio" id="ma" checked="checked"> 已婚<input type="radio" id="ma"><br> 离婚<input type="radio" id="ma"><br>
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td><input type="text" value="大学"></td>
        </tr>
        <tr>
            <td>喜欢类型</td>
            <td><input type="checkbox" id="like">可爱 <input type="checkbox" id="like">御姐 <input type="checkbox" id="like">公主 <input type="checkbox" id="like">萝莉 </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea id="t" cols="50" rows="2"></textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="checkbox" checked="checked">我同意注册条款</td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#"><ins>我是会员，立即登录<ins></a></td>
        </tr>
        <tr>
            <td></td>
            <td><h4>我承诺</h4>
                <ul>
                    <li>年满18，单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>    
            </td>
        </tr>  
    </table>
</body>

年满18，单身
抱着严肃的态度
真诚寻找另一半

努力的小彭同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5

常用标签标题标签h1段落标签和换行标签p、br文本格式化标签粗体、斜体、删除线、下划线，粗体strong或(b)、斜体em或(i)、删除线del或(s)、下划线ins或udiv和span没有语义，他们就是一个盒子，用来装内容的(div块级元素，span行内元素)图像标签img src=“图片路径”，其他属性alt(图片不能显示显示的文字)、title(鼠标放图片提示文字)、width和height(设置图片的宽高)、border(设置边框粗细)超链接标签《a href=“跳转网址” targe
复制链接

扫一扫