집 > 기사 > 웹 프론트엔드 > 마스터해야 할 기본 HTML 지식

마스터해야 할 기본 HTML 지식

零下一度원래의: 2017-05-05 13:55:552074검색

d2bf0e15f46e4e21d956668e9791ed8d

2) 작업 아이디어: 작업을 위해 데이터가 필요합니다. 다양한 태그로 캡슐화할 수 있으며, 캡슐화된 데이터는 태그의 속성을 통해 작동될 수 있습니다.

태그는 컨테이너와 동일합니다. 컨테이너의 데이터에 대해 작업을 수행한다는 것은 컨테이너의 속성 값을 지속적으로 변경하는 것입니다.

2. 목록

목록은 정보를 체계적으로 정리하는 방법입니다. 내용을 가로로 하나씩, 직관적이고 명확하게 표시해 줍니다. 그리고 테이블과도 다릅니다. 일반적으로 목록은 테이블만큼 복잡하지 않습니다.

1.순서가 없는 목록으으으

2. 주문 목록

으으으

3. 정의 목록

사용자 정의 목록은 5c69336ffbc20d23018e48b396cdd57a 태그로 시작됩니다. 각 사용자 정의 목록 항목은 73de882deff7a050a357292d0a1fca94로 시작됩니다. 각 사용자 정의 목록 항목의 정의는 67bc4f89d416b0b8236eaa5f43dee742로 시작됩니다.

<span style="font-size:14px;"><ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul></span>

결과:

커피
검은 뜨거운 음료
우유
흰 차가운 음료

4. 속성을 가질 수 있는 두 개의 복잡한 목록 태그 ul 및 ol

1) ff6d136ddc5fdfeffaf53ff6ee95f185

이 태그는 속성을 가질 수 있으며 98945c6a69b4f89e9f1313262a3413f3가 될 수 있습니다. x에는 다음 유형이 있습니다.

x는 디스크입니다. 항목은 "●" 기호로 안내됩니다.

x为circle：条目以符号“○”引导。

x为square：条目以符号“■”引导。

2） c34106e0b4e09414b63b2ea253ff83d6与f6f112ef45f603be226bc581f9dd5e90

此标记会自动给条目排序并加上序号，也可带有属性：

a、 6e285ff0354460ade94fe5cfce2c9604

x为A：以大写字母排序。如A，B，C，D等。

x为a：以小写字母排序。如a，b，c，d等。

x为I：以大写罗马数字排序。如I，II，III，IV等。

x为i：以小写罗马数字排序。如i，ii，iii，iv等。

x为1：以阿拉伯数字排序。如1，2，3，4等。

b、6a8610d0c6fe60386ac5a9df8f769bd7

n是一个数字，此标记符表示重新定义的起始号。

<span style="font-size:14px;"><html>
<body>

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

</body>
</html>
</span>

结果：

三、表格

使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类化的信息，具有表示清晰、明了的特点，使用十分广泛。表

格一般由以下几部分组成：表格名称、表格栏及表中数据。

1、border属性

使用表格的这一属性可以给表格加上框线。如bb643a387a53979effdf2ff19129bb42表示表格是有表格线的，border的线宽默认为1。没有写border则表示表格是没有表格线的。一般用

14bbc0aaaaad3969760ccad65ba9e9bb来设置“有线表格”和边框宽度。n是一个具体的数字，用来指定宽度的大小，单位是“像素”，默认为没有边框。当n为0时，也没有边框。

2、cellspacing属性

这一属性可以用来设置有线表格的单元格线的宽度，用法为f44c1406c6284e61a5d41d1123d7a063。n是一个具体的数值，单位是像素。（也就是相邻单元格线之间的距离）

3、cellpadding属性

这一属性可以用来设置单元格线与数据之间的距离，用法为61047ea7ff7dcd975046b73917d37544。n为数值，单位是像素，默认值是1。（也就是每个单元格边线和当中数据的间

隔）

4、63bd76834ec05ac1f4c0ebbeaafb0994和37eb775bb5a9e6f3d094e96a76117fe8

这是一对用来指明表格标题的标记，常用格式如：63bd76834ec05ac1f4c0ebbeaafb0994 表格标题内容 37eb775bb5a9e6f3d094e96a76117fe8 （默认在表格框上，且相对于表格宽度居中）

5、b4d429308760b6c2d20d6300079ed38e和01c3ce868d2b3d9bce8da5c1b7e41e5b

这对标记用来指明表格栏目行中的一项。一行可以由多项组成，必须嵌套在a34de1251f0d9fe1e645927f19a896e8与fd273fcf5bcad3dfdad3c41bd81ad3e5之中使用。由此标记指定的栏目，文字会突出显示。

6、nowrap属性可用于b4d429308760b6c2d20d6300079ed38e及b6c5a531a458a2e790c1fd6421739d1c

超过一行，浏览器默认会自动换行显示。使用该属性进行屏蔽。

四、超文本链接

href中不仅仅只能用file和http协议，其它协议也可以的，如thunder,mailto

1、页面链接

用HTML创建超文本链接需要使用72d4ced2cc960a6bc2541984146fdaaa标记符（结束标记符63505a6f727f70c8bd4066f3066dcb9d不能省略），它的最基本属性是href，用于指定超文本链接的目标。通过为href指定不同的值，可以

创建出不同类型的超链接。

在HTML文件中用链接指针指向一个目标。其基本格式为：15fb18337c82ffddbf1ec297d743dbaf标记超文本链接信息5db79b134e9f6b82c0b36e0489ee08ed

2、本地链接

超文本链接指向自己的计算机中的某一个文件，叫本地链接。在文件中需要创建一个标签(即做一个记号)，为页面中需要跳转到的位置命名。命名时应使用72d4ced2cc960a6bc2541984146fdaaa标记

符的name属性。格式如下：ddfd78ba1616ae241ad6d8ab0c3142a3此处创建了一个标签5db79b134e9f6b82c0b36e0489ee08ed

3、电子邮件链接

如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链

接标记中插入mailto值。如:2e4a5357a1ff9327065ec46ac0232608管理员信箱5db79b134e9f6b82c0b36e0489ee08ed

4、迅雷下载链接

e7fd62761b7b3aff84eccce810ee7e13 a.avi 5db79b134e9f6b82c0b36e0489ee08ed

5、超链接字体的颜色

1）link属性：设置超链接文字的颜色，默认为蓝色，格式：5e3a68dca1c8fdc31fd0d2197f130233

2）vlink属性：设置鼠标指向超链接文字时，该链接文字的颜色，默认为红色，使用格式为：28a40992f46553b6d58b3af41c9a0f62

6、自定义超链接

c7ba17ad7dac7734aa48be6d8d0bbeb4 自定义超链接(取消默认点击效果，触发自定义事件) 5db79b134e9f6b82c0b36e0489ee08ed

给href的属性值赋：javascript:void(0)，以屏蔽默认点击效果

7、href默认的协议是file，因此如果写成href=""，则是打开当前html文件所在的文件夹

target="_blank"这个属性可以让超链接的目标在另一个窗口中显示出来

五、图像

图像地图：dab9f699790ab0922e596ecb9f6677d5

应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。map标签要和img标签联合使用

<img src="Sunset.jpg" alt="图片说明文字" usemap="#map" />
<map >
    <area shape="rect" coords="50,59,116,104" href="1.html" />
    <area shape="circle" coords="118,203,40" href="2.html" />
</map>

点击图片Sunset.jpg上面以（50,59）为矩形左上点，宽116，高为104区域时，链接到1.html页面；同理点击上面以（118,203）为圆心，40为半径区域时，链接到

2.html。

六、表单提交方式（get/post）

1、两种方式的区别

1) get提交将数据显示在地址栏，对于敏感信息不安全。post提交不显示在地址栏，对于敏感信息安全

2) 地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。而post可以提交大体积数据。

3) 对提交数据的封装方式不同。get将提交数据封装到了http消息头的第一行即请求行中。而post将提交的数据封装到请求体(请求数据)体中。

2、表单提交方式与乱码问题

无论是get还是post方式，对于Tomcat服务器端，默认的解码方式是ISO8859-1，因此中文会出现乱码。解决：通过用ISO8859-1进行编码，再用相应的中文码

表进行解码即可。

如果是post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效即该方法只设置数据体的编码方式。因此，通常表

单使用post提交，因为这样编码更方便。

3、客户端(浏览器)与服务端交互的三种方式：

1) 地址栏中输入url地址 ------ get方式

2) 超连接 ------ get方式

3) 表单 ------ get和post方式

七、其他标签

1、e8e496c15ba93d81f6ea4fe5f55a2244

name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。

http-equiv 属性：模拟HTTP协议的响应消息头。

2、2cdf5bf648cf2f33323966d7f58a7f3f

rel 属性：描述目标文档与当前文档的关系。

type 属性：文档类型。

media：指定目标文档在哪种设备上起作用。

3、ed126914ed1419bab26abf7cf307b7b9

滚动条

direction 属性：left right down up

behavior 属性：scroll（重复滚动） alternate（来回滚动） slide（不重复滚动）

loop 属性：滚动的次数 -1表示一直滚动

scrolldelay属性：设置活动字幕滚动两次之间的延迟时间

4、e03b848252eb9375d56be284e690e873

可以将文本内容按在代码区的样子显示在页面上。

注：pre标签对包含html标签的文字内容无法实现按排版格式显示

5、几个纯数据封装标签

p span p

6、标签分为两大类

1) 块级标签(元素)：标签结束后都有换行。font span img input select a

2) 行内标签(元素)：标签结束后没有换行。 p p dl ol ul table title

7、lable标签

给元素定义快捷键

<label for="user" accesskey="u">用户名(u)</label>
<input type="text" id="user" />

点击用户名时，会自动跳到user的编辑框中

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

위 내용은 마스터해야 할 기본 HTML 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML 요소의 구문과 빈 요소를 간략하게 소개합니다.다음 기사：HTML 요소의 구문과 빈 요소를 간략하게 소개합니다.