HTML基础

2019-12-28 16:00:23来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

HTML基础

本小白自学HTML基础中比较生疏的知识点汇总:

ul无序列表的type属性值:

disc 圆点

square 正方形

circle 空心圆


ol无序列表的type属性值:

1

A

a

I 大写罗马字母

I 小写罗马字母 


 

 a链接:

<a href="">链接</a> 

当链接为空的时候,点击超链接会刷新页面


 

title 链接提示文字

name 链接命名


 

 锚链接:

<a href=”#锚名”>目录</a>

或者

<a href=”网页名称#锚名”>目录</a>

<a href=”#” name=”锚名”>内容</a>


 

Sublime常用快捷键:

输入!或者html,再tab键,可快速生成html模板

Crtl+j合并行,适合css样式最终整理

Crtrl+z撤销

Ctrl+y恢复撤销

Tab缩进

Shift+tab取消缩进


 

th表格头:内容居中,加粗显示

caption表格标题,居中显示

按照thead、tbody、tfoot的顺序依次显示

<table>
    <caption></caption>
    <tr>
        <th></th>
    </tr>
<tr>
    <td></td>
</tr>
</table>

表格属性:

width 表格宽度

align 表格相对于周围元素的对齐方式

cellpadding 单元格边沿与内容之间的距离

cellspacing 单元格之间的空白

frame 外侧边框属性:

void 不显示

above 显示上部

below 显示下部

hsides 显示上部和下部

vsides 显示左边和右边

lhs 显示左边

rhs 显示右边

box=border 所有四个边                               

rules 内侧边框属性:

none 没有

groups 位于行组和列组之间

rows 行之间

cols 列之间

all 行和列之间


 

 表格demo:

<table width="500px" border="1" bgcolor="pink" cellspacing="5" cellpadding="10" frame="vsides" rules="rows">
        <caption>课程表</caption>
        <tr>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>课间活动</td>
            <td>课间活动</td>
            <td>课间活动</td>
            <td>课间活动</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
</table>


表格水平对齐align: center、left、 right 、justify、 char

表格垂直对齐valign: top 、middle 、bottom 、baseline

跨列colspan

跨行rowspan


 

 表单input标签:

file 文件域

hidden 隐藏域

image 图像域,可以起到提交按钮的功能

<input type=”image” src=””/>

可作为图片按钮


 

 text单行文本域:

maxlength 用户输入的最大字符长度

size 文本框的宽度,以字符数为单位,默认20个字符


 

<select>
    <option>请选择</option>
    <optgroup label=”组名”>
        <option></option>
    </optgroup>
</select>

multiple设置是否可多选

size 设置列表中可见项的数量

<select>标签中设置了multiple或size属性的话select是列表了,不是下拉菜单


 

form的enctype属性:提交表单前如何编码

application/x-www-form-urlencoded 默认

multipart/form-data 有上传file文件时

text/plain


 

上图下文可以使用自定义列表dl

图片是dt

文字解释是dd


原文链接:https://www.cnblogs.com/chenyingying0/p/12112992.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Web基础了解版08-JSTL

下一篇:css基础-css选择器和css文本样式相关