HTML CSS极速入门

一馋

已于 2023-04-08 10:09:32 修改

阅读量72

点赞数

文章标签： html css 前端

于 2023-04-07 16:40:20 首次发布

本文链接：https://blog.csdn.net/weixin_57476714/article/details/130006666

版权

本文介绍了前端开发的基础知识，包括HTML的用途、标签语法和常用元素，CSS的选择器、优先级以及盒子模型，还提及了二八原则在工作中的应用，以及一些前端开发的快捷键和工具，帮助初学者理解前端三剑客——HTML、CSS和JavaScript的关系。

摘要由CSDN通过智能技术生成

二八原则：20%的时间完成80%的工作量，20%代码完成80%的系统功能。
前置准备：浏览器（Google Chrome、Live Server）、编辑器（VS html css support）。不需要其他环境和服务，本地调试。
常用快捷键：
快速生成HTML结构：!+tab
快速生成标签：标签.类名（如果没写标签，默认div）
复制本行到下一行：alt+shift+👇
选中多行同一位置：ctrl+shift+L

前端三剑客的关系

HTML：方块。
CSS：方块的外观和布局。
JavaScript：人物的行为动作。

行内元素和块状元素

HTML

1. 是什么：Hyper Text Markup Language超文本标记语言。

注意：不是编程语言，编程语言的关键是逻辑（例如页面逻辑、调用接口、操作&连接数据库）。HTML是构建网页元素的标记语言（例如文本段落/表格/图片）。

2. 用来做什么：构建网页。

命名规则

首页：index.html
关于：xxx.com/about

标签语法

元素组成：<标签属性=value> 内容 </标签>
元素分类：行内元素 --换行<br>/ 分割线 <hr>/ 加<div>--> 块状元素
1. 块级元素（换行）： strong粗体、em斜体、a超链接、img图片、span
2. 行级元素（不换行）：div区域、h标题、p段落、form表单
常用元素集合：
1. 标题h
2. 段落p（strong加粗、em斜体、a超链接）
3. 格式化文本（ul/ol序列、form输入框、table表格）
4. 其他形式（button按钮、img图片）

标题h
段落p	strong加粗、em斜体
	a超链接	<a href="链接" target="_blank"（新页面）> 超链接文本 </a>
格式化文本	ul/ol序列	1. <ul> （<li>无序列表项1</li>） </ul> 2. <ol> （<li>有序列表项1</li>） </ol>
	form输入框	1. 普通输入框 <label>姓名：</label> <input type="text"> 2. 更大输入框 <label>信息：</label> <textarea name="" id="" cols="30" rows="10"></textarea> 3. 选择输入框 <select name="" id=""> （<option value="male">男</option> <option value="female">女</option>） </select>
	table表格	<table> （表头<thead>行<tr>列<th>）（表体<tbody>行<tr>列<th>）</table>
其他形式	button按钮	<button>按钮名</button>
	img图片	<img src="网页复制、./自动提示本地" alt="图片加载不出" width=200px>

<!-- 页面结构：!+tab -->
<!-- HTML文档说明 -->
<!DOCTYPE html>
<html>
    <head> 
        <!-- 元信息：<meta> -->
        <title>html tutorial</title>
    </head>

    <!-- 属性 -->
    <body>
        <!-- 1 标题：<h1> -->
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        
        <!-- 2 段落：<p> -->
        <p>
            <strong>加粗</strong>
            <em>斜体</em>
            <a href="https://baidu.com" target="_blank">超链接文本</a>
        </p>

        <!-- 3 序列：无序<ul>/有序<ol>、<li> -->
        <ul>
            <li>无序列表项1</li>
            <li>无序列表项2</li>
        </ul>
        <ol>
            <li>有序列表项1</li>
            <li>有序列表项2</li>
        </ol>

        <!-- 4 表格：<table> -->
        <!-- 表头<thead>、表体<tbody>-->
        <!-- 行：<tr>、列：<th>表头/<td>表体 -->
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>羊羊</td>
                    <td>22岁</td>
                </tr>
            </tbody>
        </table>

        <br>
        <hr>

        <!-- 5 输入框：<form> -->
        <form>
            <!-- (1)普通输入框 -->
            <div><label>姓名：</label>
                <input type="text"></div>
            <br>
            <div><label>年龄：</label>
                <input type="text"></div>
            <br>

            <!-- (2)更大输入框 -->
            <div><label>信息：</label><textarea name="" id="" cols="30" rows="10"></textarea></div>
            <br>

            <!-- (3)选择输入框 -->
            <div>
                <select name="" id="">
                    <option value="male">男</option>
                    <option value="female">女</Option>
                    <option value="other">其他</option>
                </select>
            </div>    
        </form>

        <!-- 6 按钮：<button> -->
        <button>点我</button>
        <br>

        <!-- 7 图片：<img> -->
        <img src="https://img2.baidu.com/it/u=4126435698,1127815230&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1111" 
        alt="图片加载不出"
        width="200"
        >

        <img src="./demo.html" 
        alt="图片加载不出"
        width="200"
        >

    </body>
</html>

CSS

样式

格式：{ 属性：value }
内联样式：HTML里，<style>="..."
内部样式：<style>="..."
外部样式：<link rel="stylesheet" href="style.css"> --> h1{...}

选择器

通用选择器		*
类型选择器	<h1>	h1
类选择器	<h1 class="A">	.别名
id选择器	<h1 id="A">	#别名
属性选择器（少）	<h1 title="A">	h1[title="A"]
组合选择器多条件		h1.别名
并列		h1,h2
父子		div h1