前端学习之HTML第二天

落日映苍穹つ 2022-05-11 07:46 362阅读 0赞

#                                        Html基础 #

*  ### 复习昨天知识 ###
 *  **单标签**

**◆注释标签****   ctrl+/**

**◆水平线标签****   <hr>**

**◆换行标签****   <br>**

*  双标签

◆段落标签    <p></p>

◆h1-h6  值只能取到6   h1在页面中只能出现一次。

◆文本标签  <font></font>

◆图片标签

◆  <strong></strong>  <b></b>

![70][]

*  路径

◆相对路径

★文件和图片（html）在同一文件夹（目录）时，直接写文件名  
             ★图片在上一级目录，..+/+文件名

★图片在下一级目录，文件夹名+/+文件名

◆绝对路径

*  超链接

◆锚链接

◆空链    <a href=”\#”>

◆链接优化写法    <base target=”\_blank”>

*  特殊字符

&nbsp;  空格

<    <

>    >

&copy;

&yen;

*  列表

无序列表
    
    <ul>
        <li></li>
    
        <li></li>
    
        <li></li>
    
    </ul>
    
    有序列表
    
    <ol>
       <li></li>
    
       <li></li>
    
       <li></li>
    </ol>
    
         自定义列表
    
    <dl>
        <dt></dt>
    
        <dd></dd>
    
        <dd></dd>
    </dl>

*  ### 新知识 ###

1.  !+tab   html5的标签结构
2.  编码

Charset   编码

Ascll

Ansi

Unicode

Gbk

Gb2312

Big5

Utf-8   通用字符集

3.关键字

![70 1][]

4.网页描述

![70 2][]

5.网页重定向

![70 3][]

6.链接外部样式表

![70 4][]

7.设置icon图标

![70 5][]

8.表格

展示数据。 是对网页重构的一个有益补充。

![70 6][]

◆属性：

Border=”1”   边框

Width=”500”  宽度

Height=”300” 高

cellspacing=”2”    单元格与单元格的距离

cellpadding=”2”    内容距边框的距离

align=”left  |  right  |  center”

如果直接给表格用align=”center”  表格居中

如果给tr或者td使用   ，tr或者td内容居中。

bgcolor=”red”    背景颜色。

◆表格的标准结构

◆表头和单元格合并

◆  表头  <caption></caption>

colspan=”2”  合并同一行上的单元格

rowspan=”2”  合并同一列上的单元格

![70 7][]

◆表格标题、边框颜色、内容垂直对齐

◆表格标题 <th></th>用法和td一样

标题的文字自动加粗水平居中对齐

![70 8][]

◆边框颜色

![70 9][]

◆内容垂直对齐方式

![70 10][]

Valign=”top   |  middle   |  bottom”

9.表单：表单的作用是收集信息。

表单的组成

◆提示信息

![70 11][]

◆表单控件

![70 12][]

◆表单域

![70 13][]

属性：action:处理信息

Method=”get | post”

Get通过地址栏提供（传输）信息，安全性差。

Post 通过1.php来处理信息，安全性高。

◆文本输入框

![70 14][]

maxlength="6"    限制输入字符长度

readonly=”readonly”  将输入框设置为只读状态（不能编辑）

disabled="disabled"  输入框未激活状态

name="username"   输入框的名称

value="大前端"     将输入框的内容传给处理文件

◆密码输入框

![70 15][]

★注意：文本输入框的所有属性对密码输入框都有效。

◆单选框

![70 16][]

★只有将name的值设置相同的时候，才能实现单选效果。

★checked=”checked” 设置默认选择项。

◆下拉列表

<select>
        <option>下拉列表选项</option>
        <option>下拉列表选项</option>
    </select>

![70 17][]

属性：

Multiple=”multiple”  将下拉列表设置为多选项

Selected=”selected”  设置默认选中项目

![70 18][]

<optgroup></optgroup>   对下拉列表进行分组。

Label=””  分组名称。

◆多选框

![70 19][]

Checked=”checked” 设置默认选中项

◆多行文本框

![70 20][]

Cols  控制输入字符的长度。

Rows  控制输入的行数

◆ 文件上传控件

![70 21][]

◆文件提交按钮

★：可以实现信息提交功能

◆普通按钮

![70 22][]

★不能提交信息，配合JS使用。

◆图片按钮

![70 23][]

★图片按钮可实现信息提交功能

◆重置按钮

![70 24][]

★将信息重置到默认状态

◆表单信息分组

![70 25][]

<fieldset></fieldset>    对表单信息分组

<legend></legend>      表单信息分组名称  
html5补充表单控件

![70 26][]

10.标签语义化

好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。

标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

\-标签语义化意义：

1:网页结构合理

2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；

3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）

4:便于团队开发和维护

1：尽可能少的使用无语义的标签div和span；

2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

3：不要使用纯样式标签，如：b、font、u等，改用css设置。

4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；

如果有疑问联系博主：y19970821ywty

![70 27][]

要用到的工具，视频教程，关注公众号（Java学习之乐）直接免费获取：

![70 28][]

[70]: /images/20220511/eecf516d84bb4bae86402ffd60ef01a9.png
[70 1]: /images/20220511/7a3b714bd8154f9dba8a947925e2df78.png
[70 2]: /images/20220511/f947e342b04142938ab40118fc42f95b.png
[70 3]: /images/20220511/60cb636f765d4c6aa5ec1bb7b1746686.png
[70 4]: /images/20220511/12a7ea2c07884b4facffa36e9be44ab5.png
[70 5]: /images/20220511/56997e4e24aa412490feb9582f98b464.png
[70 6]: /images/20220511/828a3fcdc4384d8490844c5af70fcf8f.png
[70 7]: /images/20220511/e77619e83edb4b5286609052cb07c4f5.png
[70 8]: /images/20220511/01434d51ec1d4255834379b420bb2e12.png
[70 9]: /images/20220511/e92dd783c5a34f81b2f71dc4753723ef.png
[70 10]: /images/20220511/7a46512e60b147389488aeeaf499ac40.png
[70 11]: /images/20220511/c42b479e449843e1bf75f6d384fdfda9.png
[70 12]: /images/20220511/3e53ef06eb3a4c9a80aa48cbb0a9741a.png
[70 13]: /images/20220511/251c52abd49c42b282733704155f0e7c.png
[70 14]: /images/20220511/5641b22e414d4a42a99fb053d11ef53f.png
[70 15]: /images/20220511/41dd612e45a346b2bfdc841a69bf368f.png
[70 16]: /images/20220511/2df88781c75e43729a708972abc13e9c.png
[70 17]: /images/20220511/6ec490a2b9ff48598cb8f166d5559124.png
[70 18]: /images/20220511/24c2ae8147f34032bde08f7d302b2346.png
[70 19]: /images/20220511/76178a568f2d4cf197d7ce0185223a50.png
[70 20]: /images/20220511/bf6c73b96ea845d58d76f43dcd7b9578.png
[70 21]: /images/20220511/9630fd1d12a34ee6970c7dd2dff1bddb.png
[70 22]: /images/20220511/440e57556d3248879f66229b1d116f5e.png
[70 23]: /images/20220511/0b70e9168e034387bff04673918d0ddb.png
[70 24]: /images/20220511/494f13a2774441c59f044e04e7ea246f.png
[70 25]: /images/20220511/e8be28f693264bfaa62ff14ede12f7f4.png
[70 26]: /images/20220511/d312cfe88abb40209afd9811f85e78ff.png
[70 27]: /images/20220511/d902a1faceb94da99b39c903dd6c4509.png
[70 28]: /images/20220511/b0443e1e47e344889cf86ba98cc6eb68.png