HTML和CSS简单学习整理

最新推荐文章于 2021-08-23 19:14:07 发布

敲代码的xiaolang

最新推荐文章于 2021-08-23 19:14:07 发布

阅读量651

点赞数 10

分类专栏： web安全前期基础文章标签： html css

本文链接：https://blog.csdn.net/weixin_52605156/article/details/119491146

版权

web安全前期基础专栏收录该内容

11 篇文章 6 订阅

订阅专栏

本文介绍了HTML和CSS的基础知识，包括HTML的常用标签如<body>、<h1>、<p>、<form>和<input>等，以及CSS的样式设置和选择器。通过实例展示了如何创建简单的网页、表单、多选选项和表格。同时提到了CSS中的ID选择符和样式冲突解决。此外，还分享了在学习前端过程中遇到的Linux环境配置问题的解决方案。

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

简单学习了html和css的相关内容，依据菜鸟教程做了几个实例进行记录。
https://www.runoob.com/html/html-tutorial.html

HTML

什么是html?
HTML是一种超文本标记语言，它不是编程语言，HTML通过一套标记标签来描述网页。

HTML常用语法

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

<html>:
<html> 与</html>之间的文本描述网页
<body>:
<body> 与</body>之间的文本是可见的页面内容
<h1>:
<h1>与</h1>之间的文本被显示为标题
<p>:
<p>与</p>之间的文本被显示为段落

在Linux里我们执行操作：
在这里插入图片描述

因为我们的浏览器会自动解析我们的html文件，所以可以把我们输入的html代码解析为我们看起来比较直观的东西。

HTML常用标签
参考菜鸟教程：https://www.runoob.com/html/html-quicklist.html
下图简单展示了置入连接和图片：
在这里插入图片描述

html表单
HTML表单用来用户登录界面，上传文件的时候应用较多。
创建表单，表单本身并不可见。

<form>
.
input 元素
.
</form>

定义表单的语法结构：

< form action=“www.baidu.com” method=“get” enctype=“application/x-www-form-urlencoded” >
Action : 表明表单将要提交到哪里
Method : 表示提交用的方法分别为get和post可选
Enctype : 规定在发送表单数据前对数据进行编码格式

< INPUT />
不同控件的type值:
单行文本框 text
提交按钮 submit
密码框 password
重置按钮 reset
复选框 checkbox
自定义按钮 button
单选按钮 radio

我们做一个很基础的html表单：
在这里插入图片描述

<html>
<head>
</head>
<body>
<form action="input.php" method="POST">/*提交信息后发送给input.php*/
username:<br>/*换行*/
<input type="text" value="admin" name="user">/*value可以看作是默认值*/
<br>
password:<br>
<input type="password" value="admin" name="pass">
<br>
<input type="submit" value="提交信息">/*提交按钮*/
</form>
</body>
</html>
~                                                                               
~

然后我们提交数据后需要给input.php,也就是我们在前端的html中输入了数据，然后交给后端的php代码去处理，然后在mysql里寻找匹配的数据，这里等后面学完php和mysql后再处理。

也可以再做一个简单的类似于留言板的框架：
在这里插入图片描述

<html>
<head>
</head>
<body>
<form action="1.php" method="POST">
<textarea rows=10 cols=30 name="square">talk</textarea>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>

我们可以对上面的html文件进行补充，比如加一个多选的选项：
在这里插入图片描述

<html>
<head>
        <meta charset="UTF-8">
        <title></title>
</head>
<body>
        <form action="1.php" method="POST">
        <textarea rows=10 cols=30 name="square">talk</textarea>
        <br>
        <input type="submit" value="提交">
        <select>
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
                <option value="d">D</option>
        </select>
</form>
</body>
</html>

再做一个表格的书写（提前祝大家七夕快乐哈~）：
在这里插入图片描述

<html>
<head>
        <title></title>
</head>
<body>
        <table border="1">
        <tr>
                <td>i</td>
                <td>love</td>
                <td>you</td>
        </tr>
        <tr>
                <td>qi</td>
                <td>xi</td>
                <td>happy</td>
        </tr>
</table>
</body>
</html>

CSS

CSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面
依据菜鸟教程学习了相关语法，做了几个栗子：https://www.runoob.com/css/css-tutorial.html
CSS语法
CSS是层叠样式表
在这里插入图片描述
相关概念不再赘述，因为写了其实没什么用处，这里写几个栗子其实就比较容易理解：

<html>
<head>
<style type="text/css"> /*告诉浏览器，这是css*/
p{text-align:center;color:red; } /*语法，我的p标签都居中，变成红色*/
</style>
</head>
<body>
<h1 style="color:blue">i love you</h1> /* 单独对某个标题改动 */
<p>csdn</p>
<p>敲代码的xiaolang</p>
<p>期待你的到来！</p>
</body>
</html>

ID选择符
在这里插入图片描述

<html>
<head>
<style type="text/css">
        #red{color:red}
        #blue{color:blue}
        #black{color:black}
</style>
</head>
        <h1 id="red">csdn</h1>
        <p id="blue">敲代码的xiaolang</p>
        <p id="black">期待你的到来</p>
</body>
</html>

上面的写法也可以这样写：
在这里插入图片描述

<html>
<head>
<style type="text/css">
        #red{color:red}
        .blue{color:blue}
        .black{color:black}
</style>
</head>
        <h1 id="red">csdn</h1>
        <p class="blue">敲代码的xiaolang</p>
        <p class="black">期待你的到来</p>
</body>
</html>

样式表冲突
当多种样式作用于同一标记的同一属性时，会发生样式表冲突优先原则
同一选择符∶按就近原则
不同选择符:内联>ID>类>类型>外部

对于前端的话要重点学习这一部分，如果学习安全的话，前期把语法掌握，能看懂html文件就可以了，css不做重点学习。

补充笔者运行虚拟机时可能因操作不当出现的三个问题：
1.错误提示：No package php-mcrypt available
解决方案：https://www.bbsmax.com/A/n2d9174dDv/
2.错误提示：物理内存不足,无法使用配置的设置开启虚拟机。
解决方案：https://blog.csdn.net/pdcfighting/article/details/98980546
3.错误提示：Centos 7 下终端窗口显示—“]777;notify;Command completed;exit[”
解决方案：https://www.cnblogs.com/lenmom/p/9559042.html

计网学不动了，先学点前端的东西缓缓~~~