今天开始学习前端代码html
1，网络编程的三大基石
url：统一资源定位符（项目外资源） 网址 通过url，可以唯一锁定一台计算机。
uri：统一资源标识符（当前项目内）
http：超文本传输协议
规定了客户端与服务器端通信的时候：信息的组成，格式，长度，，，
三大特性：
长连接：一旦客户端与服务器端建立连接，
客户端可以一直使用这个连接资源，
直到客户端主动断开连接，
这种连接方式就叫长连接。
单向性：只有客户端先发送了请求，服务区端才可以给出响应。
无状态：http协议规定，网络之间只进行数据传输，不进行数据的记录。
cookie session，，帮忙记录
html：超文本 标记/标签 语言
通过各种不同的标签，将服务器端返回的信息，解析后展示给用户看
图片标签：index.html
超链接标签：index.html
表格标签：table.html
表单标签：form.html
2，介绍页面组成：
欢迎页/首页：默认首页名 index
着陆页：
<!DOCTYPE html> --->文档类型声明：三种 过渡类型，严格类型，框架类型
<html></html> --->告诉浏览器，这个标签中的内容安装html的格式来读取
<meta charset="utf-8" /> //设置字符编码
<html>
<head>
<title>页面的标签</title>
</head>
</html>
<br/>换行
3，css 层叠样式表
作用：美化页面，页面布局div+css>table
使用css样式 +外观属性(了解)对页面做美化效果
属性：自身属性+外观属性
（不好用）<input height="50px" width="100px" /><br />
（好用）<input style="height:50px;width:100px;" /><br />
自身属性：html 赋值方式：属性名="值"
外观属性：css样式 赋值方式：
1，行内赋值 style="属性：值；属性：值"
缺点：外观属性直接写在标签里，样式与标签没有分离，那么代码没有重用性
2，内部样式赋值
使用[选择器] 将提取出来的外观样式，再作用到对应的标签上。
[基本选择器]：id 类 标签
优先级：id选择器>类选择器>标签选择器
交集 并集 全局
[关系选择器]：后代；子代；同辈
子代table>tbody{} 大于号
后代table tr{} 空格
同辈table~a{}
[属性选择器]：
[class^=cd]{ 以cd开头
background-color: chocolate;
}
[class$='1']{ 以1结尾
background-color:blanchedalmond;
}
div[class="cd5"][id]{
color: #7FFF00;
}
3，外部样式赋值：
1.创建外部样式文件：
将 选择器+外观属性 粘贴过去
2.在应用的页面里，导入外部样式文件：
【方式1】
<style type="text/css">
@import url("css/css1.css");
</style>
【方式2】
<link rel="stylesheet" href="css/css1.css" />
【总结】
作用范围：外部》内部》行内
修改，扩展效率: 外部》内部》行内
分离程度：外部》内部》行内
外部样式表：”页面/表现(样式与表现)与 样式分离“
以下是一些练习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度一下</title>
</head>
<body>
我的第一个页面
<br/>
<img src="img/屏幕截图 2024-08-05 221756.png" height="300px"
width="500px"alt="这个是壁纸"title="只狼-永真"/>
<!--
img 图片标签 单标签，行级标签：会自动和其他元素在一行 如果自己单独在一行就是块级标签
src="图片的地址" uri的地址
height,width 设置图片的高和宽
alt="当图片没有加载出来时，该属性值占据图片位置显示"
title="鼠标悬浮在图片上方时，显示的文字"
-->
<a href="https://www.baidu.com/s?wd=只狼" title="跳转只狼">点击跳转百度</a>
<a href="https://www.so.com/s?q=只狼">点击跳转</a>
<!--
a标签：超链接标签，成对标签，行级标签
常用属性：
href="要跳转的页面地址?变量名=值&变量名=值"--get提交方式
title="鼠标悬浮在链接上方时，显示的文字"
-->
<hr size="10" color="darkolivegreen">
<form action="https://www.baidu.com/s">
<a href="https://www.baidu.com/s?word=%E5%A5%A5%E8%BF%90%E4%BC%9A&rsv_dl=ay24_pd_gkpcx">
<img src="img/e8cbce1d53432a6950071bf26b640e2b.gif"height="100px" width="200px"/>
</a><br />
<input name="wd" style="height: 20px; width: 500px;" />
<input type="submit" value="百度一下"
style="height: 20px;" style="width: 500px;"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>介绍表格标签</title>
</head>
<body>
<!--
表格是由行组成的；
行是由单元格组成的；
表格合并步骤：
1，确定每行中单元格的个数
2，确定每个单元格的特性（跨行，跨列）
跨列：<td colspan="2"></td>
跨行：<td rowspan="2"></td>
-->
<table border="1px">
<tr>
<td colspan="2">00</td>
<td rowspan="2">00</td>
</tr>
<tr>
<td>00</td>
<td>00</td>
</tr>
</table>
<table border="1px">
<tr>
<td colspan="2">00</td>
<td>00</td>
<td>00</td>
<td>00</td>
</tr>
<tr>
<td>00</td>
<td colspan="2" rowspan="2">00</td>
<td rowspan="3">00</td>
<td>00</td>
</tr>
<tr>
<td>00</td>
<td>00</td>
</tr>
<tr>
<td>00</td>
<td>00</td>
<td>00</td>
<td>00</td>
</tr>
<tr>
<td>00</td>
<td>00</td>
<td colspan="3">00</td>
</tr>
<tr>
<td colspan="2">00</td>
<td>00</td>
<td>00</td>
<td>00</td>
</tr>
</table>
快捷建表：table[border="1px"]>tr*6>td{00}*5
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>介绍表单标签</title>
</head>
<body>
<!--
： form:表单标签，包裹着所有的表单元素
action="表单数据提交的位置"
method="表单数据提交的方式"
get:限制提交数据的类型（文本类型）；提交数据时，是以？的形式拼接在地址后，最终显示在地址栏里 不安全
提交参数 通过？拼接在提交地址后
地址栏里提交的信息长度有限
优点：可以做数据缓存
post:支持多类型提交；
提交参数，以数据包传递到服务器端 相对安全
提交的长度信息几乎没有限制
没有数据缓存
---各大浏览器厂商，默认用get提交方式
target="响应信息显示的位置"
幂等：只要提交的url是同一个，那么看到的响应结果就是一样的
文本框标签：<input
name="标签名，用来保存用户输入的信息"
maxlength="限制用户输入的内容的最大长度"
placeholder="文本框的提示信息"
readonly="readonly"只读,不能获得光标 ---简写:readonly
value="为文本框赋值"
disabled="disabled"禁用，禁止使用，提交表单时禁用值不会传走 ---简写：disabled
type="text"--设置input标签为文本框
/>相当于一个文本框
员工编号：<input name="wd" type="text"
maxlength="6"
placeholder="请输入员工编号，如：123..."
readonly
value="888"
disabled="disabled"/><br />
密码框:type="password"
单选按钮：
type="radio"
value="1"需要自己赋值
disabled="disabled"禁用
checked="checked"默认选中
复选框：
type="checkbox"
下拉列表：
selected="selected"默认选中
-->
<form name="myform" action="https://www.baidu.com/s"
method="get" target="_self">
员工编号：<input name="wd" type="text" /><br />
登录密码：<input name="pwd" type="password" /><br />
学校:<input name="school" type="radio" value="1" disabled/>小学
<input name="school" type="radio" value="2" checked/>中学
<input name="school" type="radio" value="3"/>大学<br />
你最喜欢的城市：<input type="checkbox" name="city" value="c01"/>北京
<input type="checkbox" name="city" value="c02"/>长春
<input type="checkbox" name="city" value="c03"/>郑州
<input type="checkbox" name="city" value="c04"/>上海<br />
入职时间：
2024年
<select name="hiredate">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5" selected="selected">5月</option>
<option value="6">6月</option>
</select><br />
文件域：
<input type="file" value="提交员工信息"/><br />
隐藏域:
<input type="hidden" name="hname" value="1" /><br />
<input type="submit" value="提交员工信息" /><br />
<input type="button" value="我是按钮"
onclick="JavaScript:alert('点我干啥？')"/><br />
<input type="button" value="我是提交按钮，点我提交"
onclick="demo1()"/><br />
<script type="text/javascript">
function demo1(){
document.myform.submit();
}
</script>
<input type="image" src="img/屏幕截图 2024-08-05 221756.png"
height="50px"width="100px" /><br />
<img src="img/屏幕截图 2024-08-05 221756.png"
height="50px"width="100px" /><br />
时间控件：
<input name="begindate" type="date" /><br />
<input name="begindate" type="week" /><br />
<input name="begindate" type="datetime-local" /><br />
邮箱控件：
<input name="email" type="email" /><br />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签练习1</title>
</head>
<body>
<form name="myform" action="https://www.baidu.com/s"
method="get" target="_self">
员工编号：<input name="wd" type="text" /><br />
登陆密码：<input name="pwd" type="password" /><br />
学校：<input name="school" type="radio" value="1" disabled/>小学
<input name="school" type="radio" value="2" checked/>中学
<input name="school" type="radio" value="3" />大学<br />
喜欢的城市：
<input name="city" type="checkbox" value="1" disabled/>长春
<input name="city" type="checkbox" value="2" checked />上海
<input name="city" type="checkbox" value="3" />北京
<input name="city" type="checkbox" value="4" />郑州<br />
入职时间:
2024年
<select name="hiredate"><br />
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6" selected>6月</option>
<option value="7">7月</option>
</select>
文件域：
<input name="file" type="file" value="提交员工信息"/><br />
隐藏域：
<input name="hidden" type="hidden" value="1"/><br />
提交员工信息：
<input type="submit" value="提交员工信息"/><br />
<input type="button" value="普通按钮"
onclick="Javascript:alert('点我干啥?')"/><br />
<input type="button" value="点我提交"
onclick="demo1()" /><br />
<script type="text/javascript">
function demo1(){
document.myform.submit();
}
</script>
<input type="image" src="img/屏幕截图 2024-08-05 221756.png"
height="50px" width="100px" /><br />
时间控件：
<input name="begindate" type="date" /><br />
<input name="begindate" type="week" /><br />
<input name="bgeindate" type="datetime-local" /><br />
邮箱控件：
<input name="email" type="email" /><br />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
<style type="text/css">
@import url("css/css1.css");
</style>
-->
<link rel="stylesheet" href="css/css1.css" />
<style type="text/css">
/*标签选择器*/
div{
color: red;
background-color: aqua;
}
/*.类名-->类选择器*/
.cd1{
color: #00FFFF;
background-color: chartreuse;
}
/*id选择器*/
#div1{
color: blue;
background-color: blueviolet;
}
/*全局选择器*/
*{
font-size: 20px;
}
/*交集选择器 标签 id 标签 类 两个都要满足*/
div#div1{
font-size: 50px;
}
/*并集选择器 有一个满足即可*/
div,span{
font-size: 30px;
}
table>tbody{
background-color: #7FFF00;
}
table~a{
color: #0000FF;
}
[class^=cd]{
background-color: chocolate;
}
[class$='1']{
background-color:blanchedalmond;
}
div[class="cd5"][id]{
color: #7FFF00;
}
</style>
</head>
<body>
<table>
<tbody></tbody> /*隐藏标签*/
<tr>
<td>00</td>
<td>00</td>
<td>00</td>
</tr>
<tr>
<td>00</td>
<td>00</td>
<td>00</td>
</tr>
</table>
简写：div[style="color:red;"]{我是div标签}*10
<div>我是div标签</div>
<div>我是div标签</div>
<div class="ad1" id="div1">我是div标签</div>
<div>我是div标签</div>
<div class="bd2">我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<div class="cd3">我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
简写：span{我是span标签}*10
<span>我是span标签</span>
<span>我是span标签</span>
<span>我是span标签</span>
<span class="cd4">我是span标签</span>
<span>我是span标签</span>
<span>我是span标签</span>
<span class="cd1">我是span标签</span>
<span>我是span标签</span>
<span class="cd5" id="div1">我是span标签</span>
<span>我是span标签</span>
</body>
</html>
/*标签选择器*/
div{
color: red;
background-color: aqua;
}
/*.类名-->类选择器*/
.cd1{
color: #00FFFF;
background-color: chartreuse;
}
/*id选择器*/
#div1{
color: blue;
background-color: blueviolet;
}
/*全局选择器*/
*{
font-size: 20px;
}
/*交集选择器 标签 id 标签 类 两个都要满足*/
div#div1{
font-size: 50px;
}
/*并集选择器 有一个满足即可*/
div,span{
font-size: 30px;
}
table>tbody{
background-color: #7FFF00;
}
table~a{
color: #0000FF;
}
[class^=cd]{
background-color: chocolate;
}
[class$='1']{
background-color:blanchedalmond;
}
div[class="cd5"][id]{
color: #7FFF00;
}
扫一扫
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
