web前端学习笔记01-HTML概述与基础知识1

一、什么是HTML

HTML是用来描述网页的一种超文本标记语言,运行在浏览器上,由浏览器来解析,它不是一种编程语言,而是一种标记语言(标记标签)。HTML文档也叫做web页面,包含HTML标签以及文本内容.

二、基本结构




<html> 
	<head>
		
		
		<meta charset="utf-8" />
		
		<title>第一个网页title>
	head>
	<body>
		
	body>
html>

三、HTML标签

HTML标记标签是由尖括号包围的关键词,HTML标签包括双标签与单标签,双标签必须成对出现有闭合标签,即<开始标签>内容

四、HTML属性

· HTML元素可以设置属性
· 属性一般加在开始标签
· 属性一般以名称/值对的形式出现,如name=“value”
· 属性值必须用双引号引起来
· 标签都用小写字母

五、HTML常用标签

1.常用块级标签(独占一行)

1-1 标题标签

有默认样式(边距等),独占一行
1-2 段落标签

有默认样式,独占一行
1-3 强制换行标签

1-4 无序列表
  • 列表项
列表项由小黑圆点标记,有默认样式,独占一行
1-5 有序列表
  1. 列表项
列表项由数字、字母等序号标记,有默认样式,独占一行
    常用属性:type——设置序号样式,start——设置开始序号
    【注】
        的下级标签只能是

      1. 1-6 自定义列表
        标题1
        列表项1-1
        列表项1-2
        标题2
        列表项2-1
        列表项2-2

        1-7 表格
        表头
        表头th默认水平居中、字体加粗
        【表格常用属性】

        关键字 释义
        border 边框是否显示,0或1
        width 宽度 ?px
        height 高度 ?px
        cellpadding 内容距离表框的距离 ?px
        cellspacing 单元格与单元格的间距 ?px
        rowspan 单元格垂直合并(跨行显示)(设置垂直方向一个单元格占据的宽度)
        colspan 单元格水平合并(跨列显示)(设置水平方向一个单元格占据的宽度)
        align 内容水平方向对齐方式 left(默认) center right
        valign 内容垂直方向对齐方式 top middle(默认) bottom

        中设置影响整行,在中设置仅影响该单元格
        1-8 水平分割线标签



        1-9 区块标签
        没有默认样式,独占一行,一般用来划定一块区域,常配合CSS在布局中使用

        常用块级标签代码
        
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>常用HTML块级标签title>
        head>
        <body>
        
        
        
            
            <h1>这是一级标题h1>
            <h2>这是二级标题h2>
            <h3>这是三级标题h3>
            <h4>这是四级标题h4>
            <h5>这是五级标题h5>
            <h6>这是六级标题h6>
        
            
            <p>当记忆的风吹来时,便漾出无边的心澜,念也悄悄,思也无言,让思绪的花在指尖淡淡飘香,心,会莫名的安静与柔软,一任灵魂于温温婉婉中,诉说深深浅浅的美丽。p>
            <p>轻握一份懂得,在似水的流年中,轻倚一袭心湖的斑斓,让真情点亮夜的星光,在纯净的音乐里,倾听心灵的纤尘不染。p>
            
            <p>轻握一份懂得,在似水的流年中,轻倚一袭心湖的斑斓。<br>让真情点亮夜的星光,在纯净的音乐里,倾听心灵的纤尘不染。p>
        
            
        
            
            <ul>
                <li>列表项1li>
                <li>列表项2li>
                <li>列表项3li>
            ul>
        
            
            
            <ol type="A" start="3">
                <li>有序列表项1li>
                <li>有序列表项2li>
            ol>
        
            
            <dl>
                <dt>列表标题1dt>
                <dd>自定义列表项1-1dd>
                <dd>自定义列表项1-2dd>
                <dd>自定义列表项1-3dd>
                <dt>列表标题2dt>
                <dd>自定义列表项2-1dd>
                <dd>自定义列表项2-2dd>
                <dd>自定义列表项2-3dd>
            dl>
        
            
            <table border="1" cellpadding="10px" cellspacing="0" width="600px" height="100px">
                
                <tr>
                    
                    <th colspan="4">表头th>
                tr>
                
                <tr align="center">
                    <td colspan="4">第一行第一列td>
        
        
        
        
                tr>
                
                <tr>
                    <td rowspan="2">第二行第一列td>
                    <td>第二行第二列td>
                    <td>第二行第三列td>
                    <td>第二行第四列td>
                tr>
                
                <tr valign="bo">
        
                    <td>第三行第二列td>
                    <td>第三行第三列td>
                    <td>第三行第四列td>
                tr>
            table>
        
        
        <hr>
        
        
            <div>
                这是一个div
            div>
        <br>
        <hr>
        
        body>
        html>

你可能感兴趣的:(web前端学习,html,web,html5)