Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTML, how, Bootstrap’s sizing utilities (for examle, <div class="…
HTML
basics
HTML
hyper text markup language
elements tell the browser how to display
elements label pieces of contents
heading
paragraph
link
....
a series of elements
str of a web page
element
结构上：<tagname>...</tagname>
not case sensitive, recommedn lowercase
XHTML必须用小写元素
<br> no content, no end tag, called empty elements.
linebreak
<html>...</html> 文件root element
<head>...</head> contains meta info of an html page
<title>...</title> contains a page title, displays in browser's title bar or tab
<!DOCTYPE html> 声明定义文件类型为HTML5文件
uppercase is optional
<body>...</body>定义文件主体
是一个容器，容纳所有可见内容，比如标题，段落，图片，表格，list
<h1>...</h1>定义大标题
<p>...</p>定义段落
<a href="https://www.w3schools.com">This is a link</a>
href 属性内容是链接
属性是丰富element的信息
<img src="w3schools.jpg" algt='w3schools.com' width ='104' height ='142>
注意没有end tag，没有内容，只有属性src定义source path
2 more items...
属性alt定义alternative text of img
2 more items...
h1-->h6
属性
非必要的
只能出现在start tag
出现的形态是name = value
举例
href, src, alt
style = 'color: red;'
add styles to eles: color, font, size, more,
<html lang="en"><html lang ="en-US">
lang属性表示网页语言(和国家）
<p title="I'm a tooltip">
1 more item...
case not sensitive，W3C推荐使用小写
XHTML必须用小写属性
推荐属性值使用quotes，根据需要使用‘’ 或者“”都可以
XHTML必须使用quotes属性值
web browsers
用途：read a html document and display them
不会显示tags，显示tag定义的格式
HTML page structure
<html><head><title>Page titgle</title></head><body><h1>This is a heading></h1><p>This is a paragraph</p><p>This is another para</p></body></html>
只有body中间的内容会被浏览器呈现
history
www--HTML---HTML+---HTML 2.0---HTML 3.2---HTML 5 since 2014--HTML 5.2 2017
呈现保留字符
Reserved characters in HTML must be replaced with character entities.
why: use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.
what: Character entities are used to display reserved characters in HTML.
&entity_name;
easy to remember...
举例
Some Useful HTML Character Entities
1 more item...
non-breaking space
&#entity_number;
widely support by browsers
呈现A diacritical mark
what: a "glyph" added to a letterpear (both above and below a letter, inside a letter, and between two letters)
举例
like grave ( ̀) and acute ( ́) are called accents.
àáâãÒ...
呈现symbols
what
Symbols that are not present on your keyboard
how
entity name or the entity number
€€€
呈现emojis
what:
characters from the UTF-8 character set: 😄 😍 💗
look like images, or icons, but they are not.
UTF-8 is a character encoding - a way of converting from sequences of bytes to sequences of characters and vice versa. It covers the whole of the Unicode character set.
UTF-8 is based on 8-bit code units. Each character is encoded as 1 to 4 bytes. The first 128 Unicode code points are encoded as 1 byte in UTF-8.
UTF-8 is capable of encoding all 1,112,064 valid character code points
目前最大的，几乎全部字符
how
<meta charset="UTF-8">
设置entity names/numbers搜所范围UTF-8charset（默认）
🗽😀
Uniform Resource Locators（URL）
what:
a web address(of a document (or other data) on the web); composed of words (e.g. w3schools.com), or an Internet Protocol (IP) address (e.g. 192.68.20.50).
how
scheme://prefix.domain:port/path/filename
scheme - defines the type of Internet service (most common is http or https)
prefix - defines a domain prefix (default for http is www)
？？？
domain - defines the Internet domain name (like w3schools.com)
port - defines the port number at the host (default for http is 80)
2 more items...
types
是否加密
http非加密
https加密
是否在本地
上下载文件
元素、属性其他特征
ele: headings
<h1 stype="font-size:60px;">
调整默认h1的大小,30px??
font-size是CSS的property
？？？？
ele: paragrph
显示的特征
<p></p>从新行开始，浏览器自动添加段前段后的margins
浏览器窗口大小是动态的，无法控制段落的呈现（空行，空格之类的全部被忽略）
换行显示
使用<hr>
empty tag
2.使用<br>
empty tag
3.使用<pre>...</pre>
以fixed width font（Courier）呈现，保留空行，空格）
att: style
语法：stype='property: value;'
property is a CSS property, value is a CSS value
???
background-color：somevalue
设置元素的背景色（所在行的背景色？？？？）
color:somevalue
设置元素的文本颜色
font-family:value
设置文本的font
font-size：value
text-align:value
1 more item...
ele：formatting
设置特殊文本
？？？？和style傻傻分不清
举例
<b> bold
<strong> bold
<i> italic
<em> italic
<smaller>
1 more item...
ele: quotations
<blockquote>设置段落引用格式(缩进）
<q> 设置short quotation（双引号）格式
<abbr title = "descrpiton for the abbr/acronym">abbr/acronym</abbr> 设置缩写格式（给以悬停说明）
title是全局悬停属性，悬停缩写处可以看见说明
<address>...</address>设置地址（斜体，前后margin为1行）格式
<cite>设置标题格式（为斜体）
<bdo dir="rtl">设置文字方向（为rtl,default shi ltf）
comments
help documnent src code
help debugging
hide inline content
语法<!-- comment -->
att value: colors
background-color:value
color:value
border:value
value can be in different types
predefined names are common
rgba can add alpha value
ele: hyperlinks
hyperlinks: click and jump to another document; mouse over will turn into a little hand
1.语法<a>content</a>
linked content
text常见
图片<img src=value alt=value style=value>
属性
href属性定义新文件URL
相对URL
绝对URL
href=“mailto:someemailaddress”
打开新文件：用户邮件program
href=‘#C4"
去C4所在位置
在C4文本处事先用id = “C4”属性设置bookmark
target属性定义where to open
“_blank”:新窗口打开
"_parent"
"_self", default, 同窗口打开
"_top"
title属性定义鼠标悬停时的tooltip文本
style属性
本身；点击；悬停；打开后
2.语法<button>content</button>
onclick属性
javascript????
设置事件及行为
CSS
全称：cascading style sheets
what: 塑造网页布局的格式？？
cascading: body（parent）的style将应用在child，如果不需要，可以给child另行设置style
parent-child（nested的元素都是child）？？？
style是太普遍了吗》
why： 同时控制多个网页的布局style
？？？？
how：
internal
在<head>中使用<style>
<head><style> body {background-color: powderblue;} h1 {color: blue;} elename {css property: css value;} </style></head>
external
使用<link>ele 链接到外部CSS file
最常见
可为多个网页使用
在<head>中使用L<link>
<head><link rel ="stylesheet" ref = "style.css"></head>
rel属性？
Specifies the relationship between a linked resource and the current document
style sheet 用text editor写，不能有html code，文件名以.css
改变css file，就可以改变所以引用它的网页
语法 body {background-color: powderblue;} h1 {color: blue;} elename {css property: css value;}。注意书写格式的可读性
inline
在html元素的strat tag属性style中
css properties
color
font-family
font-size
value格式：百分比；px
border
padding
设置文本和边框space
margin
1 more item...
value格式比如：2px solid powderblue
href
a full link
从外部调用
/...
从当前网站的html folder调用
无/
从当前网页所在folder调用
？？？？
更多元素
ele: link
Favicon
ele: table
A table in HTML consists of table cells inside rows and columns
Everything between <td> and </td> are the content of the table cell.
all sorts of HTML elements; text, images, lists, other tables, etc.
Each table row starts with a <tr> and end with a </tr> tag.
make sure that the number of cells are the same in each row.
<th> tag instead of the <td> tag:
cells to be headers
text in <th> elements are bold and centered
ele: image
ele：list
ele: iframe
ele: script
javascript
what
why: make html pages more dynamic and inteeractive
????
how:
基本语法
<script>...</script>
what:定义一个client-side script
？？？？
类型
包含statements
指向外部script file
用途
所有一般程序语言具备的结构+html属性（看成全局变量？？？）
1 more item...
<script>...</script><noscript>content</noscript>
defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support scripts
ele：code
define a piece of computer code(default monospace font)
ele：samp
define sample output(default monospace font)
ele: kbd
define keyboard inpu
ele:var
define a variable(italic)
元素类型
根据display value分类
inline
block
head类元素
不可见容器
<title>, <style>, <meta>, <link>, <script>, and <base>.
layout类元素
举例
layout技术
CSS float property
CSS flexbox
CSS framework
what: 快速布局
举例
W3.CSS
Bootstrap
4（2018,JQ），5（2021，JS）
应该有很多模板类型吧？？？
CSS grid
what: 布局是一切网页的基础，元素不是随心所欲铺陈的。。。
semantic元素
what: Semantic elements = elements with a meaning.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
与网页成分有关的语义元素
<section> element defines a section in a document.
A section is a thematic grouping of content, typically with a heading.
A web page could normally be split into sections for introduction, content, and contact information.
<article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.
举例：Forum posts Blog posts User comments Product cards Newspaper articles
you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.
<header> element represents a container for introductory content or a set of navigational links.
不是head！
one or more heading elements (<h1> - <h6>)， logo or icon ，authorship information
You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element
<footer> element defines a footer for a document or section.
authorship information， copyright information， contact information， sitemap， back to top links， related documents
<nav> element defines a set of navigation links.
<nav> element is intended only for major block of navigation links.
<aside> element defines some content aside from the content it is placed in (like a sidebar).
<figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
nested <figcaption> tag defines a caption for a <figure> element.
nested<img> element defines the actual image/illustration.
更多属性
class 属性
自定义属性<style> .name {css property:cssvalue; cssproperty...; }</style>
在element tag里 class=name
class name sensitive
和上面那个internal css；external css区别？
多个class？
id 属性
src属性
元素meta的属性
<meta name="viewport" content="width=device-width, initial-scale=1.0">
empty tag
设置viewport，使得网页随设备而自动调整大小
control the page's dimensions and scaling.
style属性
<img src="img_girl.jpg" style="width:100%;">
CSS width property is set to 100%, the image will be responsive and scale up and down:
can be scaled up to be larger than its original size.
max-width Property
A better solution
<h1 style="font-size:10vw">Hello World</h1>
Responsive Text Size
Media Queries
div elements below will display horizontally on large screens and stacked vertically on small screens:
style guide
Setting The Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Using Style Sheets
Use simple syntax for linking to style sheets (the type attribute is not necessary)
<link rel="stylesheet" href="styles.css">
Meta Data
<meta charset="UTF-8">
the character encoding <meta charset="charset"> should be defined as early as possible in an HTML document
ensure proper interpretation and correct search engine indexing
Never Skip the <title> Element
The contents of a page title is very important for search engine optimization (SEO)!
used by search engine algorithms to decide the order when listing pages in search results.
Add the lang Attribute
<html lang="en-us">
to declare the language of the Web page.
meant to assist search engines and browsers.
recommend using the <head> tag.
Browsers will add all elements before <body>, to a default <head> element.
Close Empty HTML Elements
If you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML.
Loading JavaScript in HTML
<script src="myscript.js">
Use simple syntax for loading external scripts (the type attribute is not necessary):
。。。
forms
what
used to collect user input. The user input is most often sent to a server for processing.
<form> element
is used to create an HTML form for user input:
a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. plus other elements
<label> tag defines a label for many form elements.
for attribute equal to the id attribute of the <input> element to bind them together.
<input> element can be displayed in many ways, depending on the type attribute.
type = "text"呈现单行文本输入field
other attributes
id
value（缺省框内值）
缺省宽度20字符
name？？？
each input field must have a name attribute to be submitted.
else，value of the input field will not be sent at all.
？？？
"radio"呈现一个radio button
let a user select ONE of a limited number of choices.
“checkbox”呈现一个复选框
et a user select ZERO or MORE options of a limited number of choices.
“submit”呈现一个submit button
for submitting the form data to a form-handler.
form-handler is typically a file on the server with a script for processing input data.
form-handler is specified in the form's action attribute.
"button"呈现一个可点击的button
<input type="color"> is used for input fields that should contain a color.
<input type="date"> is used for input fields that should contain a date.
min and max attributes to add restrictions to dates:
<input type="email"> is used for input fields that should contain an e-mail address.
:<input type="file"> defines a file-select field and a "Browse" button for file uploads.
<input type="hidden"> defines a hidden input field (not visible to a user).
???
A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.
ften stores what database record that needs to be updated when the form is submitted.
Do not use hidden inputs as a form of security!
<input type="month"> allows the user to select a month and year.
<input type="number"> defines a numeric input field.
<input type="number" id="quantity" name="quantity" min="1" max="5">
<input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100.
input type="search"> is used for search fields (a search field behaves like a regular text field).
<input type="tel"> is used for input fields that should contain a telephone number.
Type Url
Input Restrictions: attributes
checked Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
input restrictions
input attr
value attribute specifies an initial value for an input field:
readonly attribute specifies that an input field is read-only.
cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
？？？
he value of a read-only input field will be sent when submitting the form!
？？？
disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
灰化
size attribute specifies the visible width, in characters, of an input field.
efault value for size is 20.
maxlength attribute specifies the maximum number of characters allowed in an input field.
when a maxlength is set, the input field will not accept more than the specified number of characters.
does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.
min and max attributes specify the minimum and maximum values for an input field.
types: number, range, date, datetime-local, month, time and week.
multiple attribute specifies that the user is allowed to enter more than one value in an input field.
types: email, and file.
选中多个
pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted.
types: text, date, search, url, tel, email, and password.
Use the global title attribute to describe the pattern
placeholder attribute specifies a short hint that describes the expected value of an input field
types: text, search, url, tel, email, and password.
the short hint is displayed in the input field
required attribute specifies that an input field must be filled out before submitting the form.
types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
step attribute specifies the legal number intervals for an input field.
used together with the max and min attributes to create a range
types: number, range, date, datetime-local, month, time and week.
autofocus attribute specifies that an input field should automatically get focus when the page loads.
height and width attributes specify the height and width of an <input type="image"> element.
？？？
list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.
autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.
Input form* Attributes
form attribute specifies the form the <input> element belongs to.
value of this attribute must be equal to the id attribute of the <form> element it belongs to.
formaction attribute specifies the URL of the file that will process the input when the form is submitted.
overrides the action attribute of the <form> element.
types: submit and image.
formenctype attribute specifies how the form-data should be encoded when submitted (only for forms with method="post").
overrides the enctype attribute of the <form> element.
types: submit and image.
formmethod attribute defines the HTTP method for sending form-data to the action URL.
verrides the method attribute of the <form> element.
types: submit and image.
sent as URL variables (method="get") or as an HTTP post transaction (method="post").
formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
overrides the target attribute of the <form> element.
types: submit and image.
formnovalidate attribute specifies that an <input> element should not be validated when submitted.
overrides the novalidate attribute of the <form> element.
types: submit.
<select> element defines a drop-down list:
nested <option> elements defines an option that can be selected.
selected attribute
define a pre-selected option
size attribute
specify the number of visible values
multiple attribute
allow the user to select more than one value:
<textarea> element defines a multi-line input field (a text area):
1、语法<textarea name="message" rows="10" cols="30"> content</textarea>
rows attribute specifies the visible number of lines
cols attribute specifies the visible width of a text area.
2、语法<textarea name="message" style="width:200px; height:600px;">content</textarea>
use CSS
<button> element defines a clickable button:
<input type="button">????
Difference between <button type="submit"> and <input type="submit"> Both <button type="submit"> and <input type="submit"> display as buttons and cause the form data to be submitted to the server. The difference is that <button> can have content, whereas <input> cannot (it is a null element).
用法<button type="button" onclick="alert('Hello World!')">Click Me!</button>
Note: Always specify the type attribute for the button element. Different browsers may use different default types for the button element.
？？？难道还有其他type
<fieldset> element is used to group related data in a form.
<legend> element defines a caption for the <fieldset> element.
每个element都对应呈现形式
<datalist> element specifies a list of pre-defined options for an <input> element.
如果input的list属性被设置，要使用datalist ele + option ele设置list内容
<output> element represents the result of a calculation (like one performed by a script).
？？？
<form> attributes
action attribute
defines the action to be performed when the form is submitted.
target attribute
specifies where to display the response that is received after submitting the form.
method attribute
specifies the HTTP method to be used when submitting the form data.
sent as URL variables (with method="get")
default HTTP method
Appends the form data to the URL, in name/value pairs
NEVER use GET to send sensitive data!(the submitted form data is visible in the URL!)
The length of a URL is limited (2048 characters)
Useful for form submissions where a user wants to bookmark the result
???
GET is good for non-secure data, like query strings in Google
as HTTP post transaction (with method="post").
Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)
POST has no size limitations, and can be used to send large amounts of data.
Form submissions with POST cannot be bookmarked
????
Always use POST if the form data contains sensitive or personal information!
???
???
autocomplete attribute
specifies whether a form should have autocomplete on or off.
autocomplete is on, the browser automatically complete values based on values that the user has entered before.
novalidate attribute
specifies that the form-data (input) should not be validated when submitted.
graphics
media
APIs
references
how
Bootstrap’s sizing utilities (for examle, <div class="card h-200">).