黑马程序员技术交流社区

标题: 给大家分享一些基础知识 [打印本页]

作者: 阿雯 时间: 2019-7-24 01:03
标题: 给大家分享一些基础知识
本帖最后由阿雯于 2019-7-24 01:35 编辑

第一HTML中的常用排版标签

1、排版标签
1）标题标签 h
标签语义：作为标题使用，并且依据重要性递减
2）段落标签 p
标签语义：可以把 HTML 文档分割为若干段落
3）水平线标签 hr
标签语义: 使得文档结构清晰，层次分明。<hr/>是单标签。
4）换行标签 br
标签语义: 使段落中的某段文本强制换行显示。
5）div 和 span
这两个没有语义，他们的方法和特点是:

div标签用来布局的，但是现在一行只能放一个div

span标签用来布局的，一行上可以放好多个span

2、文本格式化标签

加粗标签： <b>单纯的加粗</b> <strong>语义化强调</strong>

倾斜标签： <i>单纯的加粗</i> <em>语义化强调</em>

删除线标签： <s>单纯的加粗</s> <del>语义化强调</del>

下划线标签： <u>单纯的加粗</u> <ins>语义化强调</ins>

3、图片标签

1) img标签,单标签，<img />,必须配合src属性将图片引入html页面，<img src=“图片路径” />

2) src 属性值 --- url 图像路径

alt 属性值 --- 自定义文本图像不能正常显示的时候替换文本；

title 属性值 --- 自定义文本鼠标移入图片显示提示文本；

width 属性值--- 自定义数值设置图片的宽度；

height 属性值 --- 自定义数值设置图片的高度；

4、超链接a

a标签，双标签

<ahref=”链接路径”></a>

href用于指定链接目标的url路径地址，必不可少的；

target用于指定链接页面的打开方式，属性值我们一般选择新窗口打开 _blank

5、代码注释

html注释：

css注释：/* 注释内容 */

快捷键：Ctrl+？

添加注释的作用：说明代码的含义，更好的管理代码的可读性，程序是不会对注释的代码进行解析的

第二html的基本结构:

<!DOCTYPEhtml>

<htmllang="en">

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

其中<!DOCTYPE html>让浏览器用H5的标准来解析代码，

语言：lang="en" 当前网页所在国家的语言，一般en表示英文，zh-CN 表示中文

字符集：<meta charset="UTF-8"> 用来对我们书写的字符进行对应国家文字的编译

常用的字符编码：Gb2312简体中文 BIG5 繁体中文 GBK 全部中文（包括简体和繁体中文）最重要：（UTF-8）：全世界所有国家需要用到的字符

head 标签里面的内容是给浏览器解析的，用户只能看到title标题；

body 标签里面的内容是给用户看的；

第三 HTML标签关系

嵌套关系 --- 父子级关系；并列关系 --- 兄弟关系

第四表格

1）基本结构

一对table标签嵌套tr标签，tr标签嵌套td标签；

table表示表格整体，tr表示行，td表示单元格（列）；

<table>

<tr>

</tr>

</table>

2）表格的常见属性：

宽：width；高：height；边框：border，如果设置border=0是没有边框；

对齐方式：align 取值left、center、right；设置表格在网页中的水平对齐方式；

单元格和单元格之间的距离：cellspacing

单元格内容到单元格边框的距离：cellpadding

3）表格表头标签th

tr嵌套th书写，默认是加粗居中显示的效果；

<tr>

</tr>

4）表格标题标签caption

<tablewidth="800">

<caption>表格标题标签</caption>

<tr>

</tr>

</table>

第五列表

1）无序列表

结构：ul嵌套li标签；

<ul>

</ul>

2）有序列表：ol嵌套li标签；

<ol>

</ol>

3）自定义列表：dl嵌套dt和dd标签；

<dl>

</dl>

第五表单

1）表单的input控件

input的常见属性

type 类型

value默认值

name属性的作用：在存在多个input表单的时候，设置不同的name取值进行区别，一般是后台工作人员去使用；

input文本控件

所有的input控件都是通过更改type的取值不同实现不同的效果；

文本框：input的type取值为text <input type=“text” />

可以设置value属性设置默认的值，<input type=“text” value=“默认值” />

密码框：input的type取值为password <input type=“password” />

单选按钮：type=“radio” ,想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类； <inputtype="radio" name="sex">

复选按钮：type=“checkbox”，也可以设置同样的name名称，但是不会影响多选的效果； <inputtype="checkbox" >

注意：如果想要实现单选按钮和复选按钮默认选中效果我们就需要设置对应的属性checked=“checked”

单选按钮 <inputtype="radio" checked="checked“ >

复选按钮 <inputtype="checkbox" checked="checked" >

input按钮控件

普通按钮：<input type=“button” value=“普通按钮” /> 必须要自己设置value值；

提交按钮：<input type=“submit” />；可以设置自己的value值也可以用默认的；

重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的；

图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径；

标签按钮：<button>我是标签按钮</button>file:///C:/Users/Arwin/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg

文件域名：<input type=“file” /> 上传文件使用；

2）label标签

作用：

提高用户体验，扩大input表单的可操作性，点击文字可以直接将光标定到输入框，不是表单标签；

使用方法：

方法1：用label直接包括input表单 -----

<label>用户名：<input type=“radio” name=“usename” value=“请输入用户名” /> </label>；

方法2：用for 属性规定 label 与哪个表单元素绑定 ----

<labelfor=“nan”>男</label> <input type=“radio” name=“sex” id=“nan“ />

3)textarea文本域标签

双标签

文本框input和文本域textarea的区别：

input只能显示一行文本，单标签，通过value设置默认值，一般适用于用户名，昵称，密码等；

textarea可以显示多行文本，双标签，一般适用于留言板等；

4)select下拉列表

下拉列表的结构：一对select标签嵌套多对的option标签

</select>

如果option有selected=“selected”表示默认选中；

<optionselected="selected">北京</option>

</select>

5) form表单域标签（重要）

作用：

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2