HTML学习笔记

HTML学习笔记

为初学者准备的:HTML速成

HTML Crash Course For Beginners

Part Ⅰ

  • 超文本标记语言,不是编程语言,告诉浏览器如何构造网页

  • <p>Lorem ipsum dolor sit ametp>
    
  • 起始标签+内容+结束标签

Part Ⅱ

DOCTYPE html> ——> 用来解释文档的类型

<html>
    <head>
        
    head>
    
    
    <body>
        
        
    body>
html>

Part Ⅲ

01 块级元素

  • 在页面以块的形式展现,出现在新的一行,占全部宽度

  • <div>div>
    <h1>...
    <p>
    

02 内联元素

  • 通常在块级元素内,不会导致文本换行,只占必要的部分宽度

  • <a>
    <img>
    <em>
    <strong>
    <a href="url" target="_blank">Lorema>
    

03 列表


<ul>
    <li>list item1li>
    <li>list item2li>
    <li>list item3li>
    <li>list item4li>
    <li>list item5li>
ul>

<ol>
    <li>list item1li>
    <li>list item2li>
    <li>list item3li>
    <li>list item4li>
    <li>list item5li>
ol>

04 表格

<table>
    <thead>
    	<th>first nameth>
        <th>last nameth>
        <th>ageth>
    thead>
table>

JavaWeb教程-HTML零基础入门

一、html简介

  • 什么是html

    • 超文本标记语言
  • html能做什么

    • 通过标记标签描述网页
  • html书写规范

    • 标签是以尖括号包围的关键字

    • 格式:属性=‘属性值’ //多个属性之间空格隔开

    • 不区分大小写,建议全小写

二、结构标签

网页基本结构
:根标签
	:网页头标签
		:页面的标题
	
    :网页正文

嵌套结构
带/的是结束部分,没有/是开始部分
属性名 代码 描述
text 设置网页正文中所有文字的颜色
bgcolor 设置网页的背景色
background 设置网页的背景图
颜色的两种表示方式

01.英文单词 eg:res

02.16进制表示颜色 eg:#000000

demo 01


	
			
			
	
	
			hello,world!
	

三、RGB颜色和相对路径

demo 01


	
			
			
	
	
			hello,world!
	


地址:..表示向上一级去找父目录	eg:../pic/logo.png
程序员计算器

HEX——十六进制

DEC——十进制

OCT——八进制

BIN——二进制

四、排版标签

可用于实现简单的页面布局

注释标签:

换行标签:

段落标签:

文本文字

​ 特点:段与段之间有空行

​ 属性:align对齐方式(left、center、right)

水平线标签:


​ 属性

​ ——width:水平线的长度(两种:第一种-像素表示;第二种-百分比表示)

​ ——size:水平线的粗细(像素表示,eg:10px)

​ ——color:水平线的颜色

​ ——align:水平线的对齐方式

demo 02


	
		
		排版标签

段落1

段落2

段落3


五、块标签和文字标签

demo 03


	
		
		
	
	
		
div标签1div标签1
div标签2
div标签3
span标签1 span标签2 span标签3

使用CSS+div是现下流行的一种布局方式

标签 代码 描述
div
行级块标签,独占一行,换行
span 行内块标签,所有内容都在同一行

,处理网页中文字的显示方式

属性名 代码 描述
size 用于设置字体的大小、最小1号,最大7号
color 用于设置字体的颜色
face 用于设置字体的样式

六、文本格式化标签和标题标签

文本格式化标签

使用标签实现标签的样式处理

标签 代码 描述
b 粗体标签
strong 加粗
em 强调字体
i 斜体
small 小号字体
big 大号字体
sub 上标标签
sup 下标标签
del 删除线
标题标签

随着数字增大文字逐渐变小,字体是加粗的,内置字号,默认占据一行

标签 代码 描述
h1
1号标题,最大字体
h2
2号标题
h3
3号标题
h4
4号标题
h5
5号标题
h6
6号标题,最小字体
demo 04


	
		
		
	
	
		粗体粗体
		
斜体斜体 大号小号 上标:5m2 下标:H2O
删除

最大

七、列表标签

无序列表:使用一组无序的符号定义,

    //un-

    属性值 描述 用法举例
    circle 空心圆
      disc 实心圆
        square 黑色方块

          有序列表:使用一组有序的符号定义,

            //order

            属性值 描述 用法举例
            1 数字类型
              A 大写字母类型
                大写罗马数字类型
                  a 小写字母类型
                    i 小写罗马数字类型
                      demo 05
                      									无序列表
                      • 规格严格
                      • 功夫到家
                      有序列表
                      1. 哈工大
                      2. 哈哈哈0
                      3. 哈哈哈1
                      4. 哈哈哈2
                      5. 哈哈哈3
                      6. 哈哈哈4
                      嵌套列表
                      无序列表
                      • 规格严格
                        1. 哈工大
                        2. 哈哈哈0
                        3. 哈哈哈1
                        4. 哈哈哈2
                        5. 哈哈哈3
                        6. 哈哈哈4
                      • 功夫到家

                      八、图形标签

                      在页面指定位置处中引入一幅图片,

                      属性名 描述
                      src 引入图片的地址
                      width 图片的宽度
                      height 图片的高度
                      border 图片的边框
                      align 与图片对齐显示方式
                      alt 提示信息
                      hspace 在图片的左右设定空白
                      vspace 在图片的上下设定空白
                      demo 06
                      
                      
                      • 第九节 链接标签

                      • 第十节 基本表格标签

                      • 第十一节 基本form表单

                      • 第十二节 input标签

                      • 第十三节 select标签和textarea标签介绍

                      • 第十四节 框架集

                      HTML实践知识补充

                      form标签
                      • <form action="form_action.asp" method="get">
                          <p>First name: <input type="text" name="fname" />p>
                          <p>Last name: <input type="text" name="lname" />p>
                          <input type="submit" value="Submit" />
                        form>
                        
                      • 参数:action、method

                        • action:点击提交按钮时,表单内的数据会提交到action所确定的页面中
                        • method:表单数据发送数据给服务器的请求类型 [ get | post ]
                      input标签
                      • <input type="表单类型" value="XXX" />
                        

                      你可能感兴趣的:(html,学习,笔记)