前端学习
1.html:页面架构
2.css:页面布局
3.javascript:页面交互 (python)
4.jquery:js的工具包 (相当于python里面的一个库)
5.bootstrap:快速页面搭建的框架
所谓的前端:写网页-(指的是用户能看到的一切的交互页面)-网页、app、小程序
HTML
1.什么是html:超文本标记语言
什么是超文本:文本,图片,音频,视频,超链接
什么是标记:符号,标签,=--=(没有逻辑可言)
2.组成:转义字符,指令,标签
3.学习目的:完成页面架构的搭建,什么样的标签,完成什么样的标签嵌套关系
指令
"""
指令:
被<>包裹的 以!开头
注释:
文档类型:
"""
转义字符:
"""
转义字符:被 & + ;包裹,内容为特殊的字母加数字组成
<:>
>: <
空格: ;
版权:©
"""
标签
"""
标签:被<> 包裹,以字母开头,可以包含数字加减号 并非下划线
系统标签:h1~h6、p、span、div、i、a、b、img、hr、br、table、form、input
自定义标签:满足合法命名的所有标签
注释:html语言中,系统建议只使用系统标签,不建议使用自定义标签
"""
活跃第一次玩
<html>
<head>
<meta charset="utf-8">
<title>第一次title>
<style>style>
<script>script>
head>
<body>
你好,html是我第一次使用,也是我的第一个页面的
<style>style>
<script>script>
body>
html>
  代表空格
标签
1.<h1>h1>
| 标题,页面的主标题
<h6>h6>
2.<br> 换行
3.<p> 字段---------自带换行 有段落间距
4.<span>一般用来嵌套文本类型标签 x<sup>2sup> h<sub>2sub>ospan>
5.<b>b> 加粗
6.<i>i> 斜体
7.<a href ="https://www.baidu.com" target ="_blank">前往百度a>
_blank 重新打开一个新的链接
8.<img title="鼠标悬浮的文本提示" src="链接" alt="img标签资源加载失败">
9.
常用操作 ul>li{第$列}*5
10.表格标签
<table>
<caption>表格标题caption>
<thead>
<tr>
<td>td>
tr>
thead>
<tbady>
<tr>
<td>td>
tr>
tbady>
<tfoot>
<tr>
<td>表尾td>
tr>
tfoot>
table>
表单
<html>
<head>
<meta charset="utf-8">
<title>表单标签title>
head>
<body>
<form action="">
<p>
<label for="username">账号:label>
<input id="username" type="text" value="Owen" name="usr">
p>
<p>
<label for="password">密码:label>
<input id="password" type="password" placeholder="请输入密码" name="pwd">
p>
<p>
<input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
p>
<p>
<input type="file" name="file" multiple>
p>
<p>
男<input type="radio" value="male" name="sex" checked>
女<input type="radio" value="female" name="sex">
p>
<p>
男<input type="checkbox" value="male" name="hobby" checked>
女<input type="checkbox" value="female" name="hobby" checked>
哇塞<input type="checkbox" value="other" name="hobby">
p>
<p>
<button type="button">普通按钮button>
<button type="reset">重置按钮button>
<button type="submit">提交按钮button>
p>
<p>
<textarea cols="30" rows="10">textarea>
p>
<p>
<input type="button" value="按钮" />
<input type="reset" value="重置" />
<input type="submit" value="登录" />
p>
form>
body>
html>
标签的分类
外部文件css文件
/*css/样式引入.css*/
三种css引入直接的优先级
优先级:
内联与外联之间没有优先级区别,由于html属于解释性语言,书写在下方的会覆盖上方的样式
行间式的优先级要高于一切
css的基础选择器
<html>
<head>
<meta charset="utf-8">
<title>css基础选择器title>
<style>
/*优先级:可以从作用范围来判断 - 作用范围越精确,优先级越高 */
/*1、统配选择器*/
* {
color: pink;
font-size: 12px;
}
/*2、标签选择器*/
h1 {
font-size: 20px;
}
/*3、类选择器*/
.h {
font-size: 30px!important;
}
.h2 {
font-size: 40px;
}
.h.h2 {
font-size: 50px;
}
/*4、id选择器*/
#hhh {
font-size: 100px;
}
/*优先级:!important > 行间式 > id > class > 标签 > 统配 */
style>
head>
<body>
<h1 class="h">1标题h1>
<h2 id="hhh" class="h h2" style="font-size: 12px">2标题h2>
body>
html>
程序的道路上一去不复返
End
来源:https://www.cnblogs.com/zhuyuanying123--/p/11266310.html