Day01-20210524-前端基础
程序员文章站
2022-06-04 09:09:04
...
总结
1.认识网页
<!-- html版本说明
!DOCTYPE -版本说明
html - html5(最新版本
)-->
<!DOCTYPE html>
<!--
网页基本结构：
整个网页是一个html标签。（有多少个网页就有多少个html标签,就有多少个html文件)
一个html标签里面有一个head标签和一个body标签
head负责网页头部的显示
body负责网页内容的显示
-->
<!--
2.标签语法
html是通过不同的标签来给网页提供不同的内容,标签分为双标签和但标签两种
双标签:<标签名 属性名1="属性值1" 属性名2="属性值2"></标签名>
单标签:<标签名 属性名1="属性值1" 属性名2="属性值2"/> 或者 <标签名 属性名1>
-->
<!-- html表示整个网页 -->
<html>
<head>
<!-- 设置html文件的编码方式 -->
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>你局我鸭儿不嘛</title>
<!-- 设置网页图标（link）
rek 代表方式
icon代表图标
type设置被动啊如的文件类型和格式:文件类型/文件后缀
herf表示被导入文件的路径-->
<link rel="icon" type="image/jpg" href="./img/鸭儿耶.jpg">"
</head>
<body>
<!-- 1,标题 h1-h6 -->
<h1>强手裂颅</h1>
<h2>屈人之威</h2>
<h3>叹为观止</h3>
<h4>蓄意轰拳</h4>
<!-- 2.段落 -自然段:p
一个段落一个p标签
-->
<p>疾风剑豪</p>
<!-- 3.普通文字:span,font -->
<span>斩钢闪</span>
<span>风之障壁</span>
<span>踏前斩</span>
<span>狂风绝息斩</span>
<!-- 4.文字相关符号及分段
1)强制换行:<br>
2)空格
-一个空格(空一个像素)
&emsp: -一个空格(按一次空格)
3）加粗 <b></b>
<strong></strong>
4）倾斜 <i></i>
-->
<p>
封魂剑魔<br>
<b>错玉切</b><br>
<i>凛神斩</i><br>
破障之锋<br>
封尘 绝念斩<br>
</p>
</body>
</html>
2.常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用标签</title>
</head>
<body>
<!-- 1.图片：img标签
src 属性 - 图片地址
title属性 -图片标题
alt属性 -图片加载失败的时候的提示信息
-->
<img src="./img/鸭儿耶.jpg" title="小鸭鸭" >
<!-- 2.超链接：a标签
<a href="跳转地址">可见可点击内容,可以是图片</a>
href属性 - 跳转地址
target属性 - 跳转方式，默认是_self（在当前页面中显示新的页面，使用_blank在新窗口显示新的页面
-->
<a href="https://www.baidu.com">百度一下</a>
</body>
</html>
3.表单相关标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.表单标签 -->
<!-- 表单标签用来对表单中素有相关标签进行重置和提交,单独使用没有价值 -->
<form action="" method="">
</form>
<form>
<!-- 2.标签相关标签 -->
<!-- 2.1input标签 -->
<!--
type 属性 -值不同,标签的表现和作用完全不同
value属性 -输入框中的默认内容
placeholder -输入提示信息
-->
<input type="" name="" id="" value="" placeholder=""/><br><br>
普通的文本输入框:<input type="text"/><br><br>
密码输入框: <input type="password"/><br><br>
单选按钮:<input type="radio" value="男" id="sex1" name="sex" checked="checked"/><label for ="sex1">男
<input type="radio" value="女" id="sex2" name="sex"/><label for ="sex2">女<br><br>
<!--
单选按钮需要通过lable标签来提供选项,当lable的for和input的id一致的时候点击lable
可以选中input,如果希望多个选项中有且只有一个选项处于选中状态,需要将多个选项的name
属性设置成相同的值
-->
复选按钮:
<input type="checkbox" id="ball1" name="ball"/><lable for="ball1">羽毛球
<input type="checkbox" id="ball2" name="ball"/><lable for="ball2">篮球
<input type="checkbox" id="ball3" name="ball"/><lable for="ball3">足球
<input type="checkbox" id="ball4" name="ball"/><lable for="ball4">乒乓球
<br><br>
普通按钮:<input type="button"/><br><br>
重置按钮:<input type="reset" /><br><br>
</form>
<!--
将需要执行重置的按钮和重置语句放在同一个form标签下即可
-->
颜色选择器:<input type="color" /><br><br>
文件选择: <input type="file"/><br><br>
日期选择: <input type="datetime-local"/>
图片选择: <input type="image"/>
</body>
</html>
4.表单相关标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单相关标签2</title>
</head>
<body>
<!-- 1.多行文本输入框 -->
<textarea rows="" cols="" placeholder="请输入评论..."></textarea>
<!-- 2.下拉列表 -->
<select name="">
<option value="">成都市</option>
<option value ="">攀枝花</option>
<option value ="">达州市</option>
<option value ="">你局我鸭儿不嘛</option>
</select>
<!-- 3.列表 -->
<!-- 1)有序列表 -->
<ol>
<li>Python</li>
<li>java</li>
<li>h5</li>
<li>ui</li>
<li>物联网</li>
</ol>
<!--2).无序列表 -->
<ul>
<li>Python</li>
<li>java</li>
<li>h5</li>
<li>ui</li>
<li>物联网</li>
</ul>
<!-- 3.div标签 -->
</body>
</html>
练习
import requests
#1.获取指定网页数据,并且返回结果
response = requests.get('https://www.sohu.com/')
#如果返回结果存在乱码,则需要设置编码方式
response.encoding = 'utf-8'
#2.获取请求内容
# 在请求成功的时候获取网页源代码
txts = response.text
from re import findall
result = findall(r'href=.*title=.*?>',txts)
result = ''.join(result)
# print(result)
# result1 = findall(r'href="(.*?)"',result)
# result2 = findall(r'title="(.*?)"',result)
re_str = r'href="(.*?)".*?title="(.*?)"'
result = findall(re_str,result)
print(result)
下一篇： 一个可以分析格式化文本的工具