码迷,mamicode.com
首页 > 其他好文 > 详细

01 前端篇(标签)

时间:2019-02-02 18:57:42      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:block   checkbox   不能   表示   style   link   第一章   结束   sel   

HTML

  • 标签:

是由一对尖括号包裹的单词构成

标签不区分大小写

标签分为两部分,开始标签和结束标签 <a></a>

自闭和标签 <br/><hr/><inpt/><img/>

标签可以嵌套,但不能交叉嵌套

所有标签统分为块级标签和内联标签

  • 标签的属性

一组键值对

只能出现在开始标签,自闭和标签

属性名全部小写,属性值必须使用单引号或双引号包裹  name = lily

如果属性名和属性值完全一样,则直接写属性名即可。如 readonly

  •  <!DOCTYPE html> :告诉浏览器以哪种规范
  • head 标签:

<meta>:自闭和标签。 http-requivcontentURL name

    name:主要用于描述网页。   keywordsdescription

    http-equivrefreshcontent-TypeX-UA-Compatible

<title></title>:标题

<link>:自闭和标签   rel=”icon” href = “jd.ico”  图标

  • body标签:

<h1></h1>:从 1 6 ;块级标签

<p></p>:段落。换行+隔行; 块级标签

<br/>:换行

<hr/>:水平线

<b></b>:给自己加粗

<em></em>:变成斜体

<strike></strike>:去除。

<del></del>:去除

2<sub>3</sub>:下角标

2<sup>3</sup>:上角标

& nbsp; :表示一个空格

& copy;:版权符号

& lt; :< 符号

& gt; : > 符号

<img src=”1.jpg”  width=”200px” height=”200px” alt=”hehe” title=”girl”>:自闭和标签,内联标签   alt 是加载失败时显示的内容

<a href=”http://www.baidu.com” target=”_blank” title=”hehe”>百度</a>1. 超链接 2. (#id)

 

<div></div>:没有特殊的处理,控制一块。  和<p></p>区别是没有隔行

<span></span>:内联标签

块级标签(block):自己独占一行,即使没有填满。

内联标签(in-line):和其它元素位于同一行,占的地方取决于文本

 

  • 列表标签:

<ul></ul>  <li></li>unordered list 无序列表

<ol></ol>  <li></li>:有序列表

<dl></dl>  <dt></dt> <dd></dd>

 

  • 表格标签:<table border=1> : <tr>: <td> <th> 合并单元格 rowspan colspan
  • 表单标签:<form>

    表单用于向服务器传输数据

    表单属性:

        method get1.提交的键值对放在url 后面2. 安全性相对较差3. 对提交内容有长度限制  ; post1.提交键值对不在地址栏 2. 安全性相对较高 3. 提交内容长度理论上无限制

        action:表单提交到哪里

    表单元素:

       1.  <input>:自闭和标签。 typevaluename

       2.  <select></select> namemultiplesize

              <optgroup label=””></optgroup>

              <option value=””></option>

        3. <textarea></textarea>

       4.  <label for=”www”></label> <input id=”www” type=”text”> label input进行一个关联

 

div:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
    <style>
        div{
            color: #cc3399;
            background-color: cadetblue;
        }
        span{
            color: green;
            background-color: pink;
        }
        #div1{
            color: antiquewhite;
            height: 500px;
            background-color: #cc3399;
        }
        #div2{
            height: 500px;
            background-color: pink;
        }
        #div3{
            height: 500px;
            background-color: yellow;
        }
    </style>
</head>
<body>
hello world
<h1>hello world</h1>
<p>hello world</p>
<!--<div style="color: yellow">hello div</div>-->
hello before<div>hello div</div>hello after
<span>hello span</span>
<b>加粗</b>
<em>斜体</em>
<strike>不建议使用的 strike </strike>
<del>delete</del>
<br>
2<sub>3</sub>
2<sup>3</sup>
hello&nbsp;&nbsp;&nbsp;world   &copy;&lt;h1&gt;
<img src="1.jpg" width="200px" height="200px" alt="hehe" title="girl">
<a href="http://www.baidu.com" target="_blank">百度</a>
<br>
<div id="div_top">top</div>
<a href="#div1">第一章</a>
<a href="#div2">第二章</a>
<a href="#div3">第三章</a>

<div id="div1">第一章</div><a href="#div_top">返回</a>
<div id="div2">第二章</div><a href="#div_top">返回</a>
<div id="div3">第三章</div><a href="#div_top">返回</a>
</body>
</html>

 

 

form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
<form action="127.0.0.1:8090/index" method="get">
    <p>姓名:<input type="text" name="username"></p>
    <p>密码:<input type="password" name="password"></p>

    <p><input type="submit" value="submit"></p>
    <p><input type="button" value="button"></p>

    <p>hobby: basketball<input type="checkbox" name="hobby" value="1"></p>
    <p>hobby: volleyball<input type="checkbox" name="hobby" value="2"></p>

    <p>male<input type="radio" name="sex" value="0"></p>
    <p>female<input type="radio" name="sex" value="1"></p>

    <p>upload<input type="file"></p>
</form>
</body>
</html>

list:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list</title>
</head>
<body>
<ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ul>

<ol>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
</ol>

<dl>
    <dt>第一章</dt>
    <dd>lalala</dd>
    <dd>lalala</dd>
    <dd>lalala</dd>
    <dd>lalala</dd>
    <dt>第二章</dt>
    <dd>lalala</dd>
    <dd>lalala</dd>
    <dd>lalala</dd>
    <dd>lalala</dd>
    <dt>第三章</dt>
    <dd>lalala</dd>
    <dd>lalala</dd>
    <dd>lalala</dd>
    <dd>lalala</dd>
</dl>
</body>
</html>

 

 

01 前端篇(标签)

标签:block   checkbox   不能   表示   style   link   第一章   结束   sel   

原文地址:https://www.cnblogs.com/mlllily/p/10348838.html

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