前端基础知识

最新推荐文章于 2024-09-06 19:40:02 发布

原创最新推荐文章于 2024-09-06 19:40:02 发布 · 259 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web #html

web 专栏收录该内容

1 篇文章

订阅专栏

HTML5

先写好代码，再重命名把文本格式改为html，（刚开始我没有成功是因为文件没有显示拓展名所以改不了）。

先来一个最简单的

<!DOCTYPE html>
<html>	
	<head>
		<title>第一个小测试</title>
	</head>
	<body>
		<h1>hello world</h1>
		<p> 哇哇哇</p>
	</body>
</html>

打开后：
在这里插入图片描述

是一个声明，表示该文档是由 HTML5 进行编写的。

再HTML5之前的申明都比较长，但是之后会一直使用这个，也比较简单。

每个命令都有开始和结束两个标签，结束标签会带有一个/。

为最大的标签，两个之间的任何东西称为html元素，html 元素用于告诉告诉浏览器其自身是一个 HTML 文档。表示标题，内容会出现在最上面的标题栏。表示网页的主题内容，body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

开发工具：VScode

从官网下载安装很快，如果要将字体设置为中文，可以在里面下载中文包。
按下快捷键 ctrl+shift+x ,找
在这里插入图片描述

重启后就是中文了。
打代码前直接点开始菜单里的保存，将格式改为html,保存后打一个英文的叹号就可以直接出现大的框架：
在这里插入图片描述

其中<!DOCTYPE html>代表语言类型，这条语句写在最上面

<html lang="en">

language = English
最好改成 <html lang="zh-CN"> 代表中文网站

<meta charset="UTF-8">

字符集为 UTF-8 这个字符集基本包括了所有的语言

标题标签

-

标签可定义标题，

定义最大的标题。

定义最小的标题。

<!DOCTYPE html>
<html>	
	<head>
		<title>第二个小测试</title>
	</head>
	<body>
		<h1>hello world</h1>
		<h2>hello world</h2>
		<h3>hello world</h3>
		<h4>hello world</h4>
		<h5>hello world</h5>
		<h6>hello world</h6>
	</body>
</html>

在这里插入图片描述
标题的字体都是粗体，独立一行显示

<p> <\p> 标签用于定义一个段落，编辑时文本换行了编译后还是会连在一起，分段必须用(paragraph缩写)

<br\> 强制另起一行，这是一个单标签（break缩写）

 用来在源文档中插入注释。注释不会在浏览器中显示。

文本格式化

在这里插入图片描述

div 和 span

表示这是一个独一的区块。 div相当于加了一个换行符，span差不多是一个空格。
在这里插入图片描述

图像标签

是一个单标签。
<img src=" " alt=" " title = "" width="" height = "" border = "">

src 后面跟图片路径
alt 后面跟若图片不能显示而显示的替换文字
title 后面跟鼠标悬停在图片上显示的文字
width 宽度单位像素
height 高度单位像素如果只改宽度和高度的一个属性，是等比缩放的
border 为边框的宽度单位：像素

超链接标签

<a href = "要跳转的目标网站 target="（打开链接网站的方式）"> 超链接的文字或图像</a>
target = “_blank” 表示打开一个新的网页
不写默认 target = “_self” 表示在本页面上直接跳转到目标网页
外部网站前面要加http:\,内部链接写html的地址，若写的是文件的地址，点击超链接将会下载文件

锚点链接

在链接文本的 href中设置属性值为#名字的形式，然后在目标标签中添加id属性，值为刚刚设置的名字。如：

<a href = "#name">文字 </a>
<h3 id = "name"> 文字 </h3>

特殊字符

空格 &nbsp:
小于号 <
大于号>
&符号&
等等

表格

<table>
    <tr> <td>姓名</td>  <td> 朝代</td>   </tr>
    <tr> <td>李白</td>  <td> 唐</td>   </tr>
    <tr> <td>张飞</td>  <td> 三国</td>   </tr>

</table>

各个标签是父子关系，table是表格，tr是一行，td是一个单元格

把第一行的 td改成 th 代表是表头，会居中加粗文字

表格的属性设置

在第一个table标签进行设置

<table align = "left/center/right" border = "默认为空，/1" cellpadding = "" cellspacing = "" width = "" height = "">

align 表示表格在页面显示的位置， border 设置是否有边框， cellpadding 为单元边沿与内容的空白，默认1像素，cellspacing为单元格之间的距离，height与width为表格的高与宽。

定义表头与表体

<table>
<thead>
    <tr> <td>姓名</td>  <td> 朝代</td>   </tr>
</thead>
<tbody>
    <tr> <td>李白</td>  <td> 唐</td>   </tr>
    <tr> <td>张飞</td>  <td> 三国</td>   </tr>
</tbody>
</table>

合并单元格

在具体某个单元格选择合并方式，然后删掉多余的单元格。
<td colspan = "要合并的单元格的数量"> # colspan表示跨列合并， rowspan表示跨行合并。

无序列表

<ul>
    <li> 第一个</li>
    <li>第二个</li>
    <li>....</li>
    <!-- unordered list list -->
</ul>

有序列表

<ol>
    <li> 第一个</li>
    <li>第二个</li>
    <li>....</li>
    <!-- ordered list list -->
</ol>

自定义列表

<dl>
<dt> 总</dt>
    <dd>分1</dd>
    <dd>分2</dd>
    <dd>分3</dd>
</dl>

表单

表单的作用是上传数据。
表单域：

<form action="处理表单数据的url地址" method = "提交方式（get或post）" name="表单的名字">

</form>

表单元素

<form action="处理表单数据的url地址" method = "提交方式（get或post）" name="表单的名字" >
    文本框<input type="text" name="" value="默认显示的文字" maxlength="20"> <br>
    密码框<input type="password" name="" value=""><br>
    单选按钮<input type="radio" name="id1">选项1<input type="radio" name = "id1"> 选项2<br>
    <!-- 单选按钮要设置一样的name属性 -->
    多选框 <input type="checkbox" name="同一组选项name属性相同">选项1<input type="checkbox">选项2<input type="checkbox">选项3<br>
    <!-- 对于选项框可以设置checked属性 -->
    默认选择<input type="checkbox" checked="checked"><br>
    提交按钮 <input type="submit" value="提交"><br>
    重置按钮 <input type = "reset" value="重置按钮"><br>
    按钮<input type="button" value="按钮"><br>
    上传文件 <input type="file">
    <!-- Label标签可以绑定表单元素，当点击标签时光标会自动聚焦与按钮或文本框，增加用户体验。     -->
    <label for="要服务的对象id"> label内容 </label> 
    <input type="text" id="要服务的对象id"><br>

    <!-- 下拉表单元素 -->
    选项<select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
        <option>选项5</option>
    </select><br>
    文本域<textarea rows = "3" cols="20">

    </textarea>
</form>
</body>

在这里插入图片描述

CSS3

写在<head>与</head>之间

<style>
    标签选择器 {
    	属性: 值
    	属性: 值
    }
</style>

类选择器

先在上面定义一个类，然后需要的调用。格式：

<style>
        .red {
            color: red;
        }
    </style>

<p class="red">
    添加类
</p> 
<!-- 多个类在class=""的引号里以空格隔开 -->
}

id选择器

格式：

<style>
        #red {
            color: red;
        }
    </style>
  
 <p id="red">
    添加类
</p> 
<!-- 每个对象的id应当是不同的，所以只能被调用一次，可以用来给某个对象添加特殊的样式 -->

通配符选择器

格式：

<style>
        * {
            color: red;
        }
    </style>
    <!-- 所有对象都会改变 -->

字体样式

           <style>
        * {
            /* 字体 */
            /* 用逗号隔开表示如果浏览器不支持第一个再用第二个，若字体有大于两个单词就用一个引号 */
            font-family:'Courier New', Courier, monospace;
            /* 字体大小，后面加px */
            font-size: 50px; 
            /* 字体粗细  */
            font-weight: 700;
            /* 斜体 */
            font-style:italic;
            /* 对齐方式 center ledt right*/
            text-align: center;
            /* 字体装饰 上划线删除线下划线等还可以加颜色*/
            text-decoration:yellowgreen underline;
            /* 首行缩进 */
            text-indent: 20px;
            /* text-indent: 2em; 代表缩进当前字符大小*2 */
            /* 行间距 */
            line-height: 15pt;
        }
    </style>

样式表

以上使用的都属于内部样式表
如果要做的修改比较简单，可以使用行内样式表：

<p style="color: red; font-size: 30pt;">
    行内样式表
</p>

外部样式表

将css内容写在一个css文件中，然后链接起来。

<link rel="stylesheet" href="css文件路径">

Emmet语法快速生成代码

生成多个相同的标签例：div*5
生成成对的有父子关系的标签例：ul>li
兄弟关系例div+p
生成带有类或id名字的 .类名或 #id名 # 默认是div 可以写 p.类名
有顺序命名div$*5
带有内容 p{内容}

符合选择器

后代选择器

    <style>
        父 子{
        } 
    </style>