html--基础篇

一、什么是 HTML?

HTML('超文本标记语言 Hyper Text Markup Language') 
    是用'标记标签'来描述网页的一种语言。--不是一种编程语言,而是一种标记语言.
    标记语言:是一套标记标签 (markup tag),

二、基本标签

1、标题–h1~6
HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的
    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>...
2、段落 --p
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
3、链接–a
HTML 链接是通过 <a> 标签进行定义的  
 <a href="http://www.w3school.com.cn">This is a link</a>    

在这里插入图片描述

4、图像–iamge
HTML 图像是通过 <img> 标签进行定义的。
 <img src="./timg.jpg" width="104" height="142" />--'宽高指定一个 可等比列的缩放'
5、换行、空格、横线等标签
<br>      --换行
&nbsp     --空格
<hr/>     --一条横线
<strong>  --文本变粗体 
<font color=”red” size=10px”></font> --文本变颜色 大小 
      --'px文本大小的单位(屏幕宽1024像素点一般)'
6、块级/行内元素
块级元素(block)    --'块级元素 占领整个版面的宽 <h1~h5> <div> <p>'
与行内元素(inline   --'默认不换行 <strong>   <font' 绝大多数都是行内标签
7、表格标签
表格是块级元素
作用:
    通过表格展示数据
    通过表格建立html页面中的布局
  

在这里插入图片描述

在这里插入图片描述

文本内容的对其方式:  
 <tr>中: 
    align:属性控制文本的位置(居中、左、右) 
    valign:控制垂直的位置
        
跨列: colspan 设置到 <td> 标签中    
跨行: rowspan 设置到 <td> 标签中

在这里插入图片描述
在这里插入图片描述

表格布局:

在这里插入图片描述
在这里插入图片描述

8、表单标签
基本组成:   
a)<form>
b)单行文本域<input type=”text”/>
c)密码域<input type=”password”/>
d)提交按钮<input type=”submit”/>
e)下拉列表<select>
f)单选框   radio
g)复选框   checkbox
h)普通按钮 button   '<input type=”button” value=”显示的内容”/>'
i)重置按钮  reset    '<input type=”reset” value=”重置按钮”/>'
j)隐藏文本域 hidden  '<input type=”hidden” name=”” value=””/>'
k)文件上传标签 file   '<input type=”file” name=””/>' 有浏览器差异
l)多行文本域标签 替代方案 富客户端编辑工具  '<textarea  name=”” rows=”” cols=””/>' 有浏览器差异
  
其他补充
   checked属性 作用:单选框或者复选框被选中。 'checked="checked" '
   selected属性 作用:下拉列表项被选中      'option中设置属性: selected="selected"'
   disabled属性 作用:使表单元素失效   		'可见不可修改,一般陪着value属性使用'

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9、列表
有序:
  	<ol>
        <li>Coffee</li>
        <li>Milk</li>
	</ol>
        

在这里插入图片描述

无序:
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>

在这里插入图片描述

定义列表:
	<dl>
        <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dt>Milk</dt>
        <dd>White cold drink</dd>
    </dl>

在这里插入图片描述

<dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44809337/article/details/107486221