网硕互联帮助中心文章目录
- 关于html的一些介绍
- 前端环境的搭建
- html
-
- html常见标签
关于html的一些介绍
浏览器中按F12能看到当前页面的前端代码
–其中elements是查看标签结构 console是查看控制台 network是查看前后端交互过程
vscode里面创建.html文件然后输入!再按Tab就能给你快速生成一个框架:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>：这是文档类型声明，写在 HTML 文件的最开头，作用是告诉浏览器当前文件遵循 HTML5 标准，让浏览器以标准模式渲染页面
<html lang="en">HTML 的根标签，lang属性用于声明页面的主要语言。lang="en"表示页面为英文页面，浏览器会根据这个属性判断是否提供翻译提示；中文网站通常会改为lang="zh-CN"。
name="viewport"：指定该 meta 标签的作用是定义页面的 “视口”（即设备屏幕上显示网页的可视区域）。
width=device-width：让页面宽度自动适配设备屏幕宽度，避免手机端页面显示不全、需要横向滑动的问题。
initial-scale=1.0：设置页面加载时的初始缩放比例为 1（不放大也不缩小），保证页面以原始大小正常显示。
引申:以后需要图标图片可以去 https://www.iconfont.cn/ 找
前端环境的搭建
用vscode的话直接创建.html结尾的文件就行了
关于vscode里面的前端插件推荐:
Auto Rename Tag:自动同步修改成对的 HTML 标签
view-in-browser:快速在浏览器中打开本地 HTML 文件
Live Server:启动本地开发服务器 + 页面自动刷新(就不用按F5或者重新进入才能刷新了)
关于前端代码的调试:F12去console然后shift+ctrl+r
html
html标签:eg:<body>hello<body>
标签名 (body) 放到 < > 中
大部分标签成对出现. <body> 为开始标签，</body> 为结束标签.
少数标签只有开始标签，称为 “单标签”.
开始标签和结束标签之间，写的是标签的内容.
开始标签中可能会带有 “属性”
标签的层次关系有:兄弟关系和父子关系
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>
head 和 body 是 html 的子标签
title 是 head 的子标签. head 是 title 的父标签.
head 和 body 之间是兄弟关系.
html文件的基本结构:
<html>
<head>
<title>第一个页面</title>
</head>
<body>
页面中显示的内容
</body>
</html>
html 标签是整个 html 文件的根标签 (最顶层标签)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题
html常见标签
注释标签:<!– 我是注释内容 –> –也可以通过ctrl+/来进行或取消注释 –css的话是//
标题标签:h1-h6有六个 从 h1 – h6. 数字越大，字体越小和越细
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
段落标签:
<p>这是一个段落</p>
换行标签:（这是个单标签）
下面会换行<br/>
这俩的区别:段落标签的那种会有明显的间隔空白，换行标签没有
关于文本的排版:
1.会自动根据浏览器宽度来决定排版(多久会迫不得已换行显示)
2.html内容首位处的换行和空格均无效
3.html文本中直接输入换行显示出来其实只是一个空格
4.html文本中输入多个空格显示出来只有一个空格
引申:html文本中，有些字符必须要打成转移字符才能正确显示:
比如:空格，< > &
空格需要 才能用于打出连续的空格
<才能显示< >才能显示> &才能显示&
格式化标签：
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
图片标签:
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">
src是必须带上的,里面填相对路径或者绝对路径或者图片的url
其他属性可填可不填:
alt: 替换文本。图片加载失败时会才会显示这个文本
title: 提示文本。鼠标放到图片上，就会有提示.
width/height: 控制宽度高度。高度和宽度一般改一个就行，另外一个会等比例缩放。否则就会图片失衡.
border: 边框，参数是宽度的像素。但是一般使用 CSS 来设定.
–属性之间用空格(多个空格也行)或换行分割
–属性之间不分先后顺序
超链接标签:(标签中间必须有文案/图片，不然a标签的宽度为0，根本点不了超链接)
<a href="http://www.baidu.com" target="_blank">百度</a>
href: 必须具备，表示点击后会跳转到哪个页面.
href后面可以带的链接有:
1.外部链接:eg:http://www.baidu.com
2.网页内部的链接(写相对路径)
3.空链接:eg:#
4.下载链接(点击后就直接触发下载):eg:<a href="test.zip">下载文件</a>，这样就会直接下载当前目录下的test.zip文件
5.网页元素标签:<a href=“http://www.sogou.com”> <img src=“rose.jpg” alt=“”> </a>，这样的话，点击这个照片就会自动跳转到那个链接
6.锚点链接:点击后跳转到当前页面的指定位置
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情<br>
第一集剧情<br>
…
</p>
<p id="two">
第二集剧情<br>
第二集剧情<br>
…
</p>
<p id="three">
第三集剧情<br>
第三集剧情<br>
…
</p>
想让能点击但是不能跳转的话填:<a href="javascript:void(0);"> 或者 <a href="javascript:;">
target: 打开方式。默认是 _self. 如果是 _blank 则用新的标签页打开.
默认的超链接颜色:
没有访问过这个超链接的话是蓝色；已经访问过了的话是紫色；鼠标放上去的话是红色
表格标签:
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>10</td>
</tr>
<tr>
<td>李四</td>
<td colspan="2">女</td>
<td>11</td>
</tr>
</table>
table 标签：表示整个表格
table标签的属性有:
align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框 (数字越大，边框越粗), "" 表示没边框.
cellpadding: 内容距离边框的距离，默认 1 像素
cellspacing: 单元格之间的距离。默认为 2 像素
width / height: 设置尺寸.
tr: 表示表格的一行
td: 表示一个单元格
合并单元格:
跨行合并: rowspan="n"
跨列合并: colspan="n"
跨列合并，左侧是目标单元格；跨行合并，上方是目标单元格
th: 表示表头单元格。会居中加粗
thead: 表格的头部区域 (注意和 th 区分，范围是比 th 要大的)
tbody: 表格的主体区域.
列表标签:
无序列表 ul li
有序列表 ol li
自定义列表 dl (总标签) dt (小标题) dd (围绕标题来说明)
ul/ol 中只能放 li 不能放其他标签，dl 中只能放 dt 和 dd
li 中可以放其他标签.
<h3>无序列表</h3>
<ul>
<li>这是无序列表</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>这是有序列表</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>这是自定义列表</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
</dl>
表单标签:
表单标签分为两个部分:
表单域：包含表单元素的区域。重点是 form 标签.
form标签:描述了要把数据按照什么方式，提交到哪个页面中
<form action="test.html">
… [form 的内容]
</form>
表单控件：输入框，提交按钮等。重点是 input 标签
关于input标签:
他的属性:
type（必须有）：取值种类很多，如 button、checkbox、text、file、image、password、radio 等。
文本框:
<input type="text">
密码框:
<input type="password">
单选框:(单选框之间必须有相同的name属性，才能实现多选一的效果)
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
复选框:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打游戏
普通按钮:
<input type="button" value="我是个按钮">
提交按钮:提交按钮必须放到 form 标签内。点击后会尝试给服务器发送数据
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
清空按钮:清空按钮必须放在 form 中。点击后会将 form 内所有的用户输入内容重置。
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
选择文件:点击选择文件，会弹出对话框，选择文件
<input type="file">
name：给 input 起名字，尤其是对于单选按钮，具有相同 name 才能实现 “多选一”。
value：input 中的默认值。
checked：默认被选中（用于单选按钮和多选按钮）。
maxlength：设定输入内容的最大长度。
label标签：搭配 input 使用，点击 label 也能选中对应的单选 / 复选框
for 属性：指定当前 label 和哪个相同 id 的 input 标签对应（此时点击才是有效的）。
<label for="male">男</label> <input id="male" type="radio" name="sex">
select标签:(下拉菜单)
<select>
<option>–请选择年份–</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option selected="selected">1994</option>
<option>1995</option>
</select>
option 中定义 selected="selected" 表示默认选中,如果没有定义这个的话，就是默认选中第一个选项
textarea标签:多行文本输入框
<textarea rows="3" cols="50">
</textarea>
无语义标签:div(分割)和span(跨度)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>div&span</title>
</head>
<body>
<div>
<span>咬人猫</span>
<span>咬人猫</span>
<span>咬人猫</span>
</div>
<div>
<span>兔总裁</span>
<span>兔总裁</span>
<span>兔总裁</span>
</div>
<div>
<span>阿叶君</span>
<span>阿叶君</span>
<span>阿叶君</span>
</div>
</body>
</html>
评论前必须登录！
注册