前端--一html

最新推荐文章于 2022-07-11 11:19:51 发布

慕村古楼诉

最新推荐文章于 2022-07-11 11:19:51 发布

阅读量142

点赞数 1

分类专栏：前端知识

本文链接：https://blog.csdn.net/weixin_43619912/article/details/95255092

版权

前端知识专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、什么是HTML

超文本标签语言 / 预定义标签语言
HTML 网页的源码

二、常用的开发工具

记事本
dreamweaver Adobe 不推荐
Hbuilder
webStorm

三、头部<head></head>

1.title 用于设置页面选项卡标题

2.meta

设置页面的编码格式/字符集 <meta charset=”utf-8”/>
设置页面在搜索引擎中搜索的匹配关键字 <meta name=”keywords” content=”关键字1,关键字2,…”/>
设置页面在搜索引擎中显示的描述内容 <meta name=”description” content=”描述文本”/>

四、身体部分

1.块级block 前后换行宽高可控（想在同一行显示需浮动或者display: inline）

h1->h6 标题标签从一级标题到六级标题字体依次减小文字均有加粗的效果   对于搜索殷勤来说标题标签的文字匹配度高于普通文字
p 段落标签主要用于划分打断文本的段落区域前后行距有调整 w3c标准中 P标签不能嵌套使用所以一般不用做布局
div 层标签可以嵌套使用对内容没有默认的修饰效果一般用于布局
hr 不成对出现划分一条宽度为100%的水平分割线
ol-li 有序列表标签组   ol 用于划分列表区域 li用于定义列表中的列表项默认以阿拉伯数字作为序号可以通过ol标签中的type属性进行序号调整主要的值为 type=”1/a/A/i/I”    多用于导航(nav) 树形菜单(js)

<ol type=””>

<li>内容</li>

</ol>

无序列表标签组 ul-li 默认拥有实心小圆点的标识可以通过type进行符号调整 circle空心圆   disc 实心圆 square 实心小方块

<ul type=””>

<li>内容</li>

</ul>

自定义列表非常适合处理图文混编的效果

dl 划分列表区域

dt 放置列表标题一般可以放置一张图片

dd 放置列表的描述

该标签组特别适合制作图文混编的效果在一组dl 标签中 dt和dd标签的数量以及顺序没有限制

<dl>

<dt>标题/图片</dt>

<dd>描述</dd>

</dl>

dt和dd标签的数量及顺序没有任何要求

表单   form

<form action="index.html" method="post"></form>

1.重要的属性

1）action   用于设置表单数据提交的目标位置

# 提交给本页
其他站点页面文件路径
网络路径

2）method 用于设置表单数据提交的方式

get 类似于明信片    承载的数据量有限   数据暴露在url地址栏中不安全
post 类似于信封提交承载的数据量无穷大隐藏传输安全

2.表单中的表单元素

1）文本框

<input type="text" name="提交的键的名字" maxlength="设置文本框最大字符输入的数量" value="提交额的数据值" />

2）密码框

<input type="password" maxlength="5" name="loginPwd" value="12345" />

3）单选按钮

name属性用于进行单选按钮的组别划分同组单选按钮最多只能有一个被选中
checked 属性可以设置某一个单选按钮默认被选中如果同组的多个单选按钮均具有该属性则最后一个的选中效果生效
value属性可以设置当某个单选按钮被选中时提交的具体数据

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

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

4）复选框

<input type="checkbox" checked="checked" name="hobby" value="篮球"/>篮球  

<input type="checkbox" name="hobby" value="足球"/>足球

<input type="checkbox" name="hobby" value="排球"/>排球

<input type="checkbox" name="hobby" value="乒乓球"/>乒乓球

5）隐藏域

在页面上不呈现任何效果隐藏的传递数据

<input type="hidden" value="test" name="hid" />

6）文件上传框

该标签可以在用户点击是打开计算机资源管理器进行文件的选择

<input type="file" name="img" /><br />

7）提交按钮

该按钮一旦被点击则会携带表单中的所有其他元素及数据按照 form设置的地址和提交方式进行提交

<input type="submit" value="注册" />

8）重置按钮

将表单中所有表单元素还原成初始状态

<input type="reset" value="重置" />

9）自定义按钮

功能需要使用js 进行注入

<input type="button" value="点我啊"/>

10）图片按钮

该按钮具备提交按钮的功能

<input type="image" src="../img/watch.png" width="50" height="50" />

11）下拉列表

select 标签用于设置列表整体区域 name
option 用于提供列表的项 value
如果非顺序首项需要默认选中增加一个selected=”selected”

<select name="city">

<option value="cq">重庆</option>

<option value="bj" selected="selected">北京</option>

<option value="sh">上海</option>

</select>

12）文本域多行文本框

textarea   属性

cols 用于设置每一行最多存放的字符数(英文字符中文字符每一个占据两个英文字符的宽度要特别计算滚动条的尺寸)

rows 代表文本域中最多显示多少行文字超过行数右侧出现滚动条

如果文本域中的文本希望保持只读状态需要提供属性 readonly=”readonly”

12）表单的高级用法

只读和禁用属性

readonly：希望某个框内的内容只允许用户看，不能修改
disabled：因没达到使用的条件，限制用户使用

<!--1、用户不能修改协议
2、勾选“同意以上协议”，才允许点击“注册”按钮-->

 <textarea name="content" cols="60" rows="8" readonly="readonly">
    欢迎阅读服务条款协议，贵美的权利和义务......
</textarea><br /><br />
   同意以上协议<input name="agree" type="checkbox" /> 
<input name="btn" type="submit" value="注册" disabled="disabled" />

type	功能	例子
text	单行文本输入	<input type="text" name="username" />
password	密码	<input type="password" name="password" />
radio	单选	<input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女
checkbox	多选	<input type="checkbox" name="hobby" value="书" />书 <input type="checkbox" name="hobby" value="画" />画
reset	重置表单数据	<input type="reset" value="重置" />
file	文件上传	<input type="file" name="files" />
submit	提交表单数据	<input type="submit" value="提交" />
image	图形提交按钮	<input type="image" src="images/button.gif" />
button	普通按钮	<input type="button" value="播放音乐" />

2.行级inline 前后不换行宽高不可控（默认设置宽度是不起作用,需设置 display: inline-block或者block才行）

1）img 用于引入图片的标签

（1）相对路径与绝对路径

绝对路径以盘符作为起点访问文件目标的路径
相对路径以当前正在编写的文件本身作为起点访问目标文件的路径

（2）属性

src 用于设置图片标签要展示的图片文件路径(相对路径
width/height 分别用于调整显示图片的宽度高度如果不设置图片将以文件本身的尺寸进行显示如果只设置一个另一个将等比例缩放
title 用于设置鼠标悬停在图片上方时显示的文本标题
alt 图片无法征程显示时替换图片的文本信息

2）a 超链接标签

（1）href 必要属性用于设置超链接被点击时跳转的目标位置

# 重新加载本页
本站点的其他页面文件地址
网络url

（2）target 用于设置跳转的新页面打开的位置

_self 默认值代表在本窗口(本选项卡) 加载新页面
_blank 在一个新的选项卡中加载新页面

（3）超链接的三种使用方式

常规的形成路径切换跳转的超链接

<a href=”网络路径/本地文件路径” target=”目标页面加载的位置/_self/_blank”>文本/图片</a>

锚链接在本页面中进行访问位置的切换

标记锚记点 <a name=”标记名称”></a>
使用另一个超链接跳转到标记位置 <a href=”页面路径#标记名称”></a>

功能性连接

点击超链接打开本地的qq 迅雷邮箱等软件

<a href="mailto: guimeiWebMater@gmgw.com">站长信箱</a>

打开本地的一个邮箱工具
<a href=”mailto:1936673153@qq.com”>站长邮箱</a>

3）区域标签 span

用于从大量内容中隔离出其中的一小部分做特殊的处理 <span></span>

4）b标签和 i标签和 u标签加粗斜体下划线

5）br标签换行标签 <br/>

6）特殊符号

1.空格    &nbsp;
2.<    &lt;
3.>    &gt;
4.双引号  &quot;
5.版权符号  &copy;
6.人民币符号 &yen;
7.html特殊符号参照表

7）文字标签font标签可以在目前进行文字的外观控制

color属性
使用英文单词提供颜色设置
使用6位16进制数提供颜色设置 #FE3
size 用于设置文字的大小只能从1-7 7最大 1最小
face 用于设置文字的字型

<font size="80" color="royalblue"  face="Old Script">hello world</font>

8）预格式标签

预格式标签 <pre></pre>

五、框架集/内嵌框架

1.框架集 frameset

cols 纵向划分区域 cols=”30%,*”
rows 横向划分区域
框架区域 <frame src=”在该区域展示的页面URL” name=”名字” />

<frameset rows="30%,*">
        <frame src="fir.html" />
        <frameset cols="30%,*">
            <frame src="index.html" />
            <frame src="sec.html" name="right"/>
        </frameset>
    </frameset>

2.内嵌框架 iframe

src 用于设置要显示的页面路径
width/height 宽高
scrolling 用于设置内嵌框架是否拥有滚动条

慕村古楼诉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端--一html

一、什么是HTML超文本标签语言 / 预定义标签语言 HTML 网页的源码二、常用的开发工具记事本 dreamweaver Adobe 不推荐 Hbuilder webStorm三、头部<head></head>1.title 用于设置页面选项卡标题2.meta设置页面的编码格式/字符集 <meta chars...
复制链接

扫一扫