第四十三天

前端

https://www.cnblogs.com/clschao/articles/10077261.html

html -骨架

css - 颜色衣服尺寸'

js- 页面动态效果

jQuery - js的封装版

bootstrap - 上面所有内容的封装版

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
    <title id="1">小屋皇家赌场上线了</title>
</head>
<h1>小屋皇家赌场上线了
</h1>
</body>
</html>

title id="1"
title 标签
id="1"   属性值

标签严格封闭

< div> 和成对出现
一部分标签是单独呈现的，比如：

、等。
标签里面可以有若干属性，也可以不带属性。

<!DOCTYPE html>
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

标签分类

内敛标签<行内标签> :

不独占一行 ,内敛只能嵌套内敛b\i\u\s\button \span

块级标签(外行标签):

自己独占一行可以嵌套内敛和块级标签 h1-h6 p

<p>段落标签</p> #独占一个段落
<h1>标题1</h1>
<!--换行-->     <!> 换行
<br>     横线
<div></div>

p标签

不能嵌套 p标签也不能嵌套块级

html常用标签

head 常用标签

tittle
style
script
< link/> 单的

< meta/> 单的网页配置信息

<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">

刷新 
两秒之后调到 这个网址

指定文档类型

<meta http-equiv="content-Type" charset='UTF-8'>
指定文档的格式

告诉IE 以最高级渲染文档

<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦

name 属性

描述 

#关键字

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
#SEO就是做这个的，就是怎么让你们公司的网站在别人搜索的时候能够靠前显示，不算那个花钱的，百度是充值的，你冲个20w，别人可能一天就给你点击完了，特别的贵

# 描述

<meta name="description" content="xxxxxpythonxxx学习">  #是对这个文档的描述，在百度一些内容的页面上，f12打开看看

body标签内容

不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p> #独占一个段落
<h1>标题1</h1>
<!--换行-->     <!> 换行
<br>     横线

<!--水平线--><hr> #就是单独个一个水平线
每次加上一些内容，别忘了刷新一下页面，才能看到新添加的效果或者内容，其实上面这些标签很少用

<button>按钮</button>
<div>独占一行,没有效果</div>

<span>你好</span>   不独占一行 无效果

img 图片

<img src='' alt=''>

自带属性
src 图片路径
alt 没加载出来的时候显示
title 鼠标移动上面 显示的文字
width 宽度    一般用css 控制  这里不用
height 高度   一般用css 控制  这里不用
例子1
<img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585835167603&di=bf014e2fdc332120b20838f27b89a278&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg' alt='这是一个图片请稍等' title="图片" width="200" height="200">


例子2
放在同一文件夹里面
<img src='1.jpg' alt='这是一个图片请稍等'>

超链接标签

<a href="http://baidu.com"> 百度</a>
href 写网址
target 是否新建窗口
	target ='_self'  当前窗口
	target ='_blank' 新窗口

列表标签

有序列表
<ol type="i" start="4">
    <li>大</li>
    <li>小</li>
    <li>多</li>
    <li>少</li>
</ol>

无序列表
<ul type="circle" >
    <li>大</li>
    <li>小</li>
    <li>多</li>
    <li>少</li>
</ul>

菜单

<dl>

    <dt>菜单1</dt>
    <dd>大家</dd>
    <dt>菜单2</dt>
    <dd>小家</dd>
</dl>


dt 一级菜单
dd 二级菜单

内容	对应代码
空格(html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要这些特殊字符才能显示出空格效果)	&nbsp;
>	&gt;
<	&lt;
&	&amp;
¥	&yen;
版权标识（写公司网站的时候会用到）	&copy;
注册（一个圆圈里面有个R）	&reg;

表格

tr 一行
th 标题
td 内容的一行
属性:

border: 表格边框.
cellpadding: 内边距 （内边框 和 文字的距离）
cellspacing: 外边距.（内外 边框的距离）
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

例子

<table border="10" cellpadding="10" cellspacing="10">  <!-- border 外层边框为2 -->
    <thead>
        <tr>   <!--#th 表示一行-->
            <th>姓名</th>   <!--th 标题-->  <!-- -->
            <th>年龄</th>
            <th>爱好</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小屋</td>   <!--td 每一行的数据-->
            <td>18</td>
            <td>小丁</td>

        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>小丁</td>   <!--td 每一行的数据-->
            <td>18</td>
            <td>小屋</td>

        </tr>
    </tbody>
</table>

form 标签

触发提交数据的操作 buttom

<input type="submit" value="注册"> 
<button>提交</button>
   
两个都行

默认选中 checked

<input type="checkbox" name="1" value="a" checked>抽烟
<input type="checkbox" name="1" value="b" checked>喝酒

例子

<form action="http://127.0.0.1:9001">
    用户名:<input type="text" name="username" value="123">
    密码:<input type="text" name="password" value="123">
    <input type="radio" name="sex" value="1">男   <!--指定分组-->
    <input type="radio" name="sex" value="2">女
    <input type="checkbox" name="1" value="a">抽烟
    <input type="checkbox" name="1" value="b">喝酒
    <!--radio 单选-->
    <!--checkbox 多选-->
    <!--submit 提交到后台-->
    <button>提交</button>

    <input type=text" />
   <input type="password"  />
   <input type="date"  />
   <input type="reset"  />
   <input type="file"  />



    <input type="submit" value="注册">   <!--value修改注册按钮显示的数据-->
</form>

input标签

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框（不显示明文）
date	日期输入框
checkbox	复选框
radio	单选框
submit	提交按钮	#发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
reset	重置按钮	#页面不会刷新，将所有输入的内容清空
button	普通按钮
hidden	隐藏输入框
file	文本选择框	（等学了form表单之后再学这个）

name：表单提交时的“键”，注意和id的区别

value：表单提交时对应项的值

type="button", "reset", "submit"时，为按钮上显示的文本年内容

type="text","password","hidden"时，为输入框的初始值

type="checkbox", "radio", "file"，为输入相关联的值

checked：radio和checkbox默认被选中的项

readonly：text和password设置只读不可输入

disabled：所有input均适用变灰不可操作

select :下拉框单选

    <select name="city">
        <option value="1">1</option>
        <option value="1">2</option>
        <option value="1">3</option>
    </select>

select :下拉框多选加一个 multiple

  <select name="city" multiple>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

label标签

标识标签的功能

点击标签自动跳到对应的输入框里面
　　标签的 for 属性值应当与相关元素的 id 属性值相同。

例子

<form action="">
  <label for="username">用户名</label>  #for和input的id属性一样，就关联在一起了
  <input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

　　属性说明：

name：名称
rows：行数 #相当于文本框高度设置
cols：列数 #相当于文本框长度设置
disabled：禁用
maxlength：显示字符数，例如：maxlength='10' 最多输入十个字符

posted @ 2020-04-03 19:53 小丁变优秀阅读(155) 评论(0) 收藏举报

刷新页面返回顶部

小丁变优秀