初级前端语法及方法使用

HTML 指的是超文本标记语言 (HyperText Markup Language)。超文本:是指页面内可以包含图片、链接、声音,视频等内容标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

HTML基本语法

● Head标签(标签)包含了所有的头部标签标签。
● 头部区域的标签标签为:

标签位于文档的头部

标题处添加图标

HTML的基本结构

HTML注释

注释后的内容不会显示在网页上

快捷注释方法:ctrl+shift+/

标签
HTML使用标记标签来描述网页。
标签的结构分为两种：

1. <标签名>标签内容</标签名> 闭合标签(有标签内容)

2. <标签名/> 自闭合标签 (无标签内容)

标签对自己进行一定的修饰利用的是标签属性:如：

1.属性的格式 ：属性名 = “属性值“

2. 属性的位置：
   <标签名 属性名 = “属性值“ >xxx</标签名>

3. 添加多个属性：
   <标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

日常中的常用标签:

标题标签<h1></h1>…..<h6></h6>(如果超出h6,如h7就会默认为普通字体)

● 段落标签

<p></p>

换行标签

<br/>

● 列表(添加type属性可以改变默认排序的符号)

无序列表<ul><li></li></ul>

有序列表<ol><li></li></ol>

● 超链接

<a href="https://www.baidu.com"(定义链接地址) target="_black" (打开链接文档位置)>百度一下</a>

target="_self"(默认值, 在当前窗口打开的新界面);
target="__black"(在新的窗口打开链接打开的位置)
target="_top"(在顶级窗口打开)

● 图像标签<img src="图片路径"/>

●其他标签:

<i>斜体字</i> 
	<b>粗体字</b>
	<u>文本添加下划线</u>
	<del>文本添加删除线</del>
	<s>文本添加删除线</s>
	<font color="red" size="7" face="隶书">修改字体,颜色,大小</font>

在HTML中预留了一些字符, 这些预留字符是不能在网页中直接使用的。
比如 < 和 > ,我们不能直接在页面中使用 < 和 > 号，因为浏览器会将它解析为html签。
例如： 会被解析为b标签，空格,再多的空格都会当一个空格处理。
为了可以使用这些预留字符，我们必须在html中使用字符转义。

• 小于号< * 版权©
  < ©
• 大于号> * 商标™
  > ™
• 空格 * 注册商标®
    ®

表格:

表格的基本构成标签
table标签：表格标签
tr标签：表格中的行
th标签:表格的表头(会自动的加粗,居中)
td标签：表格单元格

表格的属性:

表单

form标签
网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终
提交表单,把客户端数据提交至服务器.

<form action=“http://www.sohu.com”method=“post”>
……
</form>

Action:指定提交后，由服务器上那个处理程序处理 (java程序)

Method: 指定向服务器提交的方法:一般为post或get方法, post方法比较安全

<lable for="userid">用户名<lable>  

在html中还专门提供一个标签，专门用来选中表单中的提示文字的lable标签,lable有一个for属性，该属性需要指定一个表单项的id值。

<input type=“text ”id=“userid” name=“username” value=“张三”
size=“20“ readonly=“readonly”placeholder=“请输入” disabled=“disabled” >

添加 readonly 只能读取不能输入(但是值还可以向服务器端发送)

placeholder提示信息 disabled 不能输人值也无法正常发送

密码框基本语法

<input type=“password ” value=“ 123456 ” size=“22”/>

单选按钮基本语法(单选框通过name属性来分组，name相同是一组才可实现单选。)

<input type="radio" value="男" checked="checked“/>

复选框基本语法

<input type=“checkbox” name="cb2“ value="talk“/>

单选和复选不能输入内容，所以必须指定value的值。

文件选择框语法

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

accept=“.文件后缀名,.文件后缀名… “ 限制文件类型

<input type="file" name="userImg" accept=".jpg,.png"/>

下拉框:

<select name="bmon">
<option value=“” >选择省份</ option >
< option value=“100”>山西</ option >
< option value=“101” selected = ” selected ” >陕西</ option >
< option value=“102”>河南</ option >
</select>

selected=selected为默认选中, 下拉框的name,id,事件等需要在select中定义，而value需要在option中定义。

多行文本域基本语法

<textarea name="textarea" cols="40" rows="6">
文本域中的内容 </ textarea >

按钮

<input type=“reset” value=“ 重填 ”> 重置表单内容
<input type="submit" value="提交"> 提交表单内容到服务器
<input type="button" value="按钮"> 普通按钮没有功能，只能被点击触发事件用

内联框架

内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面

<iframe src=# (初始页面的 URL) name=# width=# height=#
frameborder=#(框架的边框宽度) > ... </iframe>