教程

Using Emojis in HTML What are Emojis? Emojis look like images, but they are not. Emojis are letters (characters) from the UTF-8 (Unicode) character set: 😄 😍 💗 UTF-8 covers almost all of the characters and symbols in the world. Emoji Value 🗻🗻🗼🗼🗽🗽🗾🗾🗿🗿😀😀😁😁😂😂😃😃😄😄😅😅 HTML Emojis Examples Smileys 😀 😂 😊 😎 😜 Hands ✌ ✊ ☝ ✋ 👌 People 👮 🧕 👦 💏 🤴 Office 📈 💻 📌 📆 📒 Places ⛺ 🌋 🗽 🗿 🏢 Transport 🚈 🚗 🚢 🚌 🚀 Animals 🐴 🐕 🐘 🐻 🐞 Food ☕ 🌭 🍞 🍩 🍣 Plants 🌴 🌳 🌼 🍁 🥑 Fruits 🍇 🍊 🍏 🥝 🥥 Sports ⚽ 🏆 🤿 🏋 ⛳ Ea…

HTML Symbols HTML Symbol Entities Symbols or letters that are not present on your keyboard can be added to HTML using entities. To add such symbols to an HTML page, you can use the entity name or the entity number (a decimal or a hexadecimal reference) for the symbol: Example Display the euro sign: <p>I will display &euro;</p> <p>I will display &#8364;</p> <p>I will display &#x20AC;</p> Will display as: I will display € I will display € I will display € Some HTML Symbol Entities Char Number Entity Description © &#169; &copy; COPYRIGHT ® &#174; &reg; REGISTERED TRADEMARK …

HTML Entities Reserved characters in HTML must be replaced with entities: < (less than) = &lt; > (greater than) = &gt; HTML Character Entities Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your HTML text, the browser might mix them with tags. Entity names or entity numbers can be used to display reserved HTML characters. Entity names look like this: &entity_name; Entity numbers look like this: &#entity_number; To display a less than sign (<) we must write: &lt; or &#60; Entity names are easier to remember than entity numbers. Non-breaking Space A commonly u…

HTML Tutorial Learn HTML HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn - You will enjoy it! HTML Tutorial Study our HTML Tutorial for free, no registration needed. Learn HTML Now » OR HTML Course + Certificate Upgrade your learning with our interactive HTML Course and Get Certified. Upgrade to our HTML Course 🏁 Tip: Sign in to track your progress. Learning by Examples With our "Try it Yourself" editor, you can edit the HTML code and view the result in the browser:…

HTML Semantic Elements Semantic elements = elements with a meaning. What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <img>, <table>, and <article> - Clearly defines its content. Semantic Elements in HTML Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer. In HTML there are several semantic elements that can be used to define different parts of a we…

HTML Computer Code Elements HTML contains several elements for defining user input and computer code. Example <code> x = 5; y = 6; z = x + y; </code> HTML <kbd> For Keyboard Input The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font. Example Define some text as keyboard input in a document: <p>Save the document by pressing <kbd>Ctrl + S</kbd></p> Result: Save the document by pressing Ctrl + S HTML <samp> For Program Output The HTML <samp> element is used to define sample output from a computer program. The c…

HTML Responsive Web Design Responsive web design is about creating web pages that look good on all devices! A responsive web design will automatically adjust for different screen sizes and viewports. What is Responsive Web Design? Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones): Try it Yourself » Setting The Viewport To create a responsive website, add the following <meta> tag to all your web pages: Example <meta name="viewport" content="width=device-width, initial-scale=1.0"> This will set the viewport of…

HTML Layout Elements and Techniques Websites often display content in multiple columns (like a magazine or a newspaper). Example Cities London Paris Tokyo London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. Footer HTML Layout Elements HTML has several semantic elements that define the different parts of a web page: <h…

HTML - The Head Element The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>. The HTML <head> Element The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document. Metadata is not displayed on the page. Metadata typically define the document title, character set, styles, scripts, and other meta information. The HTML <title> Element The <title> element defines the title of the document. The title must be text…

HTML File Paths A file path describes the location of a file in a web site's folder structure. File Path Examples PathDescription <img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the current page <img src="images/picture.jpg"> The "picture.jpg" file is located in the images folder in the current folder <img src="/images/picture.jpg"> The "picture.jpg" file is located in the images folder at the root of the current web <img src="../picture.jpg"> The "picture.jpg" file is located in the folder one level up from the current folder HTML File Paths A file path describes the location of a file in a web site…

HTML JavaScript JavaScript makes HTML pages more dynamic and interactive. Example My First JavaScript Click me to display Date and Time The HTML <script> Tag The HTML <script> tag is used to define a client-side script (JavaScript). The <script> element either contains script statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. To select an HTML element, JavaScript most often uses the document.getElementById() method. This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo": E…

HTML Iframes An HTML iframe is used to display a web page within a web page. HTML Iframe Syntax The HTML <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. Syntax <iframe src="url" title="description"></iframe> Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is. Iframe - Set Height and Width Use the height and width attributes to specify the size of the iframe. The height and width are specified in pixels by default: Example <iframe src="demo…

HTML Buttons Buttons let users interact with a web page. They can submit forms, run JavaScript, or trigger different actions when clicked. HTML Button The HTML <button> element defines a clickable button. By itself, the button does nothing until you add an action to it. Example <button>Click Me</button> Styling HTML Buttons Buttons are often styled with CSS: Example <button class="mytestbtn">Green Button</button> Disabled Buttons Use the disabled attribute to make a button unclickable: Example <button disabled>Disabled Button</button> Tip: Disabled buttons cannot be clicked and usually a…

HTML id Attribute The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document. The id Attribute The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id. The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}. In the following example we have an <h1&gt…