网页搭建入门之HTML与CSS(1) -- HTML入门

1.HTML:超文本标记语言

开发工具:Sublime3
sublime安装地址:Sublime3.

html的基本结构,<html></html>文档标记,<head></head>头部标记,<body></body>正文标记,这三个标记为HTML的基本结构的组成标签。
其中<title></title>属于<head></head>中的一部分

XML主要用于保存数据,HTML用于显示信息

2.标签

字体标签
H4H5中font 字体标签目前已经不使用了,但是以前老的网站仍存在使用的情况,维护时需要知道

font用来描述字体
size=数值 表示字体的大小,范围1-7(超过7不在变化)默认数值3
face=“字体样式” 表示字体样式设置
color=“颜色” 表示字体颜色的设置,属性color也可以以16进制或RGB表示
eg:<font> size=3 face="楷体" color="#000000"> 我是字体</font>

段落标签和注释
<p><br>的区别:
<br>标签用于换行使用,但是不换段落。上下不会添加空行
<p>是用于换段落,浏览器会自动的在段落的前后添加空行
两者的使用是不同的,千万不可以混淆。如果需要更换段落,就是用<p>
如果是换行,则需要使用<br>
不能混乱。
注释<!--......-->
增加可读性

标题标签
<h?>......</h?>
h1 → h6,权重h1最大,h6最小
【通常使用 h1 h2 h3】
h1 大标题 ×1
h2 副标题 ×1
h3 栏目标题…
seo 关键词优化,百度爬虫抓取 → h1标签,比较重要
h1 靠近body好 h1不能过多
<h1>标题1的标签虽然在语法上可以写入多个,但是会被百度等搜索引擎认定为违规的操作,非但不能够起到作用,反而会被搜索引擎列入黑名单,所以千万不要写多个标签</h1>

img标签
【图片标签】
<img src="**" alt="xx" />
属性 src alt width height
alt 提示信息(图片不存在/不能正常显示时,出现)
src = “XX路径”【相对路径/绝对路径】
图像标签的src属性是必写的

src=“…/image/head…”,前面的“…”的意思是返回上一级路径,这里是相对路径(和Linux中的命令“cd …”返回上一个文件夹类似)
绝对路径是从盘符开始,src=“d:/image/a.jpg”,
**一般使用相对路径比较多
注意:
1.当图片资源的路径文件夹,与当前的html文件同级时,直接使用,上一级文件 …/
2. src的值也可以是网络上的图片

超链接
超级链接标签
<a>......</a>
链接,图片都可以打开
<a href=""></a>超链接
打开外网 需要加上 http://www.xxx.com
a标签的target属性 _blank,_parent,_self,_top
target属性
_blank :在新打开、未命名的窗口打开链接,
_parent :在父窗口打开链接
_self :当前窗口打开
_top: 目标将会清除所有被包含的frame框架
解释一下:blank有空白的意思,也就是在新的空白页面打开的意思

超链接便签是<a>,可能和address,地址这个单词有关吧。
例子:<a href="https://www.xxx.com">XXX</a>,href后面加上需要转向的地址,两个便签<a>之间是显示在页面上的提示内容,当然可以是文字,图片,使用图片时,需要使用img标签载入图片,<img src="image/logo.png">
比如:<a href="https://www.baidu.com" target="_blank"> <img src="image/logo.png"> </a>
注意:target后面的字符有好几种,可以有不同的打开页面方式
_blank 在新打开、未命名的窗口打开链接,
_parent 在父窗口打开链接
_self 当前窗口打开
_top 目标将会清除所有被包含的frame框架
解释一下:blank有空白的意思,也就是在新的空白页面打开的意思
self有自己的意思,也就是在自己当前的页面打开新链接

锚点标签
<a name="duanluo">......</a>(位置)
作用:同一个文档中创建指向该锚(位置)的链接
示例:<a href = "#duanluo">段落标签</a>(链接)
提示:锚点必须先定义,在使用

锚链接和超链接都是使用<a>标签定义;命名锚点使用<a>标签的name属性值,使用<a>标签的 href属性指定要链接到锚点的位置,可跳转到同一网页和不同网页内;超链接打开网页

列表
无序列表:<ul><li>列表项</li></ul>
有序列表:<ol><li>列表项</li></ol>
列表项内容:段落、换行符、图片、链接、其他列表

3.表格标签

html表格
表格标签 table tr td border width
table 用于描述表格的开始和结尾,表格
tr 行开始和结尾,行
td 单元格开始和结尾,单元格
th 标签是表格的表头,表头部分会默认加粗
border 用来描述是否显示表格的边框
width 表格的宽度或者单元的宽度
增加边框 是写在table里面的 width用来增加宽度
width 有两种形式 像素和百分比
一个正常的文字大小一般是16px,px表示的是像素
表格的需求设计时 应该多注意列, 单元格会由后期数据库进行操作
eg:<table border="1" width="500px"><tr><td></td></tr></table>

<td>
<td colspan = "2">合并2列
<td rowspan= "2">合并2行
合并后,记得删去原有被合并的单元格(删除的是被合并的部分),否则排版会发生错乱
找位置的基本规则:先数行,再数列

表格其他标签
bgcolor(表格背景颜色)的三种书写方法:
在table标签里面添加属性
bgcolor = “red”
bgcolor = “ff0000//红、绿、蓝,两个两个表示三原色的基本元素”;
rgb表达方式已经被淘汰写法可以如下
style = “background-color:rgb(254,45,54)”

align
left、center、right
表格在文档中的对齐方式

valign
bottom、middle、top
三种垂直对齐方式
<tr>标签属性valign垂直居中方式。
valign的值分别是:
top:对内容进行上对齐。
middle:对内容进行居中对齐(默认值)。
bottom:对内容进行下对齐。
baseline:与基线对齐。

4. html表单

表单
用于收集用户信息,进行人机交互操作的一个标签;(说白了就是可以从键盘输入信息到电脑中,后台程序可以对其进行操作)

<form action="aaa" method="post">
(这里面放许多控件,如)
</form>
action: 把表单所有内容传递给aaa这个文件
method :get 显式提交 post 隐式提交

<input />是自闭合(self-closing)标签,没有结束标签,HTML5中,可以省略斜杠
<meta/>定义页面的说明信息,供搜索引擎查看。
<link/>用于连接外部的CSS文件或脚本文件。
<base/>定义页面所有链接的基础定位。
<br/>用于换行。
<hr/>水平线。
<input/>用于定义表单元素
<img/>图片

标签 <label>...</label>

文本框<input type="text" name="" id="">

密码框<input type="password" name="" id=""> id前端使用,唯一,name后端使用,可重复

单选按钮 <input type="radio" name="" id=""> 单选按钮中name定义名称一致为一组,cheaked="cheaked"默认选中
单选框:
<input type="radio" name="" id="">

复选框(勾选):
<input type="checkbox" name="" id="">

值直接传入后台:" value=“男”
<input type="radio" name="xb" id="" value="男">男

下拉选择框: <select>...</select>
在框中默认一项被选中则 :selected=“selected”
例: <select>
<option value="1995">1995</option>
<option value="1996" selected="selected">1996</option>
<option value="1997">1997</option>
</select>
下拉列表框变为普通列表框: <select size="4"> 允许多选: <select size="4" multiple="true">

不进入后台的普通按钮:type=“submit”
进入后台的提交按钮:type=“button”
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">

多行文本框: <textarea rows="5" cols="30">请输入</textarea>(rows规定了长度,cols规定了宽度)

选择文件按钮: <input type="file">

隐藏域: <input type="hidden" name="" id="">

sublime 使用注意点:
sublime text3怎么让左侧显示目录树?
直接把你要处理的文件夹(已经存在的或者是提前建好的)拖到sublime里面就可以了。然后view->side bar->show side bar.

emmet插件安装失败
1.please wait a bit while pyV8 binary错误
解决方法:
安装或者使用emmet插件时出现:please wait a bit while pyV8 binary错误
下载PyV8
解压修改文件名为PyV8,放到Installed Packages文件夹下。
完整路径:C:\Users\asus\AppData\Roaming\Sublime Text 3\Installed Packages
注意:我发现win64的文件结构是这样的:Installed Packages\PyV8\win64-p3

emmet插件没有效果
1.首先检查emmet是否安装正确
2.检查PyV8文件夹要放在Installed Packages而不是Packages里,而且如果Packages里有PyV8的目录,要删掉

笔记跟源码来源:慕课网,Java实战课程 链接: 慕课网.

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值