12.13html框架
<! DOCTYPE html>
　　<html lang=“zh-CN”>
<head>
　　<meta charset=“GB2312、BIG5”>
　　<title>
　　</title>
</head>
　　<body>
　　　　你好吗
　　</body>
</html>
关于字符集，<meta charset=“UTF-8”>
即解析，存储，若翻译“你好吗”，charset要变成GB2312（简体中文），或BIG5（繁体中文）
或通用（GBK）但UTF-8基本所有语言都包含
14~.html标签的语义化
目的：使结构更加有序，看着清晰。
1，排版标签
标题标签（<h3>文本文档</h3>）
段落标签（<p>段落</p>）
水平线标签（<hr/ >）单身狗标签，即分界线，放在文本下面；
换行标签（<br />）放在话与话之间达到强制换行的效果
div和span标签（<div></div>一行只有一个，<span></span>一行可有好几个并排的产品）
  2，文本格式化标签
字体加粗（<b></b>或<strong></strong>，多数情况用strong，有强调语意的效果）
字体倾斜（<i></i>或<em></em>，多数情况用em）
删除线（<s></s>或<del></del>,多睡情况下用del）
下划线（<u></u>或<ins></ins>,所属情况下用ins）
 3，图像标签img(重点)
<img 属性1 属性2 。。。 />每个属性之间要有空格。
  • URL:是显示图片的，放在body那里，<img src=“ 图像URL” />
  • alt:如果图片不能正常显示，用讲解图片的文字去代替图片；如图
 
  • 上一个是alt，这个是title，
<h4> 带有title提示文本：鼠标放在图片上，显示的文字</h4>
<img src=“timg.gif(图片文件名)” title=“胡歌还在吹笛子等霍建华” />
  • 修改图片大小（宽度：width；高度：height，）一般只写一个，图片会等比例缩放
<img src=“timg.gif” title="。。。"width="600" />
  • 给图片加上边框
<img src=“timg.gif” title="。。。" width="600" border=“10” />,以后会讲到改变颜色
 
 
4，链接
英文缩写，锚：anchor (<a> </a>)
  • 外部链接
<a href=“http://www.baidu.com”>百度一下</a>
  • 内部链接
<a href="demo.html"> 点开链接处的的名称</a>
(demo.html:这里只是链接文件名）
  • 空链接
<a href="#" > 点链接处的名称</a>
  • 把图像变成链接
<a href="http://www.baidu.com"><img src="图像文件" /></a>
有一个很重要的点
之前的链接都是点击后直接覆盖当前页面，所以现在用_blank打开一个新页面
<a href=“http://www.baidu.com” target="_blank">百度一下</a>像这样
 
 
5，注释标签
添加注释（在代码中体现，方便看，不出现在浏览器中）
<!--注释内容-->
快捷方式：Ctrl+/这两个键
6,路径
第一层通常是目录文件夹，然后根目录
  • 相对路径，
路径分类
符号
说明
同一级路径
  
只需输入图像文件的名称即可，如<img src="baidu.gif" />。
下一级路径
“/”
图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images） 如<img src="data:images/baidu.gif" />。
上一级路径
“../”
在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推， 如<img src="../baidu.gif" />。
 
  1. 同一级路径：图片引用的时候，直接写图片的名字
  2. 下一级路径：直接在文件夹中再建一个文件夹
有两个斜杠杠
3，上一级路径（需要有../）
 
demo.html先从上一级里出来到html里，然后运用下一级路径的方法弄到images里，再找到图片。
如果有两级，则需要../../,两层，以此类推。
 
  • 绝对路径
绝对路径用的较少，我们理解下就可以了。 但是要注意，它的写法 特别是符号 \ 并不是 相对路径的 /
 
 
 
 
DAY2
 
目的：学习表格表单和列表
表格
  1. 创建表格
表格主要是为了展示数据
  • 创建：用table创建方格，用tr代表行，用td代表一行上的单元格
<table> 这里是表格内容</table>这里显示的就只是一个四方框框
<table>
<tr>缩进一个tab距离
<td>姓名</td>
<td>年龄</td>
<td>性别</td>再缩进一个tab距离，这里一行上的单元格（为了好看）
</tr>
</table>
2.表格属性
主要是在头头那儿添加属性，就是<table>后面
属性有常见的border（设置边框），width，height，还有align（设置和浏览器页面左对齐left，右对齐right，中间对齐center），还有十分重要的cellspacing(单元格与单元格之间的边框),cellpadding（单元格内容与单元格边框之间的距离）
 
 
<table border="2" width="500" height="200" align="center" >
3.表头单元格标签
想要让表头的字体居中加粗，只需要将之前表头两边的<td></td>改为<th></th>
4，表格标题
在<table>和<hr>之间，且与hr对齐那里，写上<caption>表格标题</caption>。
 
合并单元格
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
三部曲
  1. 确定是跨行合并还是跨列合并
  2. 根据先上到下，先左后右的顺序，找到相应的起始位置，然后输入格式和个数：
(如：跨行：<td rowspan="2">照片</td> 跨列：<td colspan="3">个人简历</td>)
拓展：表格划分结构（浏览器右击 检查）
列表
列表是为了让布局整齐，整洁，好看的，自由。
#无序列表（重点）
格式：(要ul li 二者搭配)每一个点点后面的东西都是并列的，没有排名
<ul>(ul里面只能包含li，像什么<p></p>等都是不能写在里面的)
<li>这里啥都能放，之前的图片格式链接啥的</li>
</ul>
效果图：
#有序列表（类似于排名什么的）（了解）
格式：
<ol>
<li>都OK</li>
</ol>
与无序列表不同于：最后浏览器显示的是1,2,3,4这类排名
#自定义列表
格式：
<dl>
<dt>北京</dt>
<dd>东城区</dd>......
</dl>
表单标签
input用法：制剂室在<body></body>之间输入文本框前面要闻，然后输入type="text".
关于文本框：
<body> <--文本框--> 用户名：<input type="text" value="请输入用户名"> <--密码框--> 密码：<input type="password" value="请输入密码"> </body>
  • 比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的。
name表单 <--文本框--> 用户名：<input type="text" name="username" value="请输入用户名" /> 昵称：<input type="text" name="nicheng" value="请输入用户名" />
的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
如果想要文本框里一开始就有默认值，用value;
  • name属性后面的值，是我们自己定义的。
关于单选框和复选框
单选框：
性别：男<input type="radio" name="sex" /> 女<input type="radio" name="sex" />
复选框：
爱好： 唱歌<input type="checkbox" name="hobby"/> 阅读<input type="checkbox" name="hobby"/> 小说<input type="checkbox" name="hobby"/> 旅游<input type="checkbox" name="hobby"/>
 
如果想要把一些按钮或选项提前设置好，需要在一些属性后面添加（checked="checked"）
 
还有几个按钮的格式，如上图，其中提交项只需（<input type="submit" />）,就会自动显示提交二字，但要是想更改名字，自行添加value...就OK。
label表单：
textarea文本域（像QQ空间留言之类可容量很多字）
<textarea>.....</textarea>
cols="每行中的字符数" rows="显示的行数" 我们实际开发不用
 
select下拉列表（供选择）
籍贯 <select> <option>北京</option> <option>天津</option> <option>山东</option> <option>江苏</option> </select>
如果想要一开始就固定一个选择项就
<option selected="selected" >北京</option>
加个东西
但大多数时候不用这个select，有缺点，不好看。
form表单域
<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form>
格式如上；
属性
属性值
作用
action
url地址
用于指定接收并处理表单数据的服务器程序的url地址。
method
get/post
用于设置表单数据的提交方式，其取值为get或post。
name
名称
用于指定表单的名称，以区分同一个页面中的多个表单。
 

web初始：html记忆的更多相关文章

  1. JavaScript的客户端存储

    一.前言: 客户端存储实际上就是Web浏览器的记忆功能,通过浏览器的API实现数据存储到硬盘: 二.存储的不同形式: 1.Web存储:localStorage 和 sessionStorage 代表同 ...

  2. JavaScript 客户端JavaScript之cookie和客户端持久性

    Document对象都有一个cookie属性,它使得JavaScript代码能够在用户的硬盘上持久地存储数据, 并且能够获取以这种方式存储的数据.客户端持久性是赋予WEB应用程序记忆力的一种简单方法. ...

  3. OAuth 2.0 认证的原理与实践

    摘要: 使用 OAuth 2.0 认证的的好处是显然易见的.你只需要用同一个账号密码,就能在各个网站进行访问,而免去了在每个网站都进行注册的繁琐过程. 本文将介绍 OAuth 2.0 的原理,并基于 ...

  4. Recurrent Neural Networks(RNN) 循环神经网络初探

    1. 针对机器学习/深度神经网络“记忆能力”的讨论 0x1:数据规律的本质是能代表此类数据的通用模式 - 数据挖掘的本质是在进行模式提取 数据的本质是存储信息的介质,而模式(pattern)是信息的一 ...

  5. 强化学习9-Deep Q Learning

    之前讲到Sarsa和Q Learning都不太适合解决大规模问题,为什么呢? 因为传统的强化学习都有一张Q表,这张Q表记录了每个状态下,每个动作的q值,但是现实问题往往极其复杂,其状态非常多,甚至是连 ...

  6. 【Spark】SparkStreaming-Kafka-集成-终极参考资料

    SparkStreaming-Kafka-集成-终极参考资料 Spark Streaming和Kafka整合开发指南(二) – 过往记忆 Streamingkafka零丢失 | 等英博客 spark- ...

  7. WebSettings 文档 API 翻译 常用设置

    . setDefaultFontSize(int size)  Sets the default font size. The default is 16. setDefaultTextEncodin ...

  8. WebSettings 最全属性说明

    setAllowContentAccess (boolean allow) 是否允许在WebView中访问内容URL(Content Url),默认允许.内容Url访问允许WebView从安装在系统中 ...

  9. 线上cpu100%问题快速定位

    问题描述:服务器上部署了多个tomcat,即垂直切分的Web站点,记忆多个Java微服务,突然收到运维的cpu异常告警. 步骤一:找到最耗cpu的进程 工具:top 方法: 执行top -c,显示进程 ...

  10. 2022-7-9 html 第七组 刘昀航

    ​ 一.基础认知 1.1 认识网页 网页的组成: 文字.图片.音频.视频.超链接 网页背后的本质:前端程序员写的代码 前端的代码通过什么软件转换成用户眼中的页面:浏览器转化(解析和渲染) 1.2 5大 ...

随机推荐

  1. Jquery_002

    6.$.ajax方法 $.ajax([options]) options是一个json格式的对象,参数是通过键值对的形式存在的 常用的参数如下: async:(默认: true) 默认设置下,所有请求 ...

  2. Unity WebGL与JS脚本交互

    1.Unity调用JavaScript脚本方法 官网文档 老版本方法 之前Unity提供的Application.ExternalCall方法现在已经被设为过时弃用.(但是现在还能用,但是不知道什么时 ...

  3. 51定时器：0xee的由来

    定时时间=(65536-初值)×(12/晶振频率) 因为51实验板的晶振为11.0592,所以 定时时间=(65536-初值)×(12/11.0592) 定时1ms:1000=(65536-初值)×( ...

  4. 【2020NOI.AC省选模拟#6】A. zyb的监控计划

    题目链接 原题解: 考虑我们需要的信息:子树里最浅的一个能向上的点是谁?子树里最深的一个没被覆盖的深度是多少? 我们记录一下$f_{i,a,b}$表示上面两个信息为$a$和$b$的时候,最少要花费的代 ...

  5. iClock数据服务器默认账号密码

    网络空间资产搜索: shodan 搜索 默认密码 admin/a***n End!!!

  6. 简介Hadoop

    Hadoop 简介 Hadoop 是什么 Hadoop 是一个提供分布式存储和计算的开源软件框架,它具有无共享.高可用(HA).弹性可扩展的特点,非常适合处理海量数量. Hadoop 是一个开源软件框 ...

  7. 2021/9/26 Leetcode 两数之和

    题目:给你两个整数 a 和 b ,不使用 运算符 + 和 - ​​​​​​​,计算并返回两整数之和. int getSum(int a, int b) { while(b != 0){ unsigne ...

  8. python修改图片名

    1 import glob 2 import os 3 4 inputPath = r'E:/data/pic/cat' 5 fileList = glob.glob(inputPath + '/*' ...

  9. Mac版SecureCRT修改配色方案

    SecureCRT是一个非常好用的远程连接工具,其可以配置特定关键词的颜色来使配置调试时更显目的辨别关键内容.网络上关于SecureCRT windows版本如何配置高亮配色的教程很多,但是关于Mac ...

  10. el-table 固定列错位问题

    1. 问题描述:el-table使用固定列时,使用keep-alive后页面切换导致该列错位. 2. 解决方法:使用el-table的doLayout方法对表格进行重新布局 activated() { ...