패키지

HTML 기본 속성(Attributes) 본문

Client-Side/HTML,CSS,Javascript

HTML 기본 속성(Attributes)

업단업업 2017. 12. 6. 15:45


HTML ?

HTML 이란 Hyper Text Markup Language 의 약자로써 월드와이드웹 문서를 작성하는 Markup Language 입니다. HTML 은 여러 태그들로 구성되어 있으며 각 태그들을 사용하여 원하는 형태의 문서를 만들어 갈 수 있습니다. (구글)


* HTML Elements

An HTML element usually consists of a star tag and end tag, with the content inserted in between

<tagname>Content </tagname>

 Strat tag

Element content 

End tag 

 <h1>

test element heading 

</h1>

 <br>

indicates a line break.

 

HTML elements with no content are called empty elements. ex) <br>

- The <html> element defines the whole document.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
 
<h1>Test Heading</h1> --> <h1> element defines a heading
<p>My first paragraph.</p> --> start tag <h1> and and end tag</h1>
  --> The element content is : Test Heading
</body>
</html>
c                                                                 s

- The <body> element defines the document body.

1
2
3
4
5
6
<body>
 
<h1>My First Heading</h1>
<p>My first paragraph.</p>
 
</body>
cs



* HTML Attributes

1) All HTML elements can have attributes

2) Attributes provide additional information about an element

3) Attributes are always specified in the start tag

4) Attributes usually come in name/value pairs like: name="value"


ex) 

HTML에서 링크는 <a>태그에서 정의된다. 

주소링크는 href 속성에서 지정된다.

HTML에서 이미지는 <img>태그에서 정의된다.

이미지의 파일 소스는 scr 속성에서 지정된다.

 Attribute 

Description

disabled 

specifies that an input element should be disabled 

 href

URL for a link  

ex) <a href="https://www.w3schools.com">This is a link</a>

id

Specifies a unique id for an element.

The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

 scr

Specifies the URL for an image 

ex) <img src="img_girl.jpg">

 style

Specifies an inline CSS style for for an element.

컬러나 폰트크기 등의 element의 스타일을 지정하는 속성.



HTML Input Types

<input type="text">

one-line text input field 

<input type="submit"> 

submitting form data to a form-handler.(The form-handler is specified in the form's action attributes:) 

 <input type="radio">

defines a radio button. 

Radio buttons let a user select ONLY ONE of a limited number of choices:

 <input type="checkbox">

ZERO or MORE options of a limited number of choices.

 <input type="button">

<input type="button" onclick="alert('Test!!')" value="Click here!!!!"> 

Input Restrictions : disabled(비활성화), maxlength, pattern, readonly, size, value



* HTML Input Attributes

 The value Attribute

<input type="text" name="firstname" value="wkim"

 The readonly Attribute

<input type="text" readonly

 The size Attribute

<input type="text" size="40">

 The form Attribute


The form attibute specifies one or more forms an <input> element belongs to

<form action="" id="form1">

Test : <input type="text" name="textname"><br>

<inpuy type="submit" value="Submit">

</form>

 The height and width Attributes

specify the height and width of an <input type="image"> element. 

 The list Attribute

The list attribute refers to a <datalist> element that contains pro-defined options for an <input> element.

1
2
3
4
5
6
7
<input list="listTest">
 
<datalist id="listTest">
     <option value="test01">
     <option value="test02">
     <option value="test03">
</datalist>

c


 

 


*  요약

 Tag

Description 

<form> 

input user를 위한 HTML form 

<input> 

input control 





참조 : www.w3schools.com

Comments