HTML基础下

知识点一:

HTML5的标准结构:

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

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

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

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

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

网页重定向:实现域名跳跃,即可以注册多个域名,然后跳到同一个域名即可。

<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'>

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

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

下拉框:

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

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

多选框:checked表示默认选中。

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

多行文本框:

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

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

文件上传控件:

<input type='file'>

提交按钮:可以直接实现提交

<input type='submit'>

普通按钮:没有功能,需要配合js使用

<input type='button' >

重置按钮:可以重置表单信息

<input type='reset'>

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

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

给表单实现分组:

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

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

知识点四:标签语义化:

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

-标签语义化意义:  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);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java后端技术

HTML标记之Form表单

从访问的Web站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息,然后单击某个按钮提交这些信息。是客户端与服务...

452
来自专栏嵌入式程序猿

带你看看飞思卡尔工程自动生成神器

精彩内容 飞思卡尔的工程自动生成器可以快速建立基于SDK的工程,让用户快速建立评估工程,提高开发速度,那么如何使用工程自动生成神器呢,今天就带来精彩内容 简介 ...

3647
来自专栏Java后端技术

CSS盒子模型

    2.盒子的边框:border(border-top、border-right、border-bottom、border-left).

521
来自专栏生信技能树

生信编程直播第12题:json格式数据的格式化

json数据大家统一用我给的测试数据,自己在浏览器打开下载:http://biotrainee.com/jbrowse/JBrowse-1.12.1/sampl...

37110
来自专栏跟着阿笨一起玩NET

winform下Textbox的AutoComplete功能

本文转载:http://blog.csdn.net/xiaoxian8023/article/details/8511129

682
来自专栏从零开始学 Web 前端

div盒子水平垂直居中方法

这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)  必须加上

753
来自专栏知道一点点

bootstrap快速入门笔记(八)-按钮,响应式图片

一,默认样式:.btn-default , .btn-primary , .btn-success  ,.btn-info, btn-warning ,btn-...

903
来自专栏杨建荣的学习笔记

巧用linux命令做图片下载器(r4笔记第7天)

在平时上网的时候,发现有些图片不错,想保存到本地,一个一个的保存确实够费劲的,如果把整个网页都保存了,有些又是自己不需要的,就算下载下来了,还得从上百个网页元素...

3286
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML(三)表单

table>tr3>td5 + tab键  <!-- 建立3行5列的表格 -->

1073
来自专栏10km的专栏

swift-annotations:java编译时警告主版本 52 比 51 新, 此编译器支持最新的主 版本。

今天在java bean代码中加入swift的注释时,编译时提示了警告: [javac] 警告: J:\facelog\db\sql2java\lib\swi...

2058

扫码关注云+社区