Front-end development - HTML

HTML

HTML HTML

HTML features:

• Insensitive to line breaks and spaces
• Blank folding

1.1 HTML tags

Tags also called markers.

Label Type:

• 1. Double closing tag
• 2. Single closing tag

1.1.1 head tag

• meta tags provide basic meta-information website

  <meta charset="UTF-8">  <!--标签的属性：使用的编码—'utf-8'-->

• Title title display site

• link link resource files css, favicon

  <link rel="stylesheet" href="css/index.css">

• script script link js (JavaScript) file

  <script src="js/index.js">

• style inline style

1.1.2 body tag

1.1.2.1 title tag

h1 ~ h6 title tag

Example:

Heading 1

1.1.2.2 paragraph tag

p tags paragraph tag

<p>
    人们感动于老英雄淡泊名利无私奉献的精神，敬佩老党员一辈子深藏功名、坚守初心的境界大家纷纷表示。
</p>

& Nbsp; space character

1.1.2.3 Hyperlink Label

a (anchor anchor) hyperlink tag

• href :
  • Link to a new address
  • back to the top
  • Jump-mail
  • download file
• The title on the title mouseover
• style inline style
• target goal
  • The default is _self, open a new link in the current page
  • _blank opens a new link in a new blank page

<a href="https://www.apeland.cn" style="text-decoration:none;color:red; " title="小圆圈">小猿圈</a>
<!--text-decoration:none  去掉链接的下划线-->

<h6 id="top"></h6>
<a href="#top">回到顶部</a>  <--跳转到  id="top" 处-->

1.1.2.4 image tag img

• Picture resource src link address
• The title displayed when the mouse was suspended title
• style
• Alt title picture failed to load when displayed

<img src="images/timg.jpg" alt="校花" width="200" height="300"><- width image width, height Image Height ->

Pictures and hyperlinks can be combined with a + img:

<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A0%A1%E8%8A%B1&step_word=&hs=2&" title="美眉">
    <img src="images/timg.jpg" alt="校花" width="200">
</a>

1.1.2.5 font tags

<u> </u>Underlined
<b> </b>bold
<strong> </strong>bold
<em> </em>italic
<i> </i>italic

1.1.2.6 Special characters

•  : Space (non-breaking spacing, continue to play spaces)
• <: Number of less than (less than)
• >: No greater than (greater than)
• &:symbol&
• ":Double quotes
• ':apostrophe
• ©:copyright©
• ™:trademark™

1.1.2.7 List tab

• 1.ul unordered list tags

  ul — unordered list

  • It is a sub-label li

  • :( default type attribute filled circles)

    • square square
    • circle center

     <h3>我的teacher</h3>
        <ul type="square">
            <li>
                <a href="">小米手机</a>
            </li>
            <li>女神</li>
            <li>太白</li>
            <li>mjj</li>
            <li>江老板</li>
        </ul>

• 2.ol ordered list tag

  ol — ordered list

  • It is also a sub-label li
  • :( default type attribute 1,2,3 ......)
    • a
    • A
    • i
    • I
  • start property: location defining the beginning

  <h3>我的课程</h3>
  <ol type="i">
      <li>python</li>
      <li>web前端</li>
      <li>java</li>
      <li>linux</li>
  </ol>

1.1.2.8 table tags table

• th defined header
• tr definition table row
• td cell data definition table

<!--border 外边框，cellspacing外边框间的间隙，width宽度填充整个屏幕-->
<table border="1" cellspacing="0" width="100%">
    <tr>
        <td>id</td>
        <td>name</td>
        <td>age</td>
        <td>sex</td>
    </tr>
    <tr>
        <td>1</td>
        <td>沛齐</td>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

1.1.2.9 form tag form

<1.> form Form

• action action occurs when the custom form is submitted, submitted to the server handler address (IP, port); if it is an empty string, which represents the current address of the server

• method

  • Role: the way when submitting the form data definitions

  • Submission of:

    • get

      The default value, expressly submit data submitted is displayed on the address, security is low

      Submission of data is limited in size, up to 2KB

    • post

      Implicit Commit - Content submitted, will not be displayed on the address bar, safe

      No size limit

<2> form control classification

(1) .input group element

• Type 1.type control

  • single-line text input box text, plain text data entered by the user

    <p id="username">
        <input type="text" name="name" value="">
    </p>

  • password code block, the data in ciphertext input by the user

    <p id="password">
         <input type="password" name="pwd">
    </p>

  • radio radio button

    • Generating exclusive effect, provided the same name attribute value to each radio button
    • How selected by default, the radio button to add a checked attribute

    <p>
        <input type="radio" name="sex" checked = 'checked'>男
        <input type="radio" name="sex">女
    </p>

  • checkbox checkbox

    Add checked property is selected by default

    <p>
        <input type="checkbox" name="a" value="唱歌"> 唱歌
        <input type="checkbox" name="b" value="跳舞"> 跳舞
        <input type="checkbox" name="c" value="音乐"> 音乐
    </p>

  • file upload files used

    <input type="file">

  • datetime

  • submit immobilization function, responsible for submitting the table form control to the server - the submit button

    <!--默认为提交按钮-->
    <input type="submit">
    <--登录按钮-->
    <input type="submit" value="登录">

• Name 2.name control, the key submitted to the server's name

• Value 3.value control, key to the value of submitting server

(2) .select drop-down list: multiple

• Name name drop-down list

• Add checked property is selected by default

• option value

  <select name="fav" multiple>
      <option value="smoke">吃饭</option>
      <option value="drink" selected>睡觉</option> <!--默认选中项-->
      <option value="tangtou">打豆豆</option>
      <option value="tangtou">唱</option>
      <option value="tangtou">跳</option>
      <option value="tangtou">rup</option>
      <option value="tangtou">音乐</option>
      <option value="tangtou">烫头</option>
      <option value="tangtou">烫头</option>
  </select>

(3) .textarea tag

Text textarea tag defines multi-line input control.

Text area can hold an unlimited number of text, wherein the text font is a default font width (usually Courier).

Textarea predetermined size may be by rows and cols properties

• name
  value
• cols columns
• rows row

<textarea name="" id="" cols="30" rows="10"></textarea>

1.1.2.10 div tag

div (division: segmentation) called tag label cassette

div tag: the web page is divided into different logical areas independently

<div class="top_l">
    <a href="#">小米商城</a>|
    <a href="#">MIUI</a>|
    <a href="#">lot</a>
</div>

How to make the text is centered vertically and horizontally?

• Let line height to the height of the box model Vertical Centering
• Using text-align: center; a Text Center Horizontally

<style>
    div{
        width:200px;
        height: 60px;
        background-color: red;
        text-align:center;
        line-height: 60px;
    }
</style>
<div>
 wusir
</div>

1.1.2.11 span tag

span is: a small area of ​​the tag, without affecting the normal display of text, the style separately provided corresponding to

<div class="top_l">
    <a href="#">小米商城</a>
    <span class="sep">|</span>
    <a href="#">MIUI</a>
    <span class="sep">|</span>
    <a href="#">lot</a>
    <span class="sep">|</span>
    <a href="#">云服务</a>
</div>

<style>
    span.active{
        font-weight:bold;
    }
</style>
<p>
    <span class='active'>央视网消息</span>（新闻联播）：中共中央总书记、国家主席28日上午在北京人民大会堂亲切会见出席第九届世界华侨华人社团联谊大会和中华海外联谊会五届一次理事大会的全体代表，代表党中央、国务院向大家表示热烈欢迎和衷心祝贺，向世界各地华侨华人致以诚挚问候。
</p>

1.1.2.12 lable label

lable label: it is for properties with id attributes associated form controls

<form action="">
    <label for="username">用户名：</label>
    <input type="text" id="username">
    <label for="pwd">密码：</label>
    <input type="text" id="pwd">
</form>

1.1.2.13 br tag, hr tag

<br> Break tag

<hr> Dividing line tag

1.2 nesting of HTML tags

1. The block-level tag (also known as row-level tab)

• 1. Exclusive line
• 2. The width and height may be provided, if the width is not set, the default is the parent tag 100% of the width

Common block-level labels: h1 ~ h6, ul, ol, li, form, table, tr, p, div

2. inline tag (also called inline elements)

• 1. displayed in a row
• 2. Set the width and height can not, if you do not set the width and height, the default font size

Commonly used labels within line: b, strong, i, em, a, td, span

3. The inner row block tag

Row within the block fall within the row labels

• 1. displayed in a row
• 2. The width and height can be provided

Row within the block tags: input, img

4. In the page: inline-blocks and the row block is very useful

• We can change the rules to force through the display properties.
• Display display:
  • inline display inline
  • inline-block within the block display line
  • block display block

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: yellow;
        display: inline;
    }
    a{
        width: 100px;
        height: 40px;
        background-color: red;
        /*显示方式： block 显示块，inline 显示行内  inline-block 显示行内块*/
        display: inline-block;
        /*文本排列方式：left-靠左 center-居中 right-靠右*/
        text-align: center;
        /*行高：一行的高度。当行高=盒子模型的高度 实现垂直居中*/
        line-height: 40px;
        /*文本修饰：none-无修饰(去除下划线)，underline-下划线 ，line-through 删除线 ，over line-上划线*/
        text-decoration: underline;
        color: #333333;
    }
</style>
<body>
    <p class="box">wusir</p>
    <a href="">百度一下</a>
    <del>aaaaa</del>  /*删除线*/
</body>

5. nesting relationship:

• 1. tags can be nested within the block-level and block level and the row lines within the block
• 2. Run the tag so as not to block-level nesting
• 3.p labels do not nested div, and do not nested p, can nest a / img / form control