菜鸟自学WEB记—了解web页面布局
乘雷欲上天 2024-07-09 14:03:02 阅读 95
前言：
个人介绍：硕士搞自动驾驶算法，非科班，懂点CPP但不多，工作原因开始自学java/web开发等，目的为了解开发流程，个人不做实际开发。
系列文档是整理了个人认为重要的干货，详情请查看原视频。
java-web开发入门
独学而无友，则孤陋而寡。欢迎各路大神指点！
1.基本样式概念
样式使用CSS样式，如改变标题颜色，有以下三种方式：
（1）行内样式
写在标签的style属性中如：
<code><h1 style=”xx:xx”> ...</h1>
（2）内嵌样式
写在head的style标签中如：
<style>
h1{
Xxx:xxx;
}
</style>
(3)外联样式
写在单独的.css文件中，通过以下引入
<link href=”...”>
2.CSS选择器
（1）元素选择器
根据标签名称选择设置样式的对象；
（2）id选择器
给标签指定id属性，再根据id设置样式，id在页面中不重复；
<style>
# xxx{
color:#968532;
}
</style>
<body>
<span id=”xxx”> xxxxx </span>
</body>
（3）类选择器
根据标签中的class属性来设置样式，class值在一个界面中可以重复,例：
<style>
//类选择器
.cls{
color:#968532;
}
</style>
<body>
<span class=”cls”> xxxxx </span>
</body>
（4）优先级
当三个选择器同时设置某元素时，优先级:id选择器>类选择器>元素选择器
3.常用标签
具体可查看工具书。
（1）超链接:
href:指定资源访问的url；
Target：指定在何处打开资源链接；
可以用css设置超链接的样式，具体的css属性可查询工具书；
（2）视频
<videos src=” xxx” controls></video>
（3）音频
<audios src=” xxx” controls></audios>
controls表示可以对视频/音频进行控制。
（4）段落标签等。
4.页面布局
（1）盒子模型
页面中所有的元素，都可以看做成为一个盒子，组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)
（2）布局标签
实际页面布局应用中，会大量使用div和span两个无语义布局标签
div标签：
一行只能一个；
宽度默认是父元素宽度，高度由内容确定；
可以设置宽高
span标签：
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽度、高度
5.表单标签
（1）基本概念
表单（form），负责数据收集功能（注册、登录等）
表单默认两个属性：
action：定义表单提交的url，往何处提交数据，如果不指定，则提交到当前页面；正常应该提交到服务端url地址
method:表单的提交方式，分get（默认值）和post两种方式，
1）get:在url后面拼接表单数据，url长度有限制，例：url?Usrname=tom&age=12；
2）post：表单数据在消息体/请求体中传递，大小无限制，
如：
<code> <form action="" method="get">code>
用户名:<input type="text" name="usrname">code>
年龄：<input type="text" name="age">code>
<input type="submit" value="提交">code>
</form>
注意：表单项必须有name属性才可以提交；
（2）表单项
1）input：功能最强大，通过type属性灵活控制输入形式，type有多种属性，具体可查工具书
2）select：定义下拉列表，option定义列表项
<select>
<option value="">------请选择国家</option>code>
<option value="1">中国</option>code>
<option value="2">美国</option>code>
</select>
3）textarea：定义文本框
外部包一层label标签，实现点击label任意区域可以定位到点击按钮；
（3）实用调试技巧
通过浏览器的F12开发者模式可以查看post消息体的具体值；
也可以通过url地址的变化查看get请求的具体值；
后记：
对于前端的三剑客，个人理解html就是起到骨架的作用，css样式就是为骨架增加血肉，js则控制各个躯干之间的交互运动。
截止现在已经了解了html和css的基本知识，下次开始冲js。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。