码迷,mamicode.com
首页 > Web开发 > 详细

html基础-标签

时间:2019-07-01 20:15:15      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:less   文本域   用户   NPU   服务器   tip   lang   eth   button   

html 页面跟标签:<html 页面跟标签lang=‘zh’告诉浏览器页面语言为中文></html>

head 头标签:页面编码、页面标签标题、页面样式、页面脚本

<head>
    <!--页面编码-->
    <meta charset="utf-8">
    <!--页面标签标题-->
    <tItlE>标签</tItlE>
    <!--页面样式-->
    <style></style>
    <!--页面脚本-->
    <script></script>
</head>

body 体标签 :页面内容、页面脚本,用于内容显示的标签全部书写在body中

 标题:h1~h6

<h1 id="top">一级标题</h1> <!-- 一般一个页面只出现一次,代表该页面的主内容解释 -->
<h2>二级标题</h2>
<h6>六级标题</h6>

段落p标签:<p>段落</p>

    文本相关:一般会被p标签嵌套

加粗标签b:

<b>加粗标签</b>

    效果:加粗标签

以加粗方式强调的标签:strong

<strong>以加粗方式强调的标签</strong>

    效果:以加粗方式强调的标签

斜体标签:i

<i>斜体标签</i>

    效果:斜体标签

以斜体方式强调的标签:em

<em>以斜体方式强调的标签</em>

    效果:以斜体方式强调的标签

上角标、下角标:sup、sub

<sup>上角标</sup>
<sub>下角标</sub>

    效果:上角标 下角标

功能标签

换行:<br />

分割线:<hr>

超链接:<a href="域名" target="_self">用户看到的</a>

  例:<a href="https://www.baidu.com" target="_self">前往百度</a>

  ps:target="_self"表示在当前页面打开,target="_blank"在新页面打开

图片标签:< img src:图片源  alt:资源加载失败的文本提示 title:鼠标悬浮的文本提示 >

  例:<img title="你是它" alt="二哈" src="https://ss3.bdstatic.com  /70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1925405117,207445978&fm=26&gp=0.jpg">
组合标签

列表:

  无序列表ul:

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>
效果:
  • 列表项
  • 列表项
  • 列表项

  有序列表:ol

<ol>
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</li>
</ol>
效果:
    1.第1项
    2.第2项
    3.第3项

表格标签

tr: 行  th: 标题单元格  td:内容单元格 cellpadding:单元格内部间距  cellspacing:单元格间的间距

<table border="1" width="500" height="300" cellpadding="10" cellspacing="0">
    <thead>
        <tr >
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>

效果:

标题标题标题
单元格 单元格 单元格
<table border="1" width="500" height="300" cellpadding="10" cellspacing="0">
    <thead>
        <tr style="height: 50px">  限制标题框行高
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td colspan="2">单元格</td> 行合并单元格
            <!--<td>单元格</td>-->
            <td rowspan="2">单元格</td> 列合并单元格
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <!--<td>单元格</td>-->
        </tr>
    </tbody>

效果:

标题标题标题
单元格 单元格 单元格
单元格 单元格
单元格 单元格

 

表单标签: 完成前后台交互的 - 将前台用户输入的内容提交给后台

form  action:提交后台的接口地址  method:提交方式 get 、post

在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:get 和 post

GET - 从指定的资源请求数据

POST - 向指定的资源提交要被处理的数据

GET 方法

注意查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:

例如:file:///G:/study/7.1/01.html?user=213123&sex=on&cless=on&like=m&like=f

POST 方法

注意查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的:

POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

 input:name明确才会往后台提交,name是键,value是值(可以手动规定也可以用户输入)
<form action="" method="">
    <input type="text" name="user" placeholder="文本占位符">
    <input type="password">
    <input type="color">
    <input type="number">
    <!--提交文件-->
    <input type="file">

效果:技术图片

单选框:radio

<input type="radio" name="sex" checked> checked为默认选项<input type="radio" name="sex">
一班<input type="radio" name="cless">
二班<input type="radio" name="cless" checked>

效果:技术图片

复选框:checkbox

 

<input type="checkbox" value="m" name="like" checked><input type="checkbox" value="f" name="like" checked>
人妖<input type="checkbox" value="mf" name="like">

效果:技术图片

选择列表 :multiple

 

  <select name="subject" multiple>
        <option value="chinese">语文</option>
        <option value="math">数学</option>
        <option value="python">python</option>
    </select>

效果:技术图片

 

 文本域:textarea

<textarea>填充文本</textarea>

效果:技术图片

三个按钮

<button type="button">按钮</button>
<button type="reset">重置</button>
<button type="submit">提交</button>
<input type="submit" value="登陆">

效果:技术图片

 

html基础-标签

标签:less   文本域   用户   NPU   服务器   tip   lang   eth   button   

原文地址:https://www.cnblogs.com/duGD/p/11116243.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!