day02-HTML基础下

最新推荐文章于 2024-07-22 17:27:18 发布

lilinaixuexi

最新推荐文章于 2024-07-22 17:27:18 发布

阅读量260

点赞数

分类专栏：前端技术文章标签： html5

本文链接：https://blog.csdn.net/lilinaixuexi/article/details/78335650

版权

前端技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

知识点一：

HTML5的标准结构：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meat charset='utf-8'>
    <title>Document</title>
</head>
<body>
</body>
</html>

meta的其他示例：
关键字：

<meta name='keywords' content=''>

将网页内容提出关键字告诉搜索引擎，利于seo排名，content的内容用”,”隔开。

网页描述：

<meta name='description' content=''>

用于检索出来的网页描述使用。用于seo查看。

网页重定向：

<meta http-equiv='refresh' content='5;http://www.baidu.com'>

实现域名跳跃，即可以注册多个域名，然后跳到同一个域名即可。

link标签：
链接外部样式表文件：

<link rel='stylesheet' href=''>

设置icon图标：

<link rel='icon' href=''>

知识点二：表格：

标准结构

<table border='' width='' height='' cellspacing='' cellpadding='' align='' bgcolor=''>
    <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>赵灵儿</td>
            <td>18</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>林月如</td>
            <td>18</td>
        </tr>
    </tfoot>
</table>

属性：
border：边框粗细。
width：表格宽度。
height：高度。
cellspacing：单元格与单元格的距离
cellpadding：内容距边框的距离
align：left、right、center表格的排列方式，居左，居右，居中。
bgcolor：背景颜色。
属性rowsapn：合并同一列上的单元格。
属性colspan：合并同一行上的单元格。
表格标题：<th></th>用法跟<td></td>一样
边框颜色：属性bordercolor
内容垂直对齐：<td>属性valign=top、middle、bottom。

知识点三：表单

表单域<form action='' method=''>
action：处理方式，其实就是访问地址。
method：get/post
文本输入框：

<input type='text' maxlength='' readonly='readonly' disable='disable' name='username' value='内容'>

maxlength=”6” 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled=”disabled” 输入框未激活状态
name=”username” 输入框的名称
value=”内容” 将输入框的内容传给处理文件

密码输入框:

<input type='password' name='password'>

属性同文本输入框一致。

单选框：

<input type='radio' name='gender' checked='checked'>男
<input type='radio' name='gender' >女

只有当name相同时，才能实现单选效果。
checked属性为默认选中。

下拉框：

<select multiple='multiple'>
    <optgroup label='北京市'>
        <option>昌平区</option>
        <option>海淀区</option>
        <option>朝阳区</option>
        <option selected='selected'>大兴区</option>
    </optgroup>
</select>

Multiple=”multiple” 将下拉列表设置为多选项
Selected=”selected” 设置默认选中项目
<optgroup></optgroup> 对下拉列表进行分组。
Label=”” 分组名称。

多选框

<input type='checkbox' checked='checked'>多选1
<input type='checkbox' >多选2
<input type='checkbox' >多选3

checked表示默认选中。

多行文本框：

<textarea cols='130' rows='10'></textarea>

cols：控制输入字符的长度。
rows：控制输入字符的行数。

文件上传控件：

<input type='file'>

提交按钮：

<input type='submit'>

可以直接实现提交

普通按钮：

<input type='button' >

没有功能，需要配合js使用

重置按钮：

<input type='reset'>

可以重置表单信息

图片按钮：

<input type='image' src=''>

图片按钮也可以实现信息提交功能。

给表单实现分组：

<fieldset></fieldset>
<legend>分组信息<legend>

对表单信息分组
表单信息分组名称

html5补充表单控件
这里写图片描述

知识点四：标签语义化

好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

-标签语义化意义：
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）；

lilinaixuexi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day02-HTML基础下

知识点一：HTML5的标准结构：<!DOCTYPE html><html lang='en'><head> <meat charset='utf-8'> <title>Document</title></head><body></body></html>meta的其他示例：关键字：<meta name='keywords' content=''>将网页内容提出关键字告
复制链接

扫一扫

专栏目录