html基础

最新推荐文章于 2024-12-16 16:52:23 发布

原创最新推荐文章于 2024-12-16 16:52:23 发布 · 383 阅读

0 ·

CC 4.0 BY-SA版权

html+css 专栏收录该内容

25 篇文章

订阅专栏

h1~h6标签是标题
p标签是段落，里面只能放文本、图片、表单元素（这三个都是流元素：流元素就是一行放不下，会转到第二行放）
img标签，alt=”替代文本，当图片不能显示的时候显示这里的文字”
a标签，title=”悬停文本” target=”_blank”打新页面
页面内锚点： href=”要跳转的锚点的id值”直接跳转到id值为某某的位置。
ul无序列表，去掉前面圆点,给ul添加 list-style:none;
ul 的儿子必须是li,不能是其他标签。导航条通常就是ul无序列表
li是一个容器级标签，里面什么都可以放。甚至放一个ul都可以。
dl定义列表。首先是dt列表列出北京这个项目，其次dd定义列表是对列出的项目进行描述。dd是描述dt的，可以有很多dd来描述一个dt。dd、dt是容器级标签，里面放什么标签都可以。
一般用于网站脚部的服务、联系我们等列表。

定义列表
<dl>
  <dt>北京</dt>
  <dd>北京是首都</dd>
  <dd>北京污染比较严重</dd>
  <dd>北京人口比较多</dd>  
</dl>

这里写图片描述

span和div都是区域。使页面区域更清晰。
div标签，div中的所有元素都是一个小区域。是一个容器级标签，里面什么标签都能放。
span是一个文本级标签，里面只能放文字、图片、表单元素。不能放p、ul、ol、dl、div、h1等标签。
span是行内（inline）元素，不能设置宽高，只有转换成块元素成可以设宽高。span里可以放小标签比如：a标签。
div是放大元素的。
div+css：div负责布局、负责分块、负责结构，css负责样式。
表单，就是收集用户信息的，就是让用户填写的、选择的。所有的表单内容都要写在form标签里。
action表示表单提交到哪里。method表示用什么http方法提交有“get”、”post”两种提交方法。

<form action="#" method="get"></form>

input标签，类型根据type设置
属性：
maxlength=”10”用于设置输入到文本框的最大字符数。输入达到最大数后，用户按下更多键也不会添加新字符；
value=”默认值”设置表单域的初始值。网页加载过程中，默认显示该值；

<input type="text" value="文本框中默认有的值，已经写好的值">
<input type="password" name="" id="">
<input type="radio" name="" id="">
<input type="checkbox" name="" id="">
<input type="button" value="确定">button是按钮，value是按钮上面显示的文字
<input type="submit">提交按钮，会自动提交到form表单中action设置的值页面中
<input type="reset" value="">复位按钮

快捷键写法：例如input:radio。
单选按钮radio天生是不互斥的，要想互斥，就必须要有相同的name名字例如：

这样两个都可以选中，因为name没有设置相同的值：
男<input type="radio" name="" id="">
女<input type="radio" name="" id="">

这样只能选中一个，因为name具有相同的值sex：
男<input type="radio" name="sex" id="">
女<input type="radio" name="sex" id="">

chexkbox复选框写法：
虽然不需要互斥，但最好设置相同的name属性，不影响多选
如果想默认选中一个就用checked=”checked”。html5中可以直接写一个checked。

<input type="checkbox" name="hobby" id="">吃饭
<input type="checkbox" name="hobby" id="">睡觉
<input type="checkbox" name="hobby" id="">打豆豆

select下列表：select“选择”，option“选项”

<select name="" id="">
  <option value="" disabled="disabled">请选择</option>
  <option value="">苹果</option>
  <option value="">橙子</option>
  <option value="">香蕉</option>
  <option value="">草莓</option>
</select>

textarea多行文本框（文本域）:text“文本”，area “区域”
name=”“属性用于指定多行文本框的名称 rows“行”，cols“列”值就是一个数，表示多少行多少列。
wrap=”“属性用于指定文本内容大于文本框宽度时的显示方式,值有 “off：默认值内容多时添加滚动条”，“virtual：实现文本区的自动换行，但在传输给服务器时，文本只有在用户按下Enter键的地方进行换行，其他地方没有换行的结果”，“physical：实现文本区内的内容自动换行，并以这种形式传送给服务器”；
用户若输入更丰富的内容时，可以采用富文本框RTE(Rich Text Editor)来实现；

<textarea name="name" rows="8" cols="80" wrap="physical"></textarea>

label标签，就是通过label的属性for的值绑定其他标签的id，来绑定文字（或者图片）和input标签。这样就有绑定关系了。
下面的“男”、“女”跟input标签是没有任何关系，点击文字时单选框按钮不会被选中。label就是解决这个问题的，让文字和input有关系。
label标签包裹文字，for的值对应input框的id值，这样就能够绑定文字和标签。即点击文字就会选中input框。

<label for="man">男</label><input type="radio" name="" id="man">
<label for="woman">女</label><input type="radio" name="" id="woman">

字符实体，具体参考手册参考手册

<p>刚刚学习了&lt;h1>标签</p>
  &lt;小于号
  &gt;大于号
  &copy;版权符号
  &nbsp;空格

b（加粗）、u（下划线）、i（倾斜）、em（强调）、strong（强调）等标签一般做为css的钩子使用。
<hr/>水平线、<br/>换行页面中一般不用这两个标签

hr {
  width: 95%;
  text-align: center;
  color: green;
}