Getting started with basic html

html refers to a html file, which is composed of various label
html into <! DOCTYPE html> and Head and Body

  1. Head title+meta+link+style
  2. Body elements + script tag

Label elements, called nodes dom-node, node labels, where all the elements in his name for js

The most commonly used label elements course div
Then there is a, p, span, img, table label, the label form, button button

  1. There table tag table, thead, tbody, tr, th, td
  2. Form labels form, input (input box, password box, radio, checkbox, drop-down box, textarea, submit submit)

Tag has attributes and methods of triggering conditions

Unique labels 属性attr, each attribute has a specific function, a specific html tags
such as a tag and of the href link, a tag and a target, value script and img of the src, form labels, Disabled, multiple choice radio is checked, select the selected etc., etc.

Tags can also customize properties, is to write what attributes the label, all right, does not affect the use of labels, used to record data, such as this-id = "", data-id = "", aa = "", bb = "" .... but the most comprehensible and will not be the next maintainer BS-ing is certainly data-xx = ""

怎么取得自定义属性,或者自带属性的值在js里讲

The label also given 方法, for example, to click on the condition div binding method

<div onclick="say()">点击我执行js的say方法</div>

You can also write directly inline method

<div onclick="alert(1111)">点击我执行alert方法</div>

The trigger condition is the label that comes, not to add the label method of triggering conditions is not performed, such as radio, checkbox, drop-down boxes, file selection box has onchange trigger condition, form has a submit trigger condition, the input box the cursor is moved out of the keyboard by pressing the trigger condition, but no div, so to add a div when the onchange to execute say, will not say how the execution of

Label elements are divided into block elements, inline elements

  1. Automatic block elements is the width of the parent element is filled, and the height by the sub-elements of distraction can be varied by css width and height, with the another element with one row would themselves, their own wrap, wrap the next squeeze, natural block elements have div, p, and the semantic tag html5
  2. Inline elements is a row can have multiple elements, their width and height are made of sub-elements distraction, set the width and height are not in force, within the natural line elements have a span, button, form tag, img
    and any label element it can change with the css display, as long as they remember the characteristics of the line

Understand talk about labels

  1. Talk about a tag, a label is attached to a jump, if not used on the other;
  2. Talk about the img tag, img tags in a large enough area, the displayed picture of their original size, only the width to 100% will fill the width of the area, by its own height ratio change can be set only height, so the width of the image by changing the ratio, the width and height may be provided at the same time, but will result in a distorted image, it is generally only the width set to 100%, by changing the width of the parent tag img img width control tags;
  3. Some tags talk abandoned, font, color, time, do not use these tags, although very semantic but do not use, do not explain;
  4. Talk about form, form is very old and the way to submit data to the server, with the exception submissions will never use the submission from the way there [at the time of press the Enter key sub-elements only one input box, press the form tag where the submit button label or tag], and form submission will lead to a jump page, of course, prevent the form is there a way to jump, 阻止form提交会在js的上传文件的几种方式里讲I want to say is not to be used in addition to the file upload form, do not use the form, do not with form;
  5. Talk about the input [type = submit] and button, two labels can usually when the button is used to trigger an event in the form tag, and it comes with two labels styles, ugly style, had to be removed manually, so can not use do not use, to replace them with a span of use

html In fact, nothing to talk about, because the only entry-div

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>第一个页面</title>
  <link rel="stylesheet" href="">
</head>
<body>
  <div>
    <p>Hello Word</p>
    <img src="" alt="">
  </div>
  <script type="text/javascript">

  </script>
</body>
</html>

Guess you like

Origin www.cnblogs.com/pengdt/p/12037434.html