前端学习一

最新推荐文章于 2024-08-23 06:12:23 发布

不能say的秘密

最新推荐文章于 2024-08-23 06:12:23 发布

阅读量143

点赞数

分类专栏：每日前端学习文章标签： html

本文链接：https://blog.csdn.net/weixin_44169596/article/details/115332411

版权

每日前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前端学习一

1、WEB前端的三大的核心技术：

HTML : 结构
CSS : 样式
Javascript : 行为

Web开发者助手 FeHelper:https://www.baidufe.com/fehelper

2、HTML基础内容

! + tab键 : 快速的创建html的初始代码

标签的属性：来修饰标签的，设置当前标签的一些功能。<标签属性=“值” 属性2=“值2”>

初始代码模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我是一个网页的标题</title>
</head>
<body>
    hello world
</body>
</html>

(1)HTML注释：

(2)文本修饰标签:

< strong>：表示强调，会对文本进行加粗

< em>：表示强调，会对文本进行斜体

< sub>、< sup>：下标文本、上标文本

< del>、< ins>：删除文本、插入文本

(3)图片标签与图片属性=> < img>：图片 src alt title width 、height

(4)引入文件的地址路径:相对路径 . 在路径中表示当前路径 … 在路径中表示上一级路径 || 绝对路径 E:/ke/qf_dl201901/20190108/img/animal/dog.jpg

(5)跳转链接:< a>标签 href target < base>标签

(6)跳转锚点:实现一、#号 id属性实现二、#号 name属性

(7)特殊符号：这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。

(8)无序列表:< ul>、< li> ：列表的最外层容器、列表项.注：ul和li必须是组合出现的，他们之间是不能有其他标签的。type属性 : 改变前面标记的样式( 一般都是用CSS去控制 )（http://www.w3school.com.cn/tags/att_ul_type.asp）

(9)有序列表:< ol>、< li> ：列表的最外层容器、列表项。注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。type属性 : 改变前面标记的样式( 一般都是用CSS去控制 )（http://www.w3school.com.cn/tags/att_ol_type.asp）

(10)定义列表:< dl>：定义列表 || < dt>：定义专业术语或名词 || < dd>：对名词进行解释和描述

(11)嵌套列表:列表之间可以互相嵌套形成多层级列表。

(12)表格标签:< table>：表格的最外层容器 || < tr> ：定义表格行 || < th>：定义表头||< td>：定义表格单元 || < caption>：定义表格标题

(13)表格属性:border ：表格边框、cellpadding ：单元格内的空间、cellspacing ：单元格之间的空间、rowspan ：合并行、colspan ：合并列、align ：左右对齐方式、valign ：上下对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>
        <strong>这是一段需要强调的文本</strong>
        <em>这是一段需要强调的文本</em>
    </p>
    <p>
        a <sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>  H<sub>2</sub>0
    </p>
    <p>
        促销 : 原价<del>300</del>，现价<ins>100</ins>。
    </p>
    <p>
        北京著名的高档百货店——<em>赛特购物中心</em>即将闭店。昨天，赛特购物中心总台服务人员表示<strong>“如果手里有购物卡请尽快到店消费”</strong>。据这位服务人员介绍，目前赛特购物中心正在进行清仓大甩卖。<del>特价电视原价3600元</del>，<ins>现清仓价只需1300元</ins>。
    </p>
</body>
</html>

(14)表单标签:< form> ：表单的最外层容器 || < input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

#### text 普通的文本输入框||password 密码输入框||checkbox 复选框||radio 单选框||file 上传文件||submit 提交按钮||reset 重置按钮

(15)表单标签:< textarea> ：多行文本框 || < select>、< option>：下拉菜单 || < label>：辅助表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="http://www.baidu.com">
        <!-- <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：</h2>
        <input type="password" placeholder="请输入密码">
        <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox" checked>香蕉
        <input type="checkbox" disabled>葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset"> -->
        <h2>多行文本框</h2>
        <textarea cols="30" rows="10"></textarea>
        <h2>下拉菜单</h2>
        <select>
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <select size="3">
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <select multiple>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <input type="file" multiple>

        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>

    </form>
</body>
</html>

(16)< div>与< span>

div （块）：div全称为division，“分割、分区”的意思，< div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在< div>标签中，< div>中还可以嵌套多层< div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

span（内联） : 用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="">
        <table border="1" cellpadding="30">
            <tBody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td> 
                </tr>
                <tr align="right">
                    <td>用户名：</td> 
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码：</td> 
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td> 
                </tr>
            </tBody>
        </table>
    </form>
</body>
</html>

3、CSS基础语法

  格式：
选择器{ 属性1 : 值1 ; 属性2 : 值2 }
  单位：
px  -> 像素( pixel ) 、%   -> 百分比
  基本样式：
width、height、background-color
  CSS注释：
/*  CSS注释的内容  */

(1)内联样式与内部样式: 内联（行内、行间）样式->在html标签上添加style属性来实现的;内部样式->在< style>标签内添加的样式。（注：内部样式的优点，可以复用代码）

(2)外部样式: < link>标签->rel、href || @import（注：这种方式有很多问题，不建议使用。）

(3)CSS中的颜色表示法:单词表示法、十六进制表示法、RGB三原色表示法

不能say的秘密

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习一

前端学习一1、WEB前端的三大的核心技术：HTML : 结构CSS : 样式Javascript : 行为Web开发者助手 FeHelper:https://www.baidufe.com/fehelper2、HTML基础内容! + tab键 : 快速的创建html的初始代码标签的属性：来修饰标签的，设置当前标签的一些功能。<标签属性=“值” 属性2=“值2”>初始代码模板：<!DOCTYPE html><html lang="en"&g
复制链接

扫一扫