HTML 101 HTML n HTML is a

HTML 101

HTML n HTML is a standard l Maintained by a u nonprofit, u international organization u participated by many IT companies l W 3. org

HTML n Simple l Just markups and plaintext n Readable by human l Use plain text l Editable by Notepad n Verbose l Readable and friendly to human l Leave the chore to computer l Good!!!

HTML Versions n Now comes HTML 4. 0 and XHTML l Strict syntax as XML l Lowercase tags l About content, not format, which is designated to css n HTML 5. 0 l Canvas l…

The file extension n. html n. htm

n Editable by l Notepad l dream. Weaver l Visual Studio l… n Browsable by l Ie l Opera l Chrone l…

HTML Syntax

HTML文档基本结构

HTML Tag Basics Start tag End tag Hello World Tags “mark up” the HTML document. The tags are read and interpreted by the browser - but not shown. A self closing tag does not need a corresponding end tag. Attribute Self-closing tag

ML--Element n The start tag and end tag must be paired; note the slash There are elements /texts between the start tag and end tag

ML--Element We have rules regarding the element name and what content it holds You must use specified element name and cannot create your own element The element name is lowercase, generally

ML--Element For element with no content, the start tag and end tag are collapsed into one like

婚否 婚否 Attributes 姓名: 婚否 l Separated by at least one whitespace l Value must be quoted by double quotes l A property can have no value l Same Property name doesn’t occur twice l Attribute identifier contains no special chars such as =, ”, etc.

HTML标记 lower case n Tag/ Attribute l 一般小写

婚否 婚否 ML--Content 姓名: 婚否 n In the starting note and ending note is the content, including other tags and/or plain texts

婚" src="https://present5.com/presentation/164c881d7385c3c5eb0ba901b4461fee/image-17.jpg" alt="ML--Content 姓 名 : 婚" /> ML--Content 姓 名 : 婚 否 Redundant space and carriage enter are ignored n Note the space before, in and after “姓 名: ” n Note the newline in “婚否” is displayed as whitespace n If you want to insert some whitespace, or other special chars, such >, you have to…see next slide

Escape Special Chars

Escape Special chars • Å vs å • Entity name , case sensitive • A Ӓ å • Entity number , decimal •  5 • Entity number, hexadecimal, case insensitive 姓名: 婚否?
请朗读以下字符： Å å A Ӓ å  5; &#x. E 5; & < > "  

How to display a world map with only one character

û

Edit HTML

Good habit to code ML-Indent l Start and end at the same indent position l Content needs a unit of indent. l Use tab … … Help you debug

ML Coding—outline first n Write the outlying pair (tags, quotes, braces, etc) first, then insert its content. E. g ”” “…” Make the code syntactically right always Help debug Lest that the latter part be forgotten

tools n Notepad n Visual Studio n Dream. Weaver n Word, excel, … n…

debug n Fire. Bug n Browser l Press F 12 in new versions of IE

Validating HTML n To validate a web page, you can use the online validator n Paste, or upload the HTML or use a URL n http: //validator. w 3. org Source: W 3 C http: //validator. w 3. org/check

HTML Tags

Comment n n If you want to delete some contents temporally, you can comment it out.

HTML常用标记 in head Basic Form" src="https://present5.com/presentation/164c881d7385c3c5eb0ba901b4461fee/image-79.jpg" alt="A Basic Form Basic Form" /> A Basic Form Basic Form

Processing Forms n Once a form is submitted, it is sent to a specific program on the server. n

iframe 用于在网页中嵌入另一个 网页 ……

Attributes

Global n Id n Title n Lang and xml: lang n Translate n Xml: base(xml only) n Dir n Class n Style

lang n specifies the primary language l for the element's contents and l for any of the element's attributes that contain text. n Its value must be a valid BCP 47 language tag, l en l zh l… l or the empty string. u the primary language is unknown.

translate n The attribute's keywords are l the empty string, l yes, and l no. n

type l start. n The game will start

dir n The dir attribute specifies the element's text directionality. l ltr l rtl l auto

data-* n Embedding custom non-visible data with the attributes n Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

data-* n naming l no namespace l has at least one character after the hyphen l contains no characters in the range U+0041 to U+005 A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z). u All attributes on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.

e. g n a site about music could annotate list items representing tracks in an album with custom data attributes containing the length of each track. T l his information could then be used by the site itself to allow the user to sort the list by track length, or to filter the list for tracks of certain lengths. n

1. Beyond The Sea
. . .

n element. Dataset l Returns a DOMString. Map object for the element's data -* attributes. n Hyphenated names become camel-cased. For example, data-foo-bar="" becomes element. dataset. foo. Bar

l l n

l

u Fire l n