Share an integration of HTML knowledge points

The following editor will bring you a summary of front-end HTML knowledge points (recommended). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look

1. Overview of html

htyper text markup language Hypertext Markup Language

Hypertext: It means that the page can contain pictures, links, and even non-text elements such as music and programs.

Markup language: A language composed of tags (tags).

Web page==HTML document, parsed by the browser, used for display

StaticWeb page: Static resources, such as xxx.html

Dynamic web page: The html code is dynamically generated by a certain development language based on user requests

The following For the tree structure diagram of the html file

The concept of tags:

• is wrapped by a pair of angle brackets For example: 100db36a723c770d327fc0aef2ce13b1 *Words in all tags cannot start with a number.

•Tags are not case-sensitive.100db36a723c770d327fc0aef2ce13b1 and 6a74014ee44f5deb5894267f99b68016. It is recommended to use lowercase.

•The tag is divided into two parts: the start tag 3499910bf9dac5ae3c52d5ede7383485 and the end tag 5db79b134e9f6b82c0b36e0489ee08ed. The part between the two tags is called the tag body.

•Some tag functions are relatively simple .Just use a tag. This kind of tag is called a self-closing sum tag. For example: 076402276aae5dbec7f672f8f4e5cc81 fa8fd94cc4b4d9671e4ee513ae2a31d1 73a3ca28445b1c625f2086a50cb8c7df 6ed09268cbdd0015bce8dcbbdfa9bfe4

·tag Can be nested. But not cross-nested. 3499910bf9dac5ae3c52d5ede7383485a4b561c25d9afb9ac8dc4d70affff4195db79b134e9f6b82c0b36e0489ee08ed0d36329ec37a2cc24d42c7229b69747a

attribute of the tag:

•Usually appears in the form of key-value pairs. For example, name="alex"

•Attributes can only appear in the opening tag or self-closing tag.

•Attribute names are all lowercase. *Attribute values ​​must be wrapped in double quotes or single quotes, such as name="alex"

•If the attribute value is exactly the same as the attribute name, just write the attribute name directly. For example, readonly

2. headIntroduction to the main tags

##•e8e496c15ba93d81f6ea4fe5f55a2244The composition of the meta tag: the meta tag has two attributes. , they are http-equiv attribute and name attribute respectively. Different attributes have different parameter values. These different parameter values ​​realize different web page functions.

1 The name attribute is mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly used to facilitate
search engine robots to find information and classify information.

<meta name="keywords"content="meta总结,html meta,meta属性,meta跳转">
<meta name="description"content="老男孩培训机构是由一个老的男孩创建的">

2 http-equiv, as the name suggests, is equivalent to the file header function of http. It can return some useful information to the browser to help display web page content correctly and accurately. The corresponding attribute value is content, the content in content is actually the variable value of each parameter.

<meta http-equiv="Refresh"content="2;URL=https://www.php.cn"> //(注意后面的引号，分别在秒数的前面和网址的后面)
<meta http-equiv="content-Type"content="text/html;charset=UTF8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>老男孩</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">

3. Body tag

##Basic tag:

##b35601808ee30eac9a0f11ecc3d2c015: n The value range is 1~6; from large to small. Used to represent the title.

e388a4556c0f65e1904146cc1a846bee: Paragraph tag. The wrapped content is wrapped. There is also a line of blank space between the upper and lower content.

a4b561c25d9afb9ac8dc4d70affff419 8e99a69fbe029cd4e2b854e244eab143: Bold label.

533df51242d4fe18c58d599b7d69a4e4: Add a center line to the text.

907fae80ddef53131f3292ee4f81644b: The text becomes Italics.

2cdea26b4c3988e37d674b56660962a7 and b96cac025db4031319c29e1eb68f19d6: superscript and subscript.

0c6dc11e160d3b678d68754cc175188a: line break.

f32b48428a809b51f04d3228cdf461fa: horizontal line

e388a4556c0f65e1904146cc1a846bee45a2772a6b6107b401db3c9b82c049c2

Block-level tags and inline tags

Block-level tags:e388a4556c0f65e1904146cc1a846bee4a249f0d628e2318394fd9b75b4636b1f5d188ed2c074f8b944552db028f98a1< ;ol>ff6d136ddc5fdfeffaf53ff6ee95f185ff9c23ada1bcecdd1a0fb5d5a0f18437e388a4556c0f65e1904146cc1a846bee

Inline tag: 3499910bf9dac5ae3c52d5ede7383485d5fd7aea971a85678ba271703566ebfda1f02c36ba31691bcfe87b2722de723bb96cac025db4031319c29e1eb68f19d62cdea26b4c3988e37d674b56660962a74750256ae76b6b9d804861d8f69e79d3< ;span>

Characteristics of block (block) elements

① Always starts on a new line;

② Height, line height and

margins

and

padding can all be controlled; ③ The width defaults to 100% of its container, unless a width is set .

④ It can accommodate

inline elements

and other block elements

Characteristics of inline elements

① and other elements are on the same line;

② 高，行高及外边距和内边距不可改变；

③ 宽度就是它的文字或图片的宽度，不可改变

④ 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下

设置宽度width 无效。

设置高度height 无效，可以通过line-height来设置。

设置margin 只有左右margin有效，上下无效。

设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

特殊字符：

< >；"；©®

图形标签a1f02c36ba31691bcfe87b2722de723b：

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

超链接标签3499910bf9dac5ae3c52d5ede7383485:　

href:要连接的资源路径 格式如下: href="http://www.php.cn"

target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

name: 定义一个页面的书签.

用于跳转 href : #书签名称.

列表标签:

ff6d136ddc5fdfeffaf53ff6ee95f185: 无序列表

c34106e0b4e09414b63b2ea253ff83d6:有序列表

      25edfb22a4f469ecb59f1190150159c6:列表中的每一项.

5c69336ffbc20d23018e48b396cdd57a 定义列表

      73de882deff7a050a357292d0a1fca94 列表标题

      67bc4f89d416b0b8236eaa5f43dee742 列表项

表格标签f5d188ed2c074f8b944552db028f98a1：

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素 百分比.（最好通过css来设置长宽）

a34de1251f0d9fe1e645927f19a896e8: table row

         b4d429308760b6c2d20d6300079ed38e: table head cell

         b6c5a531a458a2e790c1fd6421739d1c: table data cell

rowspan: 单元格竖跨多少行

colspan:  单元格横跨多少列（即合并单元格）

b4d429308760b6c2d20d6300079ed38e: table header 92cee25da80fac49f6fb6eec5fd2c22a(不常用): 为表格进行分区

表单标签ff9c23ada1bcecdd1a0fb5d5a0f18437

表单用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label 元素。

1、表单的属性

HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

method: 表单的提交方式 post/get 默认取值 就是 get（信封）

get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

get/post是常见的两种请求方式.

2.表单元素

d5fd7aea971a85678ba271703566ebfd    
type:    
text 文本输入框

password 密码输入框

radio 单选框

checkbox 多选框 

submit 提交按钮           

button 按钮(需要配合js使用.) button和submit的区别？

file 提交文件：form表单需要加上属性enctype="multipart/form-data"

XML/HTML Code复制内容到剪贴板

def index(request):   
    print request.POST   
    print request.GET   
    print request.FILES   
    for item in request.FILES:   
        fileObj = request.FILES.get(item)   
        f = open(fileObj.name, 'wb')   
        iter_file = fileObj.chunks()   
        for line in iter_file:   
            f.write(line)   
        f.close()   
    return HttpResponse('ok')　

name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在

css和javascript中使用的。

value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

type="button", "reset", "submit" - 定义按钮上的显示的文本

type="text", "password", "hidden" - 定义输入字段的初始值

type="checkbox", "radio", "image" - 定义与输入相关联的值

checked: radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

221f08282418e2996498697df914ce4e 下拉选标签属性：

name:表单提交项的键.

size：选项个数

multiple：multiple

5a07473c87748fb1bf73f23d45547ab8 下拉选中的每一项 属性：value:表单提交项的值.   selected: selected下拉选默认被选中

5b7a15bed8615d1b843806256bebea72为每一项加上分组

4750256ae76b6b9d804861d8f69e79d3 文本域 name:表单提交项的键. cols:文本域默认有多少列 rows:文本域默认有多少行

2e1cf0710519d5598b1f0f14c36ba674

     <label for="www">姓名</label>
     <input id="www" type="text">

2b5469ab79cf842344327415c3b3bb95

<fieldset>
    <leg
end
>登录吧</legend>
    <input type="text">
</fieldset>

【相关推荐】

1. Html免费视频教程

2. 解决div被iframe遮住的多种情况

3. 教你如何在html中插入链接

4. 教你怎么在nodejs下解析html

5. 分享一个超全面的HTML、CSS知识点总结

The above is the detailed content of Share an integration of HTML knowledge points. For more information, please follow other related articles on the PHP Chinese website!