admin管理员组文章数量:1794759
HTML和CSS简单学习整理
HTML style="color:#2aa0ea" target=_blank class=infotextkey>简单学习了html和CSS的相关内容,依据菜鸟教程做了几个实例进行记录。 www.runoob/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常用标签 参考菜鸟教程:www.runoob/html/html-quicklist.html 下图简单展示了置入连接和图片: html表单 HTML表单用来用户登录界面,上传文件的时候应用较多。 创建表单,表单本身并不可见。
<form> . input 元素 . </form>定义表单的语法结构:
< form action=“www.baidu” 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> CSSCSS是一种用来装饰HTML的标记集合,是对HTML标记的一种扩展,可以进一步美化HTML页面 依据菜鸟教程学习了相关语法,做了几个栗子:www.runoob/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 解决方案:www.bbsmax/A/n2d9174dDv/ 2.错误提示:物理内存不足,无法使用配置的设置开启虚拟机。 解决方案:blog.csdn/pdcfighting/article/details/98980546 3.错误提示:Centos 7 下终端窗口显示—“]777;notify;Command completed;exit[” 解决方案:wwwblogs/lenmom/p/9559042.html
计网学不动了,先学点前端的东西缓缓~~~
版权声明:本文标题:HTML和CSS简单学习整理 内容由林淑君副主任自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.xiehuijuan.com/baike/1686971341a123914.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论