前端快速入门

最新推荐文章于 2023-10-11 18:51:59 发布

测试小姐姐

最新推荐文章于 2023-10-11 18:51:59 发布

阅读量668

点赞数 3

分类专栏：前端软件测试前端入门文章标签： html html5 css

本文链接：https://blog.csdn.net/HONGTester/article/details/107108648

版权

软件测试同时被 3 个专栏收录

63 篇文章 30 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

前端入门

1 篇文章 0 订阅

订阅专栏

前端快速入门，前端HTML基础

这篇文章讲述了，前端的基础知识，包括HTML，CSS，测试的同学或者前端入门的同学可以看看此文

HTML简介

HTML是超文本标记语言，它不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，使用标记标签来描述网页，HTML文档也叫做Web页面

下面来看一个简单的HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是我的第一个HTML页面</title>
</head>
<body>
    <h1>第一个标题</h1>
    <p>第一个段落</p>
</body>
</html>

来解析一下这段代码的意思

<!DOCTYPE  html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
 <p> 元素定义一个段落

HTML标题

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML段落

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML链接

<a href="https://www.baidu.com">这是一个链接</a>

HTML图像

<img src="/images/tt.png" width="258" height="39" />

HTML表格

  <table border="1">
    <tr>
        <td>row 1, cell 1</td>   第一行第一列
        <td>row 1, cell 2</td>   第一行第二列
    </tr>
    <tr>
        <td>row 2, cell 1</td>   第二行第一列
        <td>row 2, cell 2</td>   第二行第二列
    </tr>
</table>

HTML列表

<dl>
<dt>咖啡</dt>
<dd>拿铁</dd>
<dt>牛奶</dt>
<dd>奶昔</dd>
</dl>

HTML区块

HTMl区块元素，<div>，它属于块级元素，下面一个div写的简单页面

<!DOCTYPE html>
<html>
<head> 
<meta charset="gb1323"> 
<title>我的第一个Web页面</title>* 
</head>
<body>
<div id="container" style="width:500px">    
<div id="header" style="background-color:yellow;width:400px;">
<h1 style="margin-bottom:0;">网页标题</h1>
</div>
<div id="menu" style="height:100px;width:100px;float:left;">
<b>菜单</b> <br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:300px;float:left;">
主要写内容</div>

</body>
</html>
后续我会把这部分的基础代码陆续的写下来

HTML表单

<form>
name: <input type="text" name="name"><br>
password: <input type="text" name="password">
</form>

HTML单选按钮

 <form>
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

HTML复选框

  <form>
<input type="checkbox" name="1" value="Bike">牛奶<br>
<input type="checkbox" name="2" value="Car">咖啡
</form>

CSS简介

样式定义如何显示 HTML 元素
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
CSS id选择器
#para1 { text-align:center; color:blue; }
CSS背景色
div {background-color:#b0c4de;}
CSS字体
p{font-family:"Times New Roman", Times, serif;}

后面我将会继续记录下来我以前的学习过程，包括CSS，JS，希望我的内容可以帮助到所有热爱互联网，入门的你