Front-end knowledge checking and filling in gaps (1)_html/css_WEB-ITnose

As a small front-end siege division, what has been particularly difficult recently is that the foundation is not solid. Therefore, I decided to change my past mistakes, review my knowledge again, and lay a solid foundation for myself. This article is purely a review of my missed knowledge points. If anyone is willing to read it, feel free to read it ~ I don’t charge any money anyway ~ Haha!

The first module: HTML

(1) HTML link - name attribute

The name attribute specifies the name of the anchor.

We can use the name attribute to create bookmarks in HTML pages.

The bookmark is not displayed in any special way and is invisible to the reader.

When using named anchors, we can create links that jump directly to the named anchor (such as a section on the page), so users don’t have to scroll the page to find what they need. information.

Example (meow(>^ω^<)~Give me a small example!):

Click me to jump~

Jump here Come on!

The code is as follows:

<a href="#tips">点我跳转啊~</a><a name="tips">跳转到这里来咯！</a>

Tip: The name of the anchor can be anything you like.

Tip: You can use the id attribute instead of the name attribute. Named anchors also work.

Note: Always add forward slashes to subfolders. If the link is written like this: href="http://www.w3school.com.cn/html", two HTTP requests will be generated to the server. This is because the server will add a forward slash to the address and then create a new request, like this: href="http://www.w3school.com.cn/html/".

Tip: Named anchors are often used to create a table of contents at the beginning of large documents. You can give each chapter a named anchor, and then place links to these anchors at the top of the document. If you frequently visit Baidu Encyclopedia, you will find that almost every entry in it uses this navigation method.

Tip: If the browser cannot find a defined named anchor, it will navigate to the top of the document. No errors will occur.

(2) HTML5 global attributes

	Definition and usage	Value	Description	IE	FireFox	Chrome	Safari	Opera
contenteditable	Specifies whether the element content is editable	true|false	Specifies whether the element can be edited / Not editable	Y	Y	Y	Y	Y
contextmenu	Provisions The element's context menu. When the user right-clicks on an element, a context menu appears.	menu_id	The id of the element to be opened	N	Y	N	N	N
data-*	Used to store private customizations for a page or application Data gives us the ability to embed custom data attributes on all HTML elements The stored (custom) data can be used in the JavaScript of the page, to create Better user experience (no Ajax calls or server-side database queries)	somevalue	Specifies the value of the attribute (as a string)	Y	Y	Y	Y	Y
draggable	Specifies whether the element is draggable Drag	true|false|auto	specifies the draggability of the element| specifies Elements are not draggable | Use browser default behavior	Y	Y	Y	Y	Y
dropzone	Specifies whether to copy, move or link the dragged data when dragging data on an element	copy|move|link	Dragging data will produce a copy of the dragged data| Dragging data will cause the dragged data to be moved to a new location| Dragging the data will generate a link to the original data	Y	Y	Y	Y	Y
hidden	The hidden attribute is a Boolean attribute. If this attribute is set, it specifies that the element is still or no longer relevant			N	Y	Y	Y	Y
spellcheck	规定是否对元素进行拼写和语法检查	true|false	对元素进行拼写和语法检查| 不检查元素	IE10+	Y	Y	Y	Y

(3)HTML5表单属性 - list

　　list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

　　注释：list 属性适用于以下类型的 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。

Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3Schools" value="http://www.w3school.com.cn" /><option label="Google" value="http://www.google.com" /><option label="Microsoft" value="http://www.microsoft.com" /></datalist>