HTML、CSS
W3C standard: Web pages are mainly composed of three parts
Structure: HTML
Presentation: CSS
Behavior: JavaScript
HTML
HTML: Hypertext Markup Language
- Hypertext: beyond the limitations of text, more powerful than ordinary text. In addition to text information, you can also define pictures, audio, video and other content
- Markup Language: A language made up of tags
HTML is a language, all web pages are written in HTML language, run on the browser, and HTML tags are parsed by the browser.
Tag use
form tab
table: define the table
- border: specifies the width of the table border
- width : specifies the width of the table
- cellspacing: specifies the space between cells
tr: define line
- align: defines the content alignment of the table row
- th: defines the header title
- td: define cell
- rowspan: Specifies the number of rows that a cell can span
- colspan: Specifies the number of columns that a cell can span
Example one:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签运用</title>
</head>
<body>
<font face="宋体">
<center>
<table border="1" cellspacing="0">
<tr> <th colspan="7" ><i>河马小学</i></th> </tr>
<tr align="center">
<th colspan="2"></th>
<th width="8%">星期一</th>
<th width="8%">星期二</th>
<th width="8%">星期三</th>
<th width="8%">星期四</th>
<th width="8%">星期五</th>
</tr>
<tr align="center">
<td rowspan="4" width="10%">上午</td>
<td width="8%">早自习</td>
<td>英语</td>
<td>语文</td>
<td >数学</td>
<td>生物</td>
<td>生物</td>
</tr>
<tr align="center">
<td>第一节</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>生物</td>
<td>生物</td>
</tr>
<tr align="center">
<td>第二节</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>生物</td>
<td>生物</td>
</tr>
<tr align="center">
<td>第三节</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr align="center">
<th colspan="7">午休</th>
</tr>
<tr align="center">
<td rowspan="3">下午</td>
<td>第四节</td>
<td>政治</td>
<td>地理</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr align="center">
<td>第五节</td>
<td>政治</td>
<td>地理</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr align="center">
<td>第六节</td>
<td>政治</td>
<td>地理</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
</table>
</center>
</font>
</body>
</html>
Example two:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body >
<center>
<table border="1" cellspacing="0" width="500">
<tr>
<th>序号</th>
<th>logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/三只松鼠.png" width="60" height="50"></td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/优衣库.png"width="60" height="50"></td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/小米.png"width="60" height="50"></td>
<td>小米</td>
<td>小米科技有限公司</td>
</tr>
</table>
</center>
</body>
</html>
Hyperlink
< a > defines a hyperlink, used to link to another resource
href: specifies the URL to access the resource
target: specifies the way to open the resource
- _self: default value, open on the current page
- _blank: open in a blank page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>河马去搬砖</title>
</head>
<body background="d.jpg">
<center>
<a href="https://www.csdn.net/" target="_self">
<font size="7" color="lightpink" face="bradley hand itc"> 河马去搬砖</font>
</a>
</center>
</body>
</html>
After packaging it yourself, it will be displayed on the desktop, making it easier to enter csdn learning
list label
- ol ordered list
- ul unordered list
- li defines list items
- type: set the bullet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol type="">
<li>咖啡</li>
<li>牛奶</li>
<li>奶茶</li>
</ol>
<br>
<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>奶茶</li>
</ul>
</body>
</html>
form label
Form: In the webpage, it is mainly responsible for the data collection function , using the < form > tag to define the form
form: define the form
-
action: specifies where to send the form data when submitting the form, URL
-
method : Specifies the method used to send form data
-
- get: The browser will attach the data directly after the action URL of the form , and the size is limited to 4KB
-
- -post: The browser will put the data into the HTTP request message body . unlimited size
Form items (elements): different types of input elements, drop-down lists, text fields, etc.
input form items control the input type through the type attribute
- checkbox check box
- radio defines radio buttons
- password defines the password
- reset reset
- submit submit
- button button
- hidden
- select drop-down list option defines list items
- textarea text field
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单项</title>
</head>
<body>
<!--
action 指明表单数据提交的url
表单数据要想被提交 必须指定其属性
method 表单提交的方式
get 默认值
请求的参数会拼接在url后面
url长度有限制 4KB 请求参数有限
post
请求的参数会在http协议的请求体中
请求参数无限制
-->
<!-- #代表 将数据提交到当前页面-->
<form action="#" method="post">
<!-- name表示提交内容的名字
value用来设置默认值-->
<label for="username">用户名:</label>
<input type="text" name="username" id="username"/> <br/>
<label for="phone">手机号:</label>
<input type="text" name="phone" id="phone"/><br/>
<label for="password"> 密 码:</label>
<input type="password" name="password" id="password"/><br/>
<label for="yanZhen">验证码:</label>
<input type="text" name="yanZhen" id="yanZhen"/><br/>
<label for="login">注册:</label>
<input type="submit" value="注册" id="login"/><br/>
<!--单选按钮 不加属性 数据都一样的 必须加属性 把value的值提交到服务端-->
性别：
<!--name 属性的值必须相同，才会有单选的效果-->
<input type="radio" name="gender" value="1" id="male"/>
<label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"/>
<label for="female">女</label>
<br/>
爱好：
<input type="checkbox" name="hobby" value="1" id="11"/> <label for="11">旅游</label>
<input type="checkbox" name="hobby" value="2" id="22"/> <label for="22">电影</label>
<input type="checkbox" name="hobby" value="3" id="33"/> <label for="33">游戏</label>
<br/>
头像:
<input type="file" value="选择文件" />
<br/>
<input type="reset" value="重置"/>
<input type="button" value="一个普通的按钮"/>
<br/>
当前城市：
<input type=""/>
<select name="city">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<br>
<br>
个人描述：
<textarea cols="20" rows="5"></textarea>
</form>
</body>
</html>
layout tab
< div > : Defines an area in an HTML document, often used with CSS to lay out web pages
<span>: Combining inline elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局</title>
</head>
<body background="d.jpg">
<div>王大傻</div>
<div>李小聪</div>
<span>王大傻</span>
<span>李小聪</span>
</body>
</html>
It can be seen that the div tags are not in one line, and the span tags are in the same line!
CSS
css (cascading style sheet) is a language that controls the performance of web pages
import method
There are three ways to import CSS into HTML:
Inline styles :
Inline styles lose many of the advantages of style sheets by mixing presentation and content. Use this approach sparingly, for example when styles only need to be applied once on an element.
To use inline styles, you need to use the style (style) attribute in the relevant tags. The Style attribute can contain any CSS property.
<div style="color: red">Hello CSS~</div>
Internal styles :
Internal style sheets should be used when individual documents require specific styles. You can define internal style sheets in the document head using the <style> tag, like this:
<style type="text/css">
div{
color: red;
}
</style>
External styles :
External style sheets are ideal when styles need to be applied to many pages. In the case of external style sheets, you can change the look of the entire site by changing one file. Each page links to the stylesheet using the <link> tag. The <link> tag is in the <head> header:
<!-- stylesheet:定义一个外部加载的样式表-->
<link rel="stylesheet" href="demo.css">
demo.css:
The browser will read the style declaration from the file demo.css and format the document according to it.
External style sheets can be edited in any text editor. The file cannot contain any html tags. Style sheets should be saved with a .css extension. The following is an example of a stylesheet file:
div{
color: red;
}
Code exercise:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导入方式</title>
<!-- css代码和html代码结合 -->
<!-- 内部样式： -->
<style>
p{
color: red;
}
</style>
<!-- 外部样式 stylesheet:定义一个外部加载的样式表 -->
<link href="../css/css导入.css" rel="stylesheet">
</head>
<body>
<!-- 方式一 内联样式 -->
<div style="color: red;">hello</div>
<!-- 内部样式： -->
<p>hello css</p>
<!-- 外部样式 -->
<span>hello css css</span>
</body>
</html>
Externally imported CSS files:
span{
color: red;
}
Selector
The selector is to select the element (tag) to be styled.
Each statement consists of an attribute and a value.
Classification:
- element selector
-
- element name {color: red;}
- id selector
-
- #id attribute value {color: red;}
- class selector
-
- .class attribute value {color: red;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 选择器是选择需要选取设置样式的元素 -->
<style>
/* 元素选择器*/
div{
color: #006400;
font-size:35px;
}
/* id选择器*/
#name{
color: black;
}
/* 类选择器*/
.cls{
color: aquamarine;
}
</style>
</head>
<body>
<div>css1</div>
<div id="name">css2</div>
<span class="cls">span</span>
</body>
</html>
