Web前端⼊门基础知识（HTML+CSS+JS）Web前端⼊门学习
HTML
⼀、基本语法格式
<!--声明是html格式为html ⼀般写在⾸⾏-->
<!DOCTYPE html>
<!--html是固定格式表⽰html的开始和结束-->
<html>
<!-- 声明html⽹页信息-->
<head>
<!--编码字符集-->
<meta charset="UTF-8">
<!-- 移动客户端优先——>
<meta name="viewport" content="width=device-width,initial-sclle=1.0">
<!--标题-->
<title>HTML标题</title>
</head>
<!--和⽤户交互的部分-->
<body>
</body>
</html>
注意：<title>标签位于<head>标签内，是<head>标签中唯⼀要求包含的东西。
<meta>⽤来提供相关⽂档信息
CSS，JS⽂件⽤<link>标签引⼊ 并且写在<head>标签中
⼆、常⽤的⼀些标签
1、标签 h1~h6
这是标签h1
这是标签h2
这是标签h3
这是标签h4
这是标签h5
这是标签h6
2、段落标签p
<p></p>段落标签前后有换⾏效果。
3、⽔平线标签
<hr/> ⽔平线是⼀个⾃闭和标签。
4、换⾏
<br/> 。
5、超链接
通过<a href="www.baidu"> <a/>标签实现，使⽤超连接调⽤某个⽹页前⾯必须要加。
6、div
<div></div>标签可以理解为是⼀个盒⼦，⽤于⽹页的布局
7、span
<span></span>标签是⼀个不带任何参数的标签和在<from>表单中的<label>类似
8、表格标签table
<table></table>
<!-- 表格标签属性border=1 添加表格边框粗细为1 -->
<!-- cellspacing="0" 使边框变只有⼀条线-->
<table border="1"cellspacing="0">
<!--设置表格标题-->
<caption><h3>这是表格标题</h3></caption>
<!-- 定义⾏ -->
<tr >
<!---th定义列⼀般写在表格⾸⾏内容会被加粗居中-->
<th >id</th>
<th >⽤户名</th>
<th >年龄</th>
</tr>
<tr>
<!-- tb定义列 -->
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<caption>标签⽤于设置表格标题 会⾃动在表格上⽅居中显⽰
表格除了<table>标签以外还需要<tr>来定义⾏，<th>、<tb>来定义列<th>⼀般⽤于表格⾸⾏有加粗居中效果。
9、列表标签
<body>
<h3>⽔果</h3>
<!-- ul⽆序列表-->
<ul>
<li>西⽠</li>
<li>苹果</li>
<li>猕猴桃</li>
</ul>
<h3>蔬菜</h3>
<!-- ol有序列表 start代表从⼏开始-->
<ol start="50">
<li>西红柿</li>
<li>黄⽠</li>
<li>东⽠</li>
</ol>
</body>
10、表单Form
含义：表单就是⽤来提交数据到后台服务器的，⽐如QQ⽹页上的登录和注册都是提交表单的⼀使⽤
<form action="www.baidu" method="GET">
action：数据发送的服务器地址，如上就是发送给了百度
method: 请求发送⽅式。常⽤的俩种⽅式为： GET、POST
get：将数据追加在url末尾 ? key=value & key=value;
post：将数据写在请求体中
在from表单中，提交数据的标签必须要有 name和value 俩个属性
表单专属标签<label>类似于<span>标签 ⽆默认样式标签
11、input
1、text代表⽂本框。还有⼀种超级⽂本框textrea⽤于输⼊更多内容
1、<input type="password"/>密码属性会隐藏输⼊内容
2、radio代表单选项，必须要有相同name属性，才可以使⽤组合使⽤单选项
<input type="radio" name="sex" value="0"/>男 <input type="radio" name="sex" value="1"/>⼥3、checkbox代表多选。必须要有name属性，多个name属性的多选为⼀组
<input type="checkbox" name="hobby" value="0"/>唱
<input type="checkbox" name="hobby" value="1"/>跳
4、submit提交表单数据
5、reset清空表单内容
12、下拉框select
注意：name属性在select标签；value属性在option标签
来 ⾃
<select name="city"id="">
<option value="0">请选择</option>
<option value="1">⼭东</option>
<option value="2">安徽</option>
<option value="3">江苏</option>
</select>
13、具有实体意义的代码
空格 :
©: ©
CSS
1、基本语法
1、⾏内式：<div ></div>
2、引⼊外部⽂件式:<link rel="stylesheet" href="css/text.css">
3、嵌⼊式:<style type="text/csss"> </style>
2、选择器
⼀、通⽤选择器 *web端登录
⼀般⽤于取消所有元素的内外边距和⼀些标签⾃带的字体样式
*{
padding: 0;/* 将所有元素的内间距设置为0*/
margin: 0;/* 将所有元素的外间距设置为0*/
text-decoration: none;/*通常⽤于去除a标签的下划线*/
}
⼆、类选择器 .
/* 类选择器
格式：例：<a class="b"> <a/>
.class 修饰的类名称{.b{
属性：值属性：值
属性：值属性：值
}}
三、ID选择器
/* 格式例：<a id="c"></a>
#id修饰的名称{#c{
属性：值属性：值
}}
四、分组选择器
给不同名字标签设置相同属性
/*
.class,#id{
属性：值
}
*/
五、后代选择器
/*
div p{
属性：值
}
p标签是div中的⼦元素
3、常⽤属性
1、背景: background
设置背景颜⾊、图⽚背景的俩种⽅式
```css
body{
background: blue;
background-color: blue;
/* background: url(img/Da66niel_Wu.jpg); */
/* background-image: url(imgimg/Daniel_Wu.jpg) */
/* background-position-y: -5px; /* 设置背景图⽚y轴上上移5px*/
/* background-repeat: repeat; */默认重复从上⾄下从左到右
/* background-repeat:repeat-x; */背景图⽚在x轴上重复
/* background-repeat: repeat-y; */背景图⽚在y轴上重复
/* background-repeat: no-repeat; */背景图⽚不重复
/
* 设置背景图⽚，并不重复，⼀⾏代码实现 */
/* background: url(imgimg/Daniel_Wu.jpg) no-repeat;
/*overflow: hidden;/* 超出标签范围内容隐藏 */
}
```
2、⽂本text
1、设置颜⾊有三种⽅式：
color:aqua;/* 通过颜⾊的英⽂单词名称设置*/
color: #7B68BB;/* 通过颜⾊代码设置*/
color:rgb(244,164,96);/* 通过rgb颜⾊代码设置*/
2、居中 text-align:center;
靠左text-align: left；默认靠左
靠右text-align: right;
3、⽂本修饰
text-decoration: none;/* ⽆任何线条修饰——去除超链接下划线*/
text-decoration: underline;/*下划线*/
text-decoration: overline;/*上划线*/
text-decoration: line-through;/*中划线*/
text-decoration-color: red;/*控制线条样式设置线条颜⾊为红⾊*/
text-indent:20px;/* ⾸⾏缩进 */
4、⽂本⾸⾏缩进
text-indent:20px；或text-indent:2em;em⼤约为17px
3、字体
1、字体类型
font-family: '微软雅⿊','宋体','⿊体'；设置多个字体类型浏览器会按从左到右按⽀持的类型选择2、字体⼤⼩
font-size: 50px;
3、字体粗细
font-weight: 900；字体粗细取值范围是100~900的整数 bold=700、normal=900
4、列表list
list-style: none;/* ⽆样式*/
/* list-style: disc; 实⼼圆，默认样式 */
/* list-style: circle; 空⼼圆 */
/* list-style: square; 实⼼⽅块 */
/* list-style:decimal; 数字 */
/* list-style:decimal-leading-zero; 零开头数字 */
/* list-style: lower-roman; ⼩写罗马 */
/* list-style: upper-roman; ⼤写罗马 */
/* list-style: lower-alpha; ⼩写英⽂ */
list-style: lower-alpha;/* ⼤写英⽂ */
5、对齐⽅式
居中：text-align:center;
靠左：text-align:left;
靠右：text-align:right
两端对齐: text-align: justify;
1、两端对齐只有⼀⾏⽂字时不⽣效
2、两端对齐多⾏⽂字时最后⼀⾏不⽣效。 解决⽅法：使⽤伪元素在末尾添加空⾏
:after{
display:inline-block;/*将最后⼀⾏变为⾏内状元素*/
width: 100%;/*使⽤⽗元素的宽度*/
content:'';
}
6、display属性(块元素)
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论