h5基础知识点总结 17软工2班黄颉

最新推荐文章于 2020-06-28 11:48:41 发布

qq_42345788

最新推荐文章于 2020-06-28 11:48:41 发布

阅读量179

点赞数 1

文章标签： H5基础知识点

本文链接：https://blog.csdn.net/qq_42345788/article/details/100566203

版权

H5程序设计基础

● HTML（超文本标记语言）
● CSS
● JavaScript
● HTML5
● CSS

- 文档基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

常用的表签和表格

根据效果或者功能，选择合适的标签
<!-- 标题 -->
    <h1></h1>
    <!-- 段落 -->
    <p></p>
    <!-- 图片 -->
    <img src="imgs/news.jpg"/>
    <!-- 超链接 anchor-->
    <a target="_blank" href="http://www.baidu.com">百度一下，你就知道</a>
    <!-- 列表 -->
    <!-- unordered list -->
    <ul>
        <!-- list item -->
        <li></li>
    </ul>
    <!-- ordered list-->
    <ol>
        <li></li>
    </ol>
    <!-- 布局 division-->
    <div></div>
    <!-- 表单 -->
    <form action="" method="get">
        <!-- 表单元素 -->
        <p>
            用户名：<input type="text">
        </p>
        <p>
            <input type="text" name="user" placeholder="用户名">
        </p>
        <input type="password" name="pwd">
        <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="women">女
        <input type="checkbox" name="course" value="">  
        <input type="checkbox" name="course" value="">
        <input type="checkbox" name="course" value="">
        <input type="checkbox" name="course" value="">
        <input type="submit" value="登录">
        <input type="button" value="按钮">
    </form>
表格
<!-- border:设置表格的边框 -->
    <!-- bordercolor:设置表格边框颜色 -->
    <!-- cellspacing:设置单元格和单元格之间的距离 -->
    <!-- cellpadding:设置单元格和内容之间的距离 -->
    <!-- width/height:设置表格的宽度/高度 -->
    <!-- align:设置表格对齐方式 -->
    <!-- bgcolor:设置表格背景色 -->
    <table bgcolor="" align="center" bordercolor="red" width="800" border="5" cellspacing="0" cellpadding="10">
        <!-- align：写在tr或td上是设置文字对齐方式 -->
        
        <!-- 列合并（写在td或th上）：colspan -->
        <!-- 行合并（写在td或th上）：rowspan -->
        <tr>
            <th colspan="4">商品类目</th>
        </tr>
        <tr align="center">
            <td rowspan="3">移动</td>
            <td>移动</td>
            <td>移动</td>
            <td>移动</td>
        </tr>
        <tr>
            <td>移动</td>
            <td>移动</td>
            <td>移动</td>
        </tr>
        <tr>
            <td>移动</td>
            <td>移动</td>
            <td>移动</td>
        </tr>
        <tr>
            <td rowspan="3">移动</td>
            <td>移动</td>
            <td>移动</td>
            <td>移动</td>
        </tr>
        <tr>
            <td>移动</td>
            <td>移动</td>
            <td>移动</td>
        </tr>
        <tr>
            <td>移动</td>
            <td>移动</td>
            <td>移动</td>
        </tr>
    </table>

H5常用标签

文本标题标签

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>二级标题</h3

强制换行 : <br/> 水平线：<hr/>

段落标签

<p>段落文本内容</p>

列表


无序列表：<ul>

                         <li></li>

                        <li></li >

                         ..............

                     </ul>

有序列表：<ol>
                    <li></li >

                     <li></li >

                     ...............

                  </ol>

自定义列表:<dl>
                   <dt>名词</dt>

                    <dd>解释</dd>

                   </dl>

标识段落文本

<p></p>

盒子

<div></div>

插入图片

<img src="目标文件路径及全称" alt="图片替换文本" title="图片的标题"/>

超链接

语法：<a href="目标文件路径及全称/连接地址"titlle="提示文本">链接的文本/图片</a>

a href="#"></a>空链接,返回页面顶端。

属性：target:页面打开方式        属性值：_blank 新窗口打开

<a href="#" target="_blank">新页面打开</a>

CSS(层叠样式表)

- 属性

border:表格边框
cellpadding:内边距
cellspacing:外边距
width:像素百分比宽度
rowspan:单元格竖跨多少行
colspan:单元格横跨多少列（合并单元格）
height:高度
aligh:设置表格的宽度/高度
bgcolor:设置表格背景色

使用方法

List item

1、行内样式（1000）
2、外联样式
3、内部样式

基本选择器
1、标签选择器（1）
2、类选择器（class）（10）
3、id选择器（100）

选择器优先级
id > 类选择器 > 标签选择器

派生选择器
1、包含选择器（后代选择器）
2、子选择器
3、通配符选择器

字体样式
1、font-size
2、font-style : italic/oblique;
3、font-weight : bold/bolder;
4、font-family : “宋体”

文本样式
1、（水平对齐方式）text-align : center / left / right;
2、（设置字体颜色）color : red;
3、（设置首行缩进）text-indent : 2em;
4、（行高/设置文字垂直对齐方式）line-height : 30px;
5、（文本修饰）text-decoration : none/underline/overline/line-through;

背景样式
1、background-color : #ccc;
2、background-image : url( );
3、background-repeat : no-repeat;
4、background-position :
5、background : red url() no-repeat 100px center;

列表样式
1、list-style : none;

超链接样式（伪类选择器）
1、:link 只有超链接可以用（未被访问之前）
2、:visited 只有超链接可以用（访问过后）
3、:hover 可用于任意标签（鼠标经过时）
4、:active（鼠标点击时）

qq_42345788

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
h5基础知识点总结 17软工2班黄颉

H5程序设计基础● HTML（超文本标记语言）● CSS● JavaScript● HTML5● CSS- 文档基本结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>&l...
复制链接

扫一扫