0411学习记录

最新推荐文章于 2023-10-26 00:03:49 发布

Gananldo04

最新推荐文章于 2023-10-26 00:03:49 发布

阅读量156

点赞数

分类专栏： WEB全栈文章标签： html

本文链接：https://blog.csdn.net/Gananldo04/article/details/105535720

版权

WEB全栈专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在这里插入图片描述第一节：html
html: 是超文本标记语言作用是描述网页一种语言
html不是编程语言是标记语言
使用html的标记标签描述网页
html文档也叫web页面

什么是html标签：是使用 html标签通常成对出现也有单标签的
eg: <html>要编辑的内容</html> <html/>
<!DOCTYPE HTML> 声明当前的文档是html
<html></html> 标签里面显示当前网页的所有信息 lang=“en” 标注网页的语言 en 英语 ch 中文
head 标签头标签 title标签显示在网页的选项卡区域
body 标签显示网页的所有内容
meta 标签信息标签 charset=utf-8 标注当前网页的编码格式 utf-8 meta 标签在head里面

多行注释快捷键 ctrl +/
复制当前行到下一行 ctrl+d
标签的快捷写法标签字母 + tab键网页格式化快捷键 ctrl + alt +d +l
网页的渲染格式是从左到右从上到下渲染
常用的标签
1.标题标签通过h1 -h6 定义的作用文本加粗 1-6 字体大小由大到小换行
2.文本格式化标签没有换行功能
i标签斜体
b标签加粗
u标签添加下滑线
sub 下标标签
sup 上标标签
em 斜体标签和 i一致
small 小号字
strong 加粗和 b 一致
del 添加删除线
pre 预定义格式化标签预先格式化标签
3. br 强制换行
4.hr标签水平线
5. p 段落标签将文本分割为段落换行属性 align=center 文本居中 align=right 文本靠右 align=left 靠左默认是left
注意：在html里面回车不能再网页上换行

源码

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>第一个网页</title>
</head>
<body>
body里面显示网页的所有内容
第二行字
<!--标题标签-->
<h1>我是标题标签</h1>

<h2>我是标题标签</h2>

<h3>我是标题标签</h3>
<h4>我是标题标签</h4>
<h5>我是标题标签</h5>
<h6>我是标题标签</h6>
<hr/>
<p align="center">居中</p>

<p align="right">靠右</p>

<p align="left">靠左</p>
<hr/>
<i>斜体</i>
<b>加粗</b>
<u>下划线</u>
H<sub>2</sub>o 下标
3<sup>2</sup>=9 上标
<em>斜体</em>
<small>变小</small>
<strong>加粗</strong>
<del>删除线</del>
<pre>
文本预格式
编辑什么样
显示什么样
</pre>

第一个网页 body里面显示网页的所有内容第二行字

我是标题标签

居中

靠右

靠左

斜体加粗下划线 H ₂o 下标 3 ²=9 上标斜体变小加粗 ~~删除线~~

文本预格式
编辑什么样
显示什么样

第二节：超链接链接 a 标签超文本链接跳转页面的 href 里面写的是跳转的地址相对路径和绝对路径远程路径 href 默认写# 代表跳转当前页面

   <a href=""></a>

eg：百度地址 http://www.baidu.com <a href="http://www.baidu.com" target="_blank">百度</a>
属性：target target="_self" 在当前网页里面打开 target="_blank" 重新打开一个选项卡
默认是在当前网页里面打开
eg: 点击a链接打开当前项目的网页使用相对路径来做（相对于当前文件的位置）
绝对路径是文件所在盘符的目录 F:/web-4.11/0411/index.html

http://localhost:63342/web-4.11/0411/index%E4%B8%8B%E5%8D%88.html
上面这个网页地址是服务端地址，从服务端打开会出现这个样子
因为webstrom 自带服务端 localhost 是主机名称 63342 端口号

网页从服务端打开里面路径不能写绝对路径 很容易造成文件的丢失
相对路径是绝对路径的一部分
远程路径就是相对路径只不过把项目放到远程的服务器上面通过远程服务器来访问的路径

1.下面这些都是相对路径的写法

a.同级目录下  可以直接写名称
例如：<a href="index.html">打开index.html</a>
b.下面这种是按照父文件去写的
 一个点 代表从当前文件向外跳转一级
例如：<a href="./index.html">打开index.html</a>
c.跳转兄弟文件里面的子目录的两种写法
例如：<a href="page/page1.html">跳转page1</a>
例如：<a href="./page/page1.html">跳转page1</a>
2.绝对路径
绝对路径想要有效果   当前文件必须从静态文件（文件盘里）打开 不能用webstorm打开 要用浏览器打开
例如：<a href="F:/web-4.11/0411/index.html">跳转index 页面</a>

使用a链接  制作锚标
当前页面的锚标。
#代表跳转当前页面
<a href="#target">跳转当前页面的锚标记</a>
跨页面的锚标
<a href="./page/page1.html#target">跳转到page页面的锚标位置</a>
<br/>
<br/>
<br/>
下面写的a链接   name属性  标记的位置
<a  name="target">锚标的一种写法1</a>
别的标签写id属性   通过锚标可以实现跳转
<p id="target">锚标的另一种写法2</p>
<br/>
<br/>
<br/>
<br/>

七.图片标签 img src属性是图片的路径（远程或者相对） alt 属性是图片加载失败的时候显示的内容
属性 align 作用的是图片效果是后边的文字对齐
八.列表标签
有序列表 ol li 属性type 修改序号的显示 type=1则按123456排序；type=a则按照abcd排序
无序列表 ul li 修改type无用所以有没有type都一样
九.区块标签 div 相当一个容器主要用来做网页的框架布局换行
span 标签专门放置文字的标签
表单对象元素标签
十.input 标签
1.type属性值：
属性： type 决定当前的input标签的类型
没有type属性的时候默认单行文本框
text 代表单行文本框
password 代表密码框
checkbox 代表复选框

value属性是input 标签的值
maxlength属性是输入的最大长度
placeholder属性是提示信息

<input type="text"  value=""  maxlength="10"  placeholder="请输入账号...">
<input type="password"  value=""  placeholder="请输入密码..."/>
<input type="button" value="登录"/>

2.checkbox value属性不是界面显示的，是给代码使用的
checkbox 默认属性是 checked

<input type="checkbox" value="篮球" checked/>篮球    默认先勾选篮球
<input type="checkbox" value="足球"/>足球

3.radio value 也是给代码使用的
把多个radio做成单选框给radio起相同的名称
radio 选择 checked 默认选择

<input type="radio" value="0" checked name="sex"/>男
<input type="radio" value="1" name="sex"/>女

4.打开文件资源管理器，文件上传的<input type="file"/>

5.type 为submit 表单提交按钮时，单独写的时候是无效的

<input type="submit" value="注册"/>
<input type="reset" value="清空"/> 清除

6.select 下拉菜单默认选择 selected

<select>
    <option>——请选择——</option>
    <option value="西安市">——西安市——</option>
    <option value="宝鸡市" selected>——宝鸡市——</option>
    <option value="咸阳市">——咸阳市——</option>
</select>

7.文本域多行文本框
rows 行
cols 列控制外观大小
placeholder 属性是提示信息

<textarea rows="10"  cols="10" placeholder="请输入..."></textarea>

8.表单元素标签 form 做用户注册或者登陆
属性action 提交表单的数据到后台的路径
method 属性表单提交的方式 get 显示提交（不安全数据量大） post 隐式提交（安全数据量小）
delete 专门针对于删除操作的时候使用
insert 专门针对于增加造作
update 专门针对修改操作

<form action="    "    method="   "></form>

实例：

get  方式提交  会把 表单的数据 显示到路径的后边>
<post  隐式提交   比较安全>
<form action="" method="post">
    <ul>
        <li>昵称：<br/><input name="nickname" type="text"/></li>
        <li>年龄：<br/><input name="age" type="text"/></li>
        <li>性别：<br/><input type="radio" value="男" name="sex" checked/>男<input type="radio" value="女" name="sex"/>女</li>
        <li>职业：<br/><input name="job" type="text"/></li>
        <li>爱好：<br/><input name="hobby" type="checkbox" value="篮球"/>篮球
            <input name="hobby" type="checkbox" value="足球"/>足球
            <input name="hobby" type="checkbox" value="羽毛球"/>羽毛球
        </li>
        <li>工作经验：<br/>
            <select name="jobyear">
                <option value="1" selected >--1年--</option>
                <option value="2">--2年--</option>
                <option value="3">--3年--</option>
                <option value="4">--4年--</option>
                <option value="5">--5年--</option>
            </select>
        </li>
        <li>
            备注：<br/>
            <textarea name="save" rows="12" cols="21"></textarea>
        </li>
        重置按钮 是重置表单
        提交按钮是提交表单的数据
        <li><input type="submit" value="提交"/>   <input type="reset" value="重置"/> </li>
    </ul>
</form>

十一.table 是表格元素标签
border 属性设置表格的边框宽度
width 属性设置表格的宽
algin 属性设置表格居中方式
cellspacing属性设置列之间的间距的
cellpadding 属性设置列里面的内间距的按照左上来设置的距离右和下自动 cellpadding=“10”
bgcolor 属性设置表格的颜色
th 也是列只不过文本加重居中
caption 表头标签
rowspan 跨行
colspan 跨列（表格的跨行和跨列计数的时候算自身）

<table bgcolor="#00bfff" border="1"  width="400" cellspacing="0" align="center">
    <caption>202010086-学生信息</caption>
    <tr bgcolor="#fff">
        <th rowspan="5">10086班</th>
        <th colspan="5">学生的基本信息</th>
    </tr>
    <tr bgcolor="#7fffd4">
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>地址</th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
        <td>西安市</td>
    </tr>
    <tr align="center">
        <td>2</td>
        <td>李四</td>
        <td>20</td>
        <td>女</td>
        <td>咸阳市</td>
    </tr>
    <tr align="center">
        <td>3</td>
        <td>王五</td>
        <td>17</td>
        <td>男</td>
        <td>宝鸡市</td>
    </tr>
</table>

202010086-学生信息
学生的基本信息
序号	姓名	年龄	性别	地址
1	张三	18	男	西安市
2	李四	20	女	咸阳市
3	王五	17	男	宝鸡市

十一. iframe 框架是一个内嵌框架用于：制作小型的企业系统 w3c菜鸟也可以使用iframe 框架

src 属性：内嵌的地址
width属性：设置宽
height属性：设置高的为什么设置高100% 无效浏览器没有高只有宽
name属性名称
frameborde属性框架边框设置0

实现点击a链接在iframe 框架中显示嵌入的网页

<a href="./index.html" target="iframeinfo">index</a>
<a href="./index-a链接.html" target="iframeinfo">index-a链接</a>
<a href="./index-table.html" target="iframeinfo">index表格</a>
<a href="./标签的简单案例.html" target="iframeinfo">表单案例</a>
<iframe name="iframeinfo" src="./index.html" width="100%" height="700" frameborder="0"></iframe>

Gananldo04

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0411学习记录

第一节：htmlhtml: 是超文本标记语言作用是描述网页一种语言html不是编程语言是标记语言使用html的标记标签描述网页html文档也叫web页面什么是html标签：是使用 html标签通常成对出现也有单标签的eg: 要编辑的内容声明当前的文档是html 标签里面显示当前网页的所有信息 lang="en" 标注网页的语言 en 英语 ch 中文head...
复制链接

扫一扫