第二章HTML基础
1、web相关名词
www:当前的互联网服务（所谓的服务是用户通过客户端与服务器进行信息的交换）
客户端：用户用来访问服务器的设备
服务端：给用户提供访问服务的设备
URL：写在浏览器地址栏中的一长串内容，包括协议、域名、端口号、路径、参数
网站：多个网页组合而成的集合
网页由人使用HTML编写而成，前端使用HTML编写代码，然后由浏览器将其渲染解析成相应的图形界面
前端三大组成部分：HTML（结构）{超文本标记语言}、样式（CSS）、JS（行为、动作）
2、HTML语法规则（HTML由正确嵌套的标签构成）
（1）标签分为：单标签【 <单标签名称/> 】、双标签【<双标签名称> </双标签名称>】
（2）属性的语法
属性名=“属性值”（键对值或KV对）
（3）空格和换行的实现方式
空格( ) 换行<br/>
（4）HTML基础标签
HTML骨架标签
<!DOCTYPE HTML>
-- 文档类型是html
<html> </html>
-- 页面中最外层标签--根标签
<head> </head>
-- 网页头部标签-里面内容主要是给浏览器看的内容
<meta charset="UTF-8">
-- 页面编码标准
<title> </title>
-- 网页标题标签-里面内容会显示在浏览器窗口标签上
<body> </body>
-- 网页主体标签-里面内容显示在浏览器的窗口中
标题段落标签
标题标签p1-p6 （双标签） 段落标签p（双）
文字标签（双标签）
弱语义：加粗（b） 删除（s）倾斜（i）
强语义：加粗（strong） 删除（del）倾斜（em）
布局标签（无语义）
独占一行 大盒子 div
非独占一行 小盒子 span
特殊标签
注释ctrl+?(表示注释的内容只会在源码中显示，不会在网页中显示)
图片标签：<img src=”” title=”” alt=””/>
【src代表图片，title代表鼠标悬停在图片时的提示文字，alt代表图片无法正常加载时候显示的文字，一般是对图片内容的描述】
标签语义化：指在合适的地方使用合适的标签，好处：在搜索引擎中排名更靠前，获得更多的点击率
3、HTML基础
（1）路径（绝对路径和相对路径）
绝对路径：从盘符（根目录）为起点--找到目标文件--经过目录用/隔开（资源路径不能保证不会变化，所以不用绝对路径）
相对路径：?同级路径：直接写目标文件
?下级路径：下级目录/目标文件
?上级路径：../目标文件
（2）超链接（使用<a></a>标签实现）
点击的内容：<a>请点击我</a>
跳转的位置：<a >点击的内容</a>
<a href="本地资源相对路径">点击的内容</a>
新窗口打开链接地址：<a href="本地资源相对路径" target="_blank">点击的内容</a>
空链接（点击后不会发生页面跳转）：1. <a href="#">点击的内容_点击后不跳转</a>
1. 一个#号点击后会瞬移到页面顶部
2. <a href="###">点击的内容_点击后不跳转</a>
2. <a href="javascript:;">点击的内容_点击后不跳转</a>
3. <a href="javascript:void(0);">点击的内容_点击后不跳转</a>
（3）表单（通过method收集用户数据，通过action提交给后台某个程序，get表示明文传送，post表示加密传送）
表单标签：<form action=””method=”post”>内容</form>
表单元素标签：?<input type=””/>
type属性指定元素类型包括：
文本框-text（提示内容--添加属性placeholder="提示内容"）
密码框-password（输入内容被星号*代替）
单选按钮-radio（单选实现--多个单选按钮设置相同name属性值）（默认选中添加属性checked=“checked”）
多选框-checkbox（默认选中添加属性checked=“checked”）
扩大表单范围（即选中文字也可以选中）：<label></label>
文字部分填入双标签之间
添加属性for="表单元素的id属性值"
<label for="id值">被点击的内容</label>
效果:点击文字可以选中表单元素
普通按钮-butoon（按钮显示内容--添加属性value=“按钮”）
重置按钮-reset（按钮显示内容--添加属性value=“重置”）
提交按钮-submit（按钮显示内容--添加属性value=“提交”）
?下拉框标签：<select></select>
<select>
<option>选项1</option>
<option>选项2</option>
</select >
(选项默认选中在option中添加属性selected="selected")
?文本域标签：<textarea></textarea>
rows -- 行
cols -- 列
但是一般不通过这两个属性设置文本域的大小,而使用CSS来设置
同时 -- 文本域会通过CSS来关闭大小缩放功能
这两个操作都是避免文本域的兼容性问题
?列表标签
无序列表：
<ul>
<li>内容</li>
<li>内容</li>
</ul>
有序列表：
<ol>
<li>内容</li>
<li>内容</li>
</ol>
|
|
收藏
淘帖
踩
